Source: ui/save_video_frame_button.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.SaveVideoFrameButton');
  10. goog.require('shaka.ads.Utils');
  11. goog.require('shaka.cast.CastProxy');
  12. goog.require('shaka.ui.ContextMenu');
  13. goog.require('shaka.ui.Controls');
  14. goog.require('shaka.ui.Element');
  15. goog.require('shaka.ui.Enums');
  16. goog.require('shaka.ui.Locales');
  17. goog.require('shaka.ui.Localization');
  18. goog.require('shaka.ui.OverflowMenu');
  19. goog.require('shaka.ui.Utils');
  20. goog.require('shaka.util.Dom');
  23. /**
  24.  * @extends {shaka.ui.Element}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.ui.SaveVideoFrameButton = class extends shaka.ui.Element {
  29.   /**
  30.    * @param {!HTMLElement} parent
  31.    * @param {!shaka.ui.Controls} controls
  32.    */
  33.   constructor(parent, controls) {
  34.     super(parent, controls);
  36.     /** @private {shaka.cast.CastProxy} */
  37.     this.castProxy_ = this.controls.getCastProxy();
  39.     const LocIds = shaka.ui.Locales.Ids;
  40.     /** @private {!HTMLButtonElement} */
  41.     this.button_ = shaka.util.Dom.createButton();
  42.     this.button_.classList.add('shaka-save.video-frame-button');
  43.     this.button_.classList.add('shaka-tooltip');
  45.     /** @private {!HTMLElement} */
  46.     this.icon_ = shaka.util.Dom.createHTMLElement('i');
  47.     this.icon_.classList.add('material-icons-round');
  48.     this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.DOWNLOAD;
  49.     this.button_.appendChild(this.icon_);
  51.     const label = shaka.util.Dom.createHTMLElement('label');
  52.     label.classList.add('shaka-overflow-button-label');
  53.     label.classList.add('shaka-overflow-menu-only');
  54.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  55.     this.nameSpan_.textContent =
  56.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  57.     label.appendChild(this.nameSpan_);
  59.     /** @private {!HTMLElement} */
  60.     this.currentState_ = shaka.util.Dom.createHTMLElement('span');
  61.     this.currentState_.classList.add('shaka-current-selection-span');
  62.     label.appendChild(this.currentState_);
  64.     this.button_.appendChild(label);
  66.     this.updateLocalizedStrings_();
  68.     this.parent.appendChild(this.button_);
  70.     this.eventManager.listen(
  71.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  72.           this.updateLocalizedStrings_();
  73.         });
  75.     this.eventManager.listen(
  76.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  77.           this.updateLocalizedStrings_();
  78.         });
  80.     this.eventManager.listen(this.button_, 'click', () => {
  81.       this.onClick_();
  82.     });
  84.     const vr = this.controls.getVR();
  85.     this.eventManager.listen(vr, 'vrstatuschanged', () => {
  86.       this.checkAvailability_();
  87.     });
  89.     this.eventManager.listen(
  90.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  91.           this.checkAvailability_();
  92.         });
  94.     this.eventManager.listen(
  95.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  96.           this.checkAvailability_();
  97.         });
  99.     this.eventManager.listen(this.player, 'unloading', () => {
  100.       this.checkAvailability_();
  101.     });
  103.     this.eventManager.listen(this.player, 'loaded', () => {
  104.       this.checkAvailability_();
  105.     });
  107.     this.eventManager.listen(this.video, 'play', () => {
  108.       this.checkAvailability_();
  109.     });
  111.     this.eventManager.listen(this.video, 'pause', () => {
  112.       this.checkAvailability_();
  113.     });
  115.     this.eventManager.listen(this.video, 'seeking', () => {
  116.       this.checkAvailability_();
  117.     });
  119.     this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  120.       this.checkAvailability_();
  121.     });
  123.     this.checkAvailability_();
  124.   }
  127.   /** @private */
  128.   onClick_() {
  129.     const canvas = /** @type {!HTMLCanvasElement}*/ (
  130.       document.createElement('canvas'));
  131.     const context = /** @type {CanvasRenderingContext2D} */ (
  132.       canvas.getContext('2d'));
  134.     const video = /** @type {!HTMLVideoElement} */ (
  135.       this.controls.getLocalVideo());
  137.     canvas.width = video.videoWidth;
  138.     canvas.height = video.videoHeight;
  139.     context.drawImage(video, 0, 0, canvas.width, canvas.height);
  141.     const dataURL = canvas.toDataURL('image/png');
  143.     const downloadLink = /** @type {!HTMLAnchorElement}*/ (
  144.       document.createElement('a'));
  145.     downloadLink.href = dataURL;
  146.     downloadLink.download =
  147.         'videoframe_' + video.currentTime.toFixed(3) + '.png';
  148.     downloadLink.click();
  149.   }
  152.   /**
  153.    * @private
  154.    */
  155.   checkAvailability_() {
  156.     let available = true;
  157.     if (this.controls.isPlayingVR()) {
  158.       available = false;
  159.     }
  160.     if (available && this.castProxy_.isCasting()) {
  161.       available = false;
  162.     }
  163.     if (available &&
  164.         (this.player.drmInfo() || this.player.isAudioOnly())) {
  165.       available = false;
  166.     }
  167.     if (available && this.ad) {
  168.       available = false;
  169.     }
  170.     if (available &&
  171.         this.video.remote && this.video.remote.state != 'disconnected') {
  172.       available = false;
  173.     }
  174.     shaka.ui.Utils.setDisplay(this.button_, available);
  175.   }
  178.   /**
  179.    * @private
  180.    */
  181.   updateLocalizedStrings_() {
  182.     const LocIds = shaka.ui.Locales.Ids;
  184.     this.button_.ariaLabel =
  185.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  186.     this.nameSpan_.textContent =
  187.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  188.   }
  189. };
  192. /**
  193.  * @implements {shaka.extern.IUIElement.Factory}
  194.  * @final
  195.  */
  196. shaka.ui.SaveVideoFrameButton.Factory = class {
  197.   /** @override */
  198.   create(rootElement, controls) {
  199.     return new shaka.ui.SaveVideoFrameButton(rootElement, controls);
  200.   }
  201. };
  204. shaka.ui.OverflowMenu.registerElement(
  205.     'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());
  207. shaka.ui.ContextMenu.registerElement(
  208.     'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());