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.ui.ContextMenu');
  12. goog.require('shaka.ui.Controls');
  13. goog.require('shaka.ui.Element');
  14. goog.require('shaka.ui.Enums');
  15. goog.require('shaka.ui.Locales');
  16. goog.require('shaka.ui.Localization');
  17. goog.require('shaka.ui.OverflowMenu');
  18. goog.require('shaka.ui.Utils');
  19. goog.require('shaka.util.Dom');
  22. /**
  23.  * @extends {shaka.ui.Element}
  24.  * @final
  25.  * @export
  26.  */
  27. shaka.ui.SaveVideoFrameButton = class extends shaka.ui.Element {
  28.   /**
  29.    * @param {!HTMLElement} parent
  30.    * @param {!shaka.ui.Controls} controls
  31.    */
  32.   constructor(parent, controls) {
  33.     super(parent, controls);
  35.     const LocIds = shaka.ui.Locales.Ids;
  36.     /** @private {!HTMLButtonElement} */
  37.     this.button_ = shaka.util.Dom.createButton();
  38.     this.button_.classList.add('shaka-save.video-frame-button');
  39.     this.button_.classList.add('shaka-tooltip');
  41.     /** @private {!HTMLElement} */
  42.     this.icon_ = shaka.util.Dom.createHTMLElement('i');
  43.     this.icon_.classList.add('material-icons-round');
  44.     this.icon_.textContent = shaka.ui.Enums.MaterialDesignIcons.DOWNLOAD;
  45.     this.button_.appendChild(this.icon_);
  47.     const label = shaka.util.Dom.createHTMLElement('label');
  48.     label.classList.add('shaka-overflow-button-label');
  49.     label.classList.add('shaka-overflow-menu-only');
  50.     this.nameSpan_ = shaka.util.Dom.createHTMLElement('span');
  51.     this.nameSpan_.textContent =
  52.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  53.     label.appendChild(this.nameSpan_);
  55.     /** @private {!HTMLElement} */
  56.     this.currentState_ = shaka.util.Dom.createHTMLElement('span');
  57.     this.currentState_.classList.add('shaka-current-selection-span');
  58.     label.appendChild(this.currentState_);
  60.     this.button_.appendChild(label);
  62.     this.updateLocalizedStrings_();
  64.     this.parent.appendChild(this.button_);
  66.     this.eventManager.listen(
  67.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  68.           this.updateLocalizedStrings_();
  69.         });
  71.     this.eventManager.listen(
  72.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  73.           this.updateLocalizedStrings_();
  74.         });
  76.     this.eventManager.listen(this.button_, 'click', () => {
  77.       this.onClick_();
  78.     });
  80.     const vr = this.controls.getVR();
  81.     this.eventManager.listen(vr, 'vrstatuschanged', () => {
  82.       this.checkAvailability_();
  83.     });
  85.     this.eventManager.listen(
  86.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  87.           this.checkAvailability_();
  88.         });
  90.     this.eventManager.listen(
  91.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  92.           this.checkAvailability_();
  93.         });
  95.     this.eventManager.listen(this.player, 'unloading', () => {
  96.       this.checkAvailability_();
  97.     });
  99.     this.eventManager.listen(this.player, 'loaded', () => {
  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.checkAvailability_();
  120.   }
  123.   /** @private */
  124.   onClick_() {
  125.     const canvas = /** @type {!HTMLCanvasElement}*/ (
  126.       document.createElement('canvas'));
  127.     const context = /** @type {CanvasRenderingContext2D} */ (
  128.       canvas.getContext('2d'));
  130.     const video = /** @type {!HTMLVideoElement} */ (
  131.       this.controls.getLocalVideo());
  133.     canvas.width = video.videoWidth;
  134.     canvas.height = video.videoHeight;
  135.     context.drawImage(video, 0, 0, canvas.width, canvas.height);
  137.     const dataURL = canvas.toDataURL('image/png');
  139.     const downloadLink = /** @type {!HTMLAnchorElement}*/ (
  140.       document.createElement('a'));
  141.     downloadLink.href = dataURL;
  142.     downloadLink.download =
  143.         'videoframe_' + video.currentTime.toFixed(3) + '.png';
  144.     downloadLink.click();
  145.   }
  148.   /**
  149.    * @private
  150.    */
  151.   checkAvailability_() {
  152.     let available = true;
  153.     if (this.controls.isPlayingVR()) {
  154.       available = false;
  155.     }
  156.     if (this.player.drmInfo() || this.player.isAudioOnly()) {
  157.       available = false;
  158.     }
  159.     if (this.ad) {
  160.       available = false;
  161.     }
  162.     if (this.video.remote && this.video.remote.state != 'disconnected') {
  163.       available = false;
  164.     }
  165.     shaka.ui.Utils.setDisplay(this.button_, available);
  166.   }
  169.   /**
  170.    * @private
  171.    */
  172.   updateLocalizedStrings_() {
  173.     const LocIds = shaka.ui.Locales.Ids;
  175.     this.button_.ariaLabel =
  176.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  177.     this.nameSpan_.textContent =
  178.         this.localization.resolve(LocIds.DOWNLOAD_VIDEO_FRAME);
  179.   }
  180. };
  183. /**
  184.  * @implements {shaka.extern.IUIElement.Factory}
  185.  * @final
  186.  */
  187. shaka.ui.SaveVideoFrameButton.Factory = class {
  188.   /** @override */
  189.   create(rootElement, controls) {
  190.     return new shaka.ui.SaveVideoFrameButton(rootElement, controls);
  191.   }
  192. };
  195. shaka.ui.OverflowMenu.registerElement(
  196.     'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());
  198. shaka.ui.ContextMenu.registerElement(
  199.     'save_video_frame', new shaka.ui.SaveVideoFrameButton.Factory());