j1-template 2024.3.22 → 2024.3.23

data/assets/theme/j1/modules/videojs/plugins/players/vm/!unused/vimeo.4.js

@@ -0,0 +1,583 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/videojs/js/vimeo/vimeo.js
+ # Provides Vimeo Playback Technology (Tech) for Video.js V8 and newer
+ #
+ #  Product/Info:
+ #  http://jekyll.one
+ #
+ #  Copyright (C) 2023-2025 Juergen Adams
+ #
+ #  J1 Theme is licensed under MIT License.
+ #  See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+/* global define, VM */
+(function (root, factory) {
+  if(typeof exports==='object' && typeof module!=='undefined') {
+    var videojs = require('video.js');
+    module.exports = factory(videojs.default || videojs);
+  } else if(typeof define === 'function' && define.amd) {
+    define(['videojs'], function(videojs){
+      return (root.Vimeo = factory(videojs));
+    });
+  } else {
+    root.Vimeo = factory(root.videojs);
+  }
+}(this, function(videojs) {
+  'use strict';
+
+   var logger      = log4javascript.getLogger('videoJS.plugin.vimeo');
+   var isOnMobile  = videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
+   var Tech        = videojs.getTech('Tech');
+   var cssInjected = false;
+
+   var startTimeModule;
+   var endTimeModule;
+
+   class Vimeo extends Tech {
+
+    /**
+     * Vimeo - Wrapper for Video Player API
+     *
+     * @param {Object=} options Object of option names and values
+     * @param {Function=} ready Ready callback function
+     * @extends Tech
+     * @class Vimeo
+     */
+      constructor(options, ready) {
+        super(options, ready);
+
+        // jadams: enable VJS controlbar
+        var divElement = document.getElementById(options.playerId);
+        divElement.classList.remove("vjs-controls-disabled");
+
+        this.setPoster(options.poster);
+
+        // Set the vjs-vimeo class on the player PARENT node.
+        // When not set, yet so we have to wait a tick
+        var vm = this;
+        setTimeout(function() {
+          if (this.el_) {
+            this.el_.parentNode.className += ' vjs-vimeo';
+
+            if (isOnMobile) {
+              this.el_.parentNode.className += ' vjs-vimeo-mobile';
+            }
+
+            if (Vimeo.isSdkReady) {
+              vm.initVMPlayer();
+            } else {
+              Vimeo.sdkReadyQueue.push(vm);
+            }
+          }
+        }.bind(this));
+
+      } // END constructor
+
+      initVMPlayer() {
+        const vimeoOptions = {
+          url:      this.options_.source.src,
+          byline:   false,
+          controls: false, // jadams: controlbar may required for some click events
+          portrait: false,
+          title:    false
+        };
+
+        if (this.options_.autoplay) {
+          vimeoOptions.autoplay = true;
+        }
+        if (this.options_.height) {
+          vimeoOptions.height = this.options_.height;
+        }
+        if (this.options_.width) {
+          vimeoOptions.width = this.options_.width;
+        }
+        if (this.options_.maxheight) {
+          vimeoOptions.maxheight = this.options_.maxheight;
+        }
+        if (this.options_.maxwidth) {
+          vimeoOptions.maxwidth = this.options_.maxwidth;
+        }
+        if (this.options_.loop) {
+          vimeoOptions.loop = this.options_.loop;
+        }
+        if (this.options_.color) {
+          // vimeo is the only API on earth to reject hex color with leading #
+          vimeoOptions.color = this.options_.color.replace(/^#/, '');
+        }
+
+        this.vmPlayer = new VM.Player(this.el(), vimeoOptions);
+        this.initVimeoState();
+
+        // setup API events
+        var apiEvents = [
+          'play', 'playing', 'pause', 'ended', 'loaded',
+          'timeupdate', 'progress', 'seeking', 'seeked',
+          'ready'
+        ];
+        apiEvents.forEach(e => {
+          this.vmPlayer.on(e, (progress) => {
+            if (this._vimeoState.progress.duration !== progress.duration) {
+              this.trigger('durationchange');
+            }
+            this._vimeoState.progress = progress;
+            this.trigger(e);
+          });
+
+          this.vmPlayer.on(e, (ready) => {
+            this.vmPlayer.getVideoEmbedCode()
+            .then (function(embedCode) {
+              var code = embedCode;
+            })
+            .catch(function(error) {
+             console.err('Vimeo API: an error occurred');
+            });
+          }); // END on ready
+
+          this.vmPlayer.on(e, (timeupdate) => {
+            if (this._vimeoState.progress.duration !== progress.duration) {
+              this.trigger('durationchange');
+            }
+            this._vimeoState.progress = progress;
+            this.trigger(e);
+          });
+
+          this.vmPlayer.on('pause', () => this._vimeoState.playing = false);
+
+          this.vmPlayer.on('play', () => {
+            this._vimeoState.playing = true;
+            this._vimeoState.ended = false;
+          });
+        }); // END forEach apiEvents
+
+        this.vmPlayer.on('ended', () => {
+          this._vimeoState.playing = false;
+          this._vimeoState.ended = true;
+        });
+
+        this.vmPlayer.on('volumechange', (v) => {
+          this._vimeoState.volume = v;
+        });
+
+        this.vmPlayer.on('error', (e) => {
+          this.trigger('error', e);
+        });
+        // END API events
+
+        this.triggerReady();
+//      logger.debug('\n' + 'created ' + this.name_ + ' player on ID: ' + this.vmPlayer.element.id);
+      logger.debug('\n' + 'created ' + this.name_ + ' player');
+      } // END initVMPlayer
+
+      initVimeoState() {
+        var state = this._vimeoState = {
+          ended:        false,
+          playing:      false,
+          muted:        false,
+          volume:       0,
+          progress: {
+            seconds:    0,
+            percent:    0,
+            duration:   0
+          }
+        };
+
+        this.vmPlayer.getCurrentTime().then(time => state.progress.seconds = time);
+        this.vmPlayer.getDuration().then(time => state.progress.duration = time);
+        this.vmPlayer.getPaused().then(paused => state.playing = !paused);
+        this.vmPlayer.getVolume().then(volume => state.volume = volume);
+
+      } // END initVimeoState
+
+      createEl() {
+        var div = document.createElement('div');
+        div.setAttribute('id', this.options_.techId);
+        div.setAttribute('style', 'width:100%; height:100%; top:0; left:0; position:absolute');
+        div.setAttribute('class', 'vjs-tech');
+
+        var techWrapper = document.createElement('div');
+        techWrapper.setAttribute('class', 'vjs-tech-wrapper');
+        techWrapper.appendChild(div);
+
+        var divOverlay = document.createElement('div');
+        divOverlay.setAttribute('class', 'vjs-tech-overlay');
+        divOverlay.setAttribute('style', 'cursor: pointer; position:absolute; z-index: 5; top:0; left:0; width:100%; height:100%');
+        techWrapper.appendChild(divOverlay);
+
+        // workaround: toggle play|pause when NATIVE controls DISABLED
+        divOverlay.onclick = function() {
+          // suppress default actions|bubble up
+          event.preventDefault();
+          event.stopPropagation();
+
+          if (!this._vimeoState.playing) {
+            this.vmPlayer.play();
+            this._vimeoState.playing = true;
+            this.trigger('play');
+          } else {
+            this.vmPlayer.pause();
+            this._vimeoState.playing = false;
+            this.trigger('pause');
+          }
+        }.bind(this);
+        // END click overlay
+
+        return techWrapper;
+      } // END createEl
+
+      controls() {
+        return true;
+      } // END controls
+
+      supportsFullScreen() {
+        return true;
+      } // END supportsFullScreen
+
+      src() {
+        return this.options_.source;
+      } // END src
+
+      currentSrc() {
+        return this.options_.source.src;
+      } // END currentSrc
+
+      volume() {
+        // return this._vimeoState.volume;
+        this.vmPlayer.getVolume().then((volume) => {
+          // volume = the volume level of the player
+          return volume;
+        }).catch(function(error) {
+          // an error occurred
+        });
+      } // END volume
+
+      setVolume(volume) {
+        // return this.vmPlayer.setVolume(volume);
+
+        this.vmPlayer.setVolume(volume).then((volume) => {
+          // volume was set
+          this.trigger('volumechange');
+          return volume;
+        }).catch(function(error) {
+          switch (error.name) {
+              case 'RangeError':
+              // the volume was less than 0 or greater than 1
+                  break;
+              default:
+              // some other error occurred
+                  break;
+          }
+        });
+      } // END setVolume
+
+      muted() {
+        var vjsPlayer = videojs(this.options_.playerId);
+
+        this.vmPlayer.getMuted().then((muted) => {
+          // ??? toggle mute|unmute
+          var toggleMuted = !this._vimeoState.muted;
+
+
+          this.vmPlayer.setMuted(toggleMuted).then((_muted) => {
+            this._vimeoState.muted = _muted;
+            vjsPlayer.muted(_muted);
+          }); // END setMuted
+        }) // END getMuted
+      } // END muted
+
+      setMuted(mute) {
+        var bla = '';
+      }
+
+      // setMuted(mute) {
+      //   var vjsPlayer = videojs(this.options_.playerId);
+      //   var isMuted   = mute;
+      //
+
+      // } // END setMuted
+
+      buffered() {
+        const progress = this._vimeoState.progress;
+        return videojs.time.createTimeRanges(0, progress.percent * progress.duration);
+      } // END buffered
+
+      buffered() {
+        return !this._vimeoState.playing;
+      } // END buffered
+
+      pause() {
+        this.vmPlayer.pause();
+        this._vimeoState.playing = false;
+      } // END pause
+
+      play() {
+        this.vmPlayer.play();
+        this._vimeoState.playing = true;
+      } // END play
+
+      ended() {
+        return this._vimeoState.ended;
+      } // END pause
+
+      currentTime() {
+        this.vmPlayer.getCurrentTime().then((seconds) => {
+          // seconds = the current playback position
+          return seconds;
+        }).catch(function(error) {
+          // an error occurred
+        });
+      } // END currentTime
+
+      setCurrentTime(seconds) {
+        if (this.lastState === vmPlayer.getPaused()) {
+          this.timeBeforeSeek = this.currentTime();
+        }
+
+        if (!this.isSeeking) {
+          this.wasPausedBeforeSeek = this.paused();
+        }
+
+        this.vmPlayer.seekTo(seconds, true);
+        this.trigger('timeupdate');
+        this.trigger('seeking');
+        this.isSeeking = true;
+
+        // A seek event during pause does not return an event to trigger a seeked event,
+        // so run an interval timer to look for the currentTime to change
+        if (this.lastState === vmPlayer.getPaused() && this.timeBeforeSeek !== seconds) {
+          clearInterval(this.checkSeekedInPauseInterval);
+          this.checkSeekedInPauseInterval = setInterval(function() {
+            if (this.lastState !== vmPlayer.getPaused() || !this.isSeeking) {
+              // If something changed while we were waiting for the currentTime to change,
+              //  clear the interval timer
+              clearInterval(this.checkSeekedInPauseInterval);
+            } else if (this.currentTime() !== this.timeBeforeSeek) {
+              this.trigger('timeupdate');
+              this.onSeeked();
+            }
+          }.bind(this), 250);
+        }
+      } // END setCurrentTime
+
+      seeking() {
+        return this.isSeeking;
+      } // END seeking
+
+      // jadams, 2023-10-01: videojs.createTimeRange() deprecated in VideoJS 9
+      //
+      seekable() {
+        if(!this.vmPlayer) {
+          // return videojs.createTimeRange();
+          return videojs.time.createTimeRanges();
+        }
+        // return videojs.createTimeRange(0, this.vmPlayer.getDuration());
+        return videojs.time.createTimeRanges(0, this.vmPlayer.getDuration());
+      } // END seekable
+
+      onSeeked() {
+        clearInterval(this.checkSeekedInPauseInterval);
+        this.isSeeking = false;
+
+        if (this.wasPausedBeforeSeek) {
+          this.pause();
+        }
+
+        this.trigger('seeked');
+      } // END onSeeked
+
+      playbackRate() {
+        return this.vmPlayer ? this.vmPlayer.getPlaybackRate() : 1;
+      } // END playbackRate
+
+      setPlaybackRate(suggestedRate) {
+        if (!this.vmPlayer) {
+          return;
+        }
+
+        this.vmPlayer.setPlaybackRate(suggestedRate);
+      } // END setPlaybackRate
+
+      // duration() {
+      //   var duration = this.vmPlayer ? this.vmPlayer.getDuration() : 0;
+      //   return duration;
+      // }
+
+      // duration() {
+      //   return this._vimeoState.progress.duration;
+      // } // END
+
+      duration() {
+        this.vmPlayer.getDuration().then((duration) => {
+          // duration = the duration of the video in seconds
+          return duration;
+        }).catch(function(error) {
+          // an error occurred
+        });
+      } // END duration
+
+    } // END class Vimeo
+
+    Vimeo.prototype.featuresTimeupdateEvents = true;
+
+    Vimeo.isSupported = () => {
+      return true;
+    };
+
+    // Add Source Handler pattern functions to this tech
+    Tech.withSourceHandlers(Vimeo);
+
+    Vimeo.nativeSourceHandler = {};
+
+    /**
+     * Check if Vimeo can play the given videotype
+     * @param  {String} type    The mimetype to check
+     * @return {String}         'maybe', or '' (empty string)
+     */
+    Vimeo.nativeSourceHandler.canPlayType = (source) => {
+      if (source === 'video/vimeo') {
+        return 'maybe';
+      }
+    };
+
+    /*
+     * Check Vimeo can handle the source natively
+     *
+     * @param  {Object} source  The source object
+     * @return {String}         'maybe', or '' (empty string)
+     * @note: Copied over from YouTube — not sure this is relevant
+     */
+    Vimeo.nativeSourceHandler.canHandleSource = (source) => {
+      if (source.type) {
+        return Vimeo.nativeSourceHandler.canPlayType(source.type);
+      } else if (source.src) {
+        return Vimeo.nativeSourceHandler.canPlayType(source.src);
+      }
+    };
+
+    // @note: Copied over from YouTube — not sure this is relevant
+    Vimeo.nativeSourceHandler.handleSource = (source, tech) => {
+      tech.src(source.src);
+    };
+
+    // @note: Copied over from YouTube — not sure this is relevant
+    Vimeo.nativeSourceHandler.dispose = () => {};
+
+    Vimeo.registerSourceHandler(Vimeo.nativeSourceHandler);
+
+    // Include the version number
+    Vimeo.VERSION = '1.0.0';
+
+    Vimeo.sdkReadyQueue = [];
+
+    // Since the iframe can't be touched using Vimeo's way of embedding,
+    // let's add a new styling rule to have the same style as `vjs-tech`
+    //
+    function injectCss() {
+      if (cssInjected) {
+        return;
+      }
+      cssInjected = true;
+
+      const css = `
+        .vjs-vimeo iframe {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+        .vjs-vimeo-mobile .vjs-big-play-button { display: none; }
+      `;
+
+      const head  = document.head || document.getElementsByTagName('head')[0];
+      const style = document.createElement('style');
+      style.type  = 'text/css';
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+
+      logger.debug('\n' + 'added additional CSS styles');
+      head.appendChild(style);
+    } // END injectCss
+
+    function apiLoaded() {
+      Vimeo.isSdkReady = true;
+
+      for (var i = 0; i < Vimeo.sdkReadyQueue.length; ++i) {
+        Vimeo.sdkReadyQueue[i].initVMPlayer();
+      }
+      logger.debug('\n' + 'created all players from queue: #' + i);
+
+      endTimeModule = Date.now();
+      logger.debug('\n' + 'initializing plugin: finished');
+      logger.debug('\n' + 'plugin initializing time: ' + (endTimeModule-startTimeModule) + 'ms');
+    } // END apiLoaded
+
+    function loadScript(src, callback) {
+      var loaded         = false;
+      var tag            = document.createElement('script');
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+
+      if (!firstScriptTag) {
+        // when loaded in jest without jsdom setup it doesn't get any element.
+        // In jest it doesn't really make sense to do anything, because no
+        // one is watching dailymotion in jest
+        return;
+      }
+
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+      tag.onload = function () {
+        if (!loaded) {
+          loaded = true;
+          callback();
+        }
+      };
+
+      tag.onreadystatechange = () => {
+        if (!loaded && (this.readyState === 'complete' || this.readyState === 'loaded')) {
+          loaded = true;
+          callback();
+        }
+      };
+
+      tag.src = src;
+    } // END loadScript
+
+    // initialize plugin if page ready
+    // -------------------------------------------------------------------------
+    var dependencies_met_page_ready = setInterval (() => {
+      var pageState      = $('#content').css("display");
+      var pageVisible    = (pageState === 'block') ? true : false;
+      var j1CoreFinished = (j1.getState() === 'finished') ? true : false;
+      var atticFinished  = (j1.adapter.attic.getState() == 'finished') ? true : false;
+
+      if (j1CoreFinished && pageVisible && atticFinished) {
+        startTimeModule = Date.now();
+
+        logger.debug('\n' + 'initializing plugin: started');
+        logger.debug('\n' + 'version of videoJS detected: ' + videojs.VERSION);
+
+        // load script loaded from local because of NemeSpace conflicts (Vimeo -> VM)
+        loadScript('/assets/theme/j1/modules/videojs/js/plugins/vm/api/vimeo.js', apiLoaded);
+  //    loadScript('https://player.vimeo.com/api/player.js', apiLoaded);
+
+        injectCss();
+
+        clearInterval(dependencies_met_page_ready);
+      } // END pageVisible
+    }, 10); // END dependencies_met_page_ready
+
+
+    // Check VJS versions to register Wistia TECH
+    if (typeof videojs.registerTech !== 'undefined') {
+      videojs.registerTech('Vimeo', Vimeo);
+    } else {
+      console.error('\n' + 'invalid version of videoJS detected: ' + videojs.VERSION);
+    }
+
+  }));