cloudinary-video-player 3.12.1 → 3.12.2-edge.0

package/lib/chapters.js

@@ -1 +1,205 @@
-(self.cloudinaryVideoPlayerChunkLoading=self.cloudinaryVideoPlayerChunkLoading||[]).push([[625],{9234:(t,e,r)=>{r.d(e,{default:()=>c});var s=r(6673),a=r.n(s),i=r(1865),o=r(2415),n=r(7311);const p=function(){function t(t,e){return this.player=t,this.options=e,this.player.one("loadedmetadata",this.initializeChapters.bind(this)),this}return t.prototype.src=function(t){this.resetPlugin(),this.options=t,this.player.one("loadedmetadata",this.initializeChapters.bind(this))},t.prototype.detach=function(){this.resetPlugin()},t.prototype.resetPlugin=function(){this.chaptersTrack&&(this.player.$(".vjs-control-bar-chapter-display").remove(),this.player.$(".vjs-chapter-display").remove(),this.player.$$(".vjs-chapter-marker").forEach(t=>t.remove()),this.player.removeRemoteTextTrack(this.chaptersTrack),delete this.chaptersTrack)},t.prototype.getChaptersFileUrlByName=function(){const t=this.player.cloudinary.currentPublicId();if(!t)return null;const e=this.player.cloudinary.source(),{type:r}=e.resourceConfig(),s=`${(0,i.k$)(this.player.cloudinary.cloudinaryConfig())}/_applet_/video_service/chapters/${r}/${(0,o.G)(t)}.vtt`;return(0,n.N)(s,e.queryParams())},t.prototype.initializeChapters=async function(){const t=!0===this.options?this.getChaptersFileUrlByName():this.options.url;if(t){const e={kind:"chapters",src:t,default:!0},r=this.player.addRemoteTextTrack(e);r.addEventListener("load",()=>{this.chaptersTrack=r.track,this.setupChaptersDisplays()})}else if(Object.entries(this.options).length){const t=this.player.addRemoteTextTrack({kind:"chapters",default:!0}),e=this.player.duration();Object.entries(this.options).forEach((r,s,a)=>{const i=new VTTCue(parseFloat(r[0]),parseFloat(a[s+1]?a[s+1][0]:e),r[1]);t.track.addCue(i)}),this.chaptersTrack=t.track,this.setupChaptersDisplays(),this.player.controlBar.chaptersButton&&this.player.controlBar.chaptersButton.update()}},t.prototype.setupChaptersDisplays=function(){this.setupProgressBarMarkers(),this.setupProgressBarChapter(),this.setupControlBarChapter()},t.prototype.setupControlBarChapter=function(){const t=this.player.$(".vjs-control-bar-chapter-display")||document.createElement("div");t.setAttribute("class","vjs-control-bar-chapter-display");const e=this.player.$(".vjs-control-bar .vjs-spacer");e.innerHTML="",e.classList.add("vjs-control-bar-chapter-wrapper"),e.appendChild(t),this.chaptersTrack.addEventListener("cuechange",()=>{const e=Array.from(this.chaptersTrack.activeCues);t.innerText=e.length>0?e[0].text:""})},t.prototype.setupProgressBarMarkers=function(){const t=this.player.duration(),{seekBar:e}=this.player.controlBar.progressControl;Array.from(this.chaptersTrack.cues).forEach(r=>{if(0!==r.startTime){const s=r.startTime/t*100+"%",i=a().dom.createEl("div",void 0,{class:"vjs-chapter-marker",style:`left: ${s}`});e.el().append(i)}})},t.prototype.setupProgressBarChapter=function(){const t=a().dom.createEl("div",void 0,{class:"vjs-chapter-display",style:`max-width: ${this.player.$(".vjs-vtt-thumbnail-display")?this.player.$(".vjs-vtt-thumbnail-display").style.width:"160px"}`}),e=this.player.getDescendant(["controlBar","progressControl","seekBar","mouseTimeDisplay"]),r=e.getDescendant(["timeTooltip"]);r.el().parentElement.prepend(t);const s=t=>{const e=t*this.player.duration(),r=Array.from(this.chaptersTrack?.cues||[]).find(t=>e>=t.startTime&&e<=t.endTime);return r?r.text:""};r.update=function(e,r,a){Object.getPrototypeOf(this).update.call(this,e,r,a),t.innerText=s(r)},"object"!=typeof this.player.vttThumbnails&&(e.update=function(e,s){const i=s*this.player_.duration(),o=e.width,n=t.clientWidth/2;r.updateTime(e,s,i,()=>{e.width*s<n?this.el_.style.left=`${n}px`:e.width*s+n>o?this.el_.style.left=e.width-n+"px":this.el_.style.left=e.width*s+"px"}),r.write(a().time.formatTime(i))})},t}(),c=function(t,e){e.addClass("vjs-chapters"),e.chapters=new p(e,t)}}}]);
+import { _ as _vjs } from './_videojs-proxy.js';
+import './video-player.js';
+import './validators-functions.js';
+import { g as getCloudinaryUrlPrefix } from './player-api.js';
+import { u as utf8ToBase64, a as appendQueryParams } from './querystring.js';
+import './_commonjsHelpers.js';
+
+/**
+ * Chapters plugin.
+ *
+ * @function chapters
+ * @param    {Object} [options={}]
+ *           An object of options left to the plugin author to define.
+ * @param    {Player} player
+ *           A Video.js player object.
+ */
+const chapters = function chapters(options, player) {
+  player.addClass('vjs-chapters');
+  player.chapters = new ChaptersPlugin(player, options);
+};
+
+/**
+ * Chapters
+ */
+const ChaptersPlugin = function () {
+  /**
+   * Plugin class constructor, called by videojs on
+   * ready event.
+   *
+   * @function  constructor
+   * @param    {Player} player
+   *           A Video.js player object.
+   *
+   * @param    {Object} [options={}]
+   *           A plain object containing options for the plugin.
+   */
+  function ChaptersPlugin(player, options) {
+    this.player = player;
+    this.options = options;
+    this.player.one('loadedmetadata', this.initializeChapters.bind(this));
+    return this;
+  }
+  ChaptersPlugin.prototype.src = function src(options) {
+    this.resetPlugin();
+    this.options = options;
+    this.player.one('loadedmetadata', this.initializeChapters.bind(this));
+  };
+  ChaptersPlugin.prototype.detach = function detach() {
+    this.resetPlugin();
+  };
+  ChaptersPlugin.prototype.resetPlugin = function resetPlugin() {
+    if (this.chaptersTrack) {
+      this.player.$('.vjs-control-bar-chapter-display').remove();
+      this.player.$('.vjs-chapter-display').remove();
+      this.player.$$('.vjs-chapter-marker').forEach(el => el.remove());
+      this.player.removeRemoteTextTrack(this.chaptersTrack);
+      delete this.chaptersTrack;
+    }
+  };
+  ChaptersPlugin.prototype.getChaptersFileUrlByName = function getChaptersFileUrlByName() {
+    const currentPublicId = this.player.cloudinary.currentPublicId();
+    if (!currentPublicId) {
+      return null;
+    }
+    const source = this.player.cloudinary.source();
+    const {
+      type: deliveryType
+    } = source.resourceConfig();
+    const urlPrefix = getCloudinaryUrlPrefix(this.player.cloudinary.cloudinaryConfig());
+    const fullUrl = `${urlPrefix}/_applet_/video_service/chapters/${deliveryType}/${utf8ToBase64(currentPublicId)}.vtt`;
+    return appendQueryParams(fullUrl, source.queryParams());
+  };
+
+  /**
+   * Bootstrap the plugin.
+   */
+  ChaptersPlugin.prototype.initializeChapters = async function initializeChapters() {
+    const chaptersUrl = this.options === true ? this.getChaptersFileUrlByName() : this.options.url;
+    if (chaptersUrl) {
+      // Fetch chapters VTT from URL
+      const chaptersTrack = {
+        kind: 'chapters',
+        src: chaptersUrl,
+        default: true
+      };
+      const textTrack = this.player.addRemoteTextTrack(chaptersTrack);
+      textTrack.addEventListener('load', () => {
+        this.chaptersTrack = textTrack.track;
+        this.setupChaptersDisplays();
+      });
+    } else if (Object.entries(this.options).length) {
+      // Setup chapters from options
+      const textTrack = this.player.addRemoteTextTrack({
+        kind: 'chapters',
+        default: true
+      });
+      const end = this.player.duration();
+      Object.entries(this.options).forEach((entry, index, arr) => {
+        const cue = new VTTCue(parseFloat(entry[0]), parseFloat(arr[index + 1] ? arr[index + 1][0] : end), entry[1]);
+        textTrack.track.addCue(cue);
+      });
+      this.chaptersTrack = textTrack.track;
+      this.setupChaptersDisplays();
+      if (this.player.controlBar.chaptersButton) {
+        this.player.controlBar.chaptersButton.update();
+      }
+    }
+  };
+
+  /**
+   * Setup chapter displays.
+   */
+  ChaptersPlugin.prototype.setupChaptersDisplays = function initializeChapters() {
+    this.setupProgressBarMarkers();
+    this.setupProgressBarChapter();
+    this.setupControlBarChapter();
+  };
+
+  /**
+   * Setup the controlbar chapter display.
+   */
+  ChaptersPlugin.prototype.setupControlBarChapter = function setupControlBarChapter() {
+    const controlBarChapterHolder = this.player.$('.vjs-control-bar-chapter-display') || document.createElement('div');
+    controlBarChapterHolder.setAttribute('class', 'vjs-control-bar-chapter-display');
+    const wrapper = this.player.$('.vjs-control-bar .vjs-spacer');
+    wrapper.innerHTML = '';
+    wrapper.classList.add('vjs-control-bar-chapter-wrapper');
+    wrapper.appendChild(controlBarChapterHolder);
+    this.chaptersTrack.addEventListener('cuechange', () => {
+      const activeCues = Array.from(this.chaptersTrack.activeCues); // Safari needs Array.from()
+      controlBarChapterHolder.innerText = activeCues.length > 0 ? activeCues[0].text : '';
+    });
+  };
+
+  /**
+   * Setup the progress bar markers.
+   */
+  ChaptersPlugin.prototype.setupProgressBarMarkers = function setupProgressBarMarkers() {
+    const total = this.player.duration();
+    const {
+      seekBar
+    } = this.player.controlBar.progressControl;
+    Array.from(this.chaptersTrack.cues).forEach(marker => {
+      // Safari needs Array.from()
+      if (marker.startTime !== 0) {
+        const markerTime = marker.startTime;
+        const left = markerTime / total * 100 + '%';
+        const markerEl = _vjs.dom.createEl('div', undefined, {
+          class: 'vjs-chapter-marker',
+          style: `left: ${left}`
+        });
+        seekBar.el().append(markerEl);
+      }
+    });
+  };
+
+  /**
+   * Setup the progrees bar on-hover chapter display.
+   */
+  ChaptersPlugin.prototype.setupProgressBarChapter = function setupProgressBarChapter() {
+    const chapterEl = _vjs.dom.createEl('div', undefined, {
+      class: 'vjs-chapter-display',
+      style: `max-width: ${this.player.$('.vjs-vtt-thumbnail-display') ? this.player.$('.vjs-vtt-thumbnail-display').style.width : '160px'}`
+    });
+    const mouseTimeDisplay = this.player.getDescendant(['controlBar', 'progressControl', 'seekBar', 'mouseTimeDisplay']);
+    const timeTooltip = mouseTimeDisplay.getDescendant(['timeTooltip']);
+    timeTooltip.el().parentElement.prepend(chapterEl);
+    const getChapterFromPoint = point => {
+      const total = this.player.duration();
+      const seekBarTime = point * total;
+      const chapter = Array.from(this.chaptersTrack?.cues || []).find(marker => {
+        return seekBarTime >= marker.startTime && seekBarTime <= marker.endTime;
+      });
+      return chapter ? chapter.text : '';
+    };
+    timeTooltip.update = function (seekBarRect, seekBarPoint, content) {
+      const originalUpdateFn = Object.getPrototypeOf(this).update;
+      originalUpdateFn.call(this, seekBarRect, seekBarPoint, content);
+      chapterEl.innerText = getChapterFromPoint(seekBarPoint);
+    };
+
+    // Handle case of no seek-thumbnails
+    if (typeof this.player.vttThumbnails !== 'object') {
+      mouseTimeDisplay.update = function (seekBarRect, seekBarPoint) {
+        const time = seekBarPoint * this.player_.duration();
+        const width = seekBarRect.width;
+        const size = chapterEl.clientWidth / 2;
+        timeTooltip.updateTime(seekBarRect, seekBarPoint, time, () => {
+          // Make sure it doesn't exit the player
+          if (seekBarRect.width * seekBarPoint < size) {
+            this.el_.style.left = `${size}px`;
+          } else if (seekBarRect.width * seekBarPoint + size > width) {
+            this.el_.style.left = `${seekBarRect.width - size}px`;
+          } else {
+            this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
+          }
+        });
+        timeTooltip.write(_vjs.time.formatTime(time));
+      };
+    }
+  };
+  return ChaptersPlugin;
+}();
+
+export { chapters as default };