summaryrefslogtreecommitdiffstats
path: root/assets/js/videojs-markers.js
diff options
context:
space:
mode:
authorOmar Roth <omarroth@hotmail.com>2018-11-11 08:47:42 -0600
committerOmar Roth <omarroth@hotmail.com>2018-11-11 08:47:42 -0600
commitdcddb6fb83df5a0ae0381466897e7fbeb91fe94e (patch)
treec2dd531a17083b115e68ed4a1aedeeb8f148e5e8 /assets/js/videojs-markers.js
parent7f868ecdf9de399db2689d195dc0524fa588f47c (diff)
downloadinvidious-dcddb6fb83df5a0ae0381466897e7fbeb91fe94e.tar.gz
invidious-dcddb6fb83df5a0ae0381466897e7fbeb91fe94e.tar.bz2
invidious-dcddb6fb83df5a0ae0381466897e7fbeb91fe94e.zip
Update license information
Diffstat (limited to 'assets/js/videojs-markers.js')
-rw-r--r--assets/js/videojs-markers.js517
1 files changed, 0 insertions, 517 deletions
diff --git a/assets/js/videojs-markers.js b/assets/js/videojs-markers.js
deleted file mode 100644
index c973edde..00000000
--- a/assets/js/videojs-markers.js
+++ /dev/null
@@ -1,517 +0,0 @@
-(function (global, factory) {
- if (typeof define === "function" && define.amd) {
- define(['video.js'], factory);
- } else if (typeof exports !== "undefined") {
- factory(require('video.js'));
- } else {
- var mod = {
- exports: {}
- };
- factory(global.videojs);
- global.videojsMarkers = mod.exports;
- }
-})(this, function (_video) {
- /*! videojs-markers - v1.0.1 - 2018-02-03
- * Copyright (c) 2018 ; Licensed */
- 'use strict';
-
- var _video2 = _interopRequireDefault(_video);
-
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : {
- default: obj
- };
- }
-
- var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
- return typeof obj;
- } : function (obj) {
- return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
- };
-
- // default setting
- var defaultSetting = {
- markerStyle: {
- 'width': '7px',
- 'border-radius': '30%',
- 'background-color': 'red'
- },
- markerTip: {
- display: true,
- text: function text(marker) {
- return "Break: " + marker.text;
- },
- time: function time(marker) {
- return marker.time;
- }
- },
- breakOverlay: {
- display: false,
- displayTime: 3,
- text: function text(marker) {
- return "Break overlay: " + marker.overlayText;
- },
- style: {
- 'width': '100%',
- 'height': '20%',
- 'background-color': 'rgba(0,0,0,0.7)',
- 'color': 'white',
- 'font-size': '17px'
- }
- },
- onMarkerClick: function onMarkerClick(marker) {},
- onMarkerReached: function onMarkerReached(marker, index) {},
- markers: []
- };
-
- // create a non-colliding random number
- function generateUUID() {
- var d = new Date().getTime();
- var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- var r = (d + Math.random() * 16) % 16 | 0;
- d = Math.floor(d / 16);
- return (c == 'x' ? r : r & 0x3 | 0x8).toString(16);
- });
- return uuid;
- };
-
- /**
- * Returns the size of an element and its position
- * a default Object with 0 on each of its properties
- * its return in case there's an error
- * @param {Element} element el to get the size and position
- * @return {DOMRect|Object} size and position of an element
- */
- function getElementBounding(element) {
- var elementBounding;
- var defaultBoundingRect = {
- top: 0,
- bottom: 0,
- left: 0,
- width: 0,
- height: 0,
- right: 0
- };
-
- try {
- elementBounding = element.getBoundingClientRect();
- } catch (e) {
- elementBounding = defaultBoundingRect;
- }
-
- return elementBounding;
- }
-
- var NULL_INDEX = -1;
-
- function registerVideoJsMarkersPlugin(options) {
- // copied from video.js/src/js/utils/merge-options.js since
- // videojs 4 doens't support it by defualt.
- if (!_video2.default.mergeOptions) {
- var isPlain = function isPlain(value) {
- return !!value && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' && toString.call(value) === '[object Object]' && value.constructor === Object;
- };
-
- var mergeOptions = function mergeOptions(source1, source2) {
-
- var result = {};
- var sources = [source1, source2];
- sources.forEach(function (source) {
- if (!source) {
- return;
- }
- Object.keys(source).forEach(function (key) {
- var value = source[key];
- if (!isPlain(value)) {
- result[key] = value;
- return;
- }
- if (!isPlain(result[key])) {
- result[key] = {};
- }
- result[key] = mergeOptions(result[key], value);
- });
- });
- return result;
- };
-
- _video2.default.mergeOptions = mergeOptions;
- }
-
- if (!_video2.default.createEl) {
- _video2.default.createEl = function (tagName, props, attrs) {
- var el = _video2.default.Player.prototype.createEl(tagName, props);
- if (!!attrs) {
- Object.keys(attrs).forEach(function (key) {
- el.setAttribute(key, attrs[key]);
- });
- }
- return el;
- };
- }
-
- /**
- * register the markers plugin (dependent on jquery)
- */
- var setting = _video2.default.mergeOptions(defaultSetting, options),
- markersMap = {},
- markersList = [],
- // list of markers sorted by time
- currentMarkerIndex = NULL_INDEX,
- player = this,
- markerTip = null,
- breakOverlay = null,
- overlayIndex = NULL_INDEX;
-
- function sortMarkersList() {
- // sort the list by time in asc order
- markersList.sort(function (a, b) {
- return setting.markerTip.time(a) - setting.markerTip.time(b);
- });
- }
-
- function addMarkers(newMarkers) {
- newMarkers.forEach(function (marker) {
- marker.key = generateUUID();
-
- player.el().querySelector('.vjs-progress-holder').appendChild(createMarkerDiv(marker));
-
- // store marker in an internal hash map
- markersMap[marker.key] = marker;
- markersList.push(marker);
- });
-
- sortMarkersList();
- }
-
- function getPosition(marker) {
- return setting.markerTip.time(marker) / player.duration() * 100;
- }
-
- function setMarkderDivStyle(marker, markerDiv) {
- markerDiv.className = 'vjs-marker ' + (marker.class || "");
-
- Object.keys(setting.markerStyle).forEach(function (key) {
- markerDiv.style[key] = setting.markerStyle[key];
- });
-
- // hide out-of-bound markers
- var ratio = marker.time / player.duration();
- if (ratio < 0 || ratio > 1) {
- markerDiv.style.display = 'none';
- }
-
- // set position
- markerDiv.style.left = getPosition(marker) + '%';
- if (marker.duration) {
- markerDiv.style.width = marker.duration / player.duration() * 100 + '%';
- markerDiv.style.marginLeft = '0px';
- } else {
- var markerDivBounding = getElementBounding(markerDiv);
- markerDiv.style.marginLeft = markerDivBounding.width / 2 + 'px';
- }
- }
-
- function createMarkerDiv(marker) {
-
- var markerDiv = _video2.default.createEl('div', {}, {
- 'data-marker-key': marker.key,
- 'data-marker-time': setting.markerTip.time(marker)
- });
-
- setMarkderDivStyle(marker, markerDiv);
-
- // bind click event to seek to marker time
- markerDiv.addEventListener('click', function (e) {
- var preventDefault = false;
- if (typeof setting.onMarkerClick === "function") {
- // if return false, prevent default behavior
- preventDefault = setting.onMarkerClick(marker) === false;
- }
-
- if (!preventDefault) {
- var key = this.getAttribute('data-marker-key');
- player.currentTime(setting.markerTip.time(markersMap[key]));
- }
- });
-
- if (setting.markerTip.display) {
- registerMarkerTipHandler(markerDiv);
- }
-
- return markerDiv;
- }
-
- function updateMarkers(force) {
- // update UI for markers whose time changed
- markersList.forEach(function (marker) {
- var markerDiv = player.el().querySelector(".vjs-marker[data-marker-key='" + marker.key + "']");
- var markerTime = setting.markerTip.time(marker);
-
- if (force || markerDiv.getAttribute('data-marker-time') !== markerTime) {
- setMarkderDivStyle(marker, markerDiv);
- markerDiv.setAttribute('data-marker-time', markerTime);
- }
- });
- sortMarkersList();
- }
-
- function removeMarkers(indexArray) {
- // reset overlay
- if (!!breakOverlay) {
- overlayIndex = NULL_INDEX;
- breakOverlay.style.visibility = "hidden";
- }
- currentMarkerIndex = NULL_INDEX;
-
- var deleteIndexList = [];
- indexArray.forEach(function (index) {
- var marker = markersList[index];
- if (marker) {
- // delete from memory
- delete markersMap[marker.key];
- deleteIndexList.push(index);
-
- // delete from dom
- var el = player.el().querySelector(".vjs-marker[data-marker-key='" + marker.key + "']");
- el && el.parentNode.removeChild(el);
- }
- });
-
- // clean up markers array
- deleteIndexList.reverse();
- deleteIndexList.forEach(function (deleteIndex) {
- markersList.splice(deleteIndex, 1);
- });
-
- // sort again
- sortMarkersList();
- }
-
- // attach hover event handler
- function registerMarkerTipHandler(markerDiv) {
- markerDiv.addEventListener('mouseover', function () {
- var marker = markersMap[markerDiv.getAttribute('data-marker-key')];
- if (!!markerTip) {
- markerTip.querySelector('.vjs-tip-inner').innerText = setting.markerTip.text(marker);
- // margin-left needs to minus the padding length to align correctly with the marker
- markerTip.style.left = getPosition(marker) + '%';
- var markerTipBounding = getElementBounding(markerTip);
- var markerDivBounding = getElementBounding(markerDiv);
- markerTip.style.marginLeft = -parseFloat(markerTipBounding.width / 2) + parseFloat(markerDivBounding.width / 4) + 'px';
- markerTip.style.visibility = 'visible';
- }
- });
-
- markerDiv.addEventListener('mouseout', function () {
- if (!!markerTip) {
- markerTip.style.visibility = "hidden";
- }
- });
- }
-
- function initializeMarkerTip() {
- markerTip = _video2.default.createEl('div', {
- className: 'vjs-tip',
- innerHTML: "<div class='vjs-tip-arrow'></div><div class='vjs-tip-inner'></div>"
- });
- player.el().querySelector('.vjs-progress-holder').appendChild(markerTip);
- }
-
- // show or hide break overlays
- function updateBreakOverlay() {
- if (!setting.breakOverlay.display || currentMarkerIndex < 0) {
- return;
- }
-
- var currentTime = player.currentTime();
- var marker = markersList[currentMarkerIndex];
- var markerTime = setting.markerTip.time(marker);
-
- if (currentTime >= markerTime && currentTime <= markerTime + setting.breakOverlay.displayTime) {
- if (overlayIndex !== currentMarkerIndex) {
- overlayIndex = currentMarkerIndex;
- if (breakOverlay) {
- breakOverlay.querySelector('.vjs-break-overlay-text').innerHTML = setting.breakOverlay.text(marker);
- }
- }
-
- if (breakOverlay) {
- breakOverlay.style.visibility = "visible";
- }
- } else {
- overlayIndex = NULL_INDEX;
- if (breakOverlay) {
- breakOverlay.style.visibility = "hidden";
- }
- }
- }
-
- // problem when the next marker is within the overlay display time from the previous marker
- function initializeOverlay() {
- breakOverlay = _video2.default.createEl('div', {
- className: 'vjs-break-overlay',
- innerHTML: "<div class='vjs-break-overlay-text'></div>"
- });
- Object.keys(setting.breakOverlay.style).forEach(function (key) {
- if (breakOverlay) {
- breakOverlay.style[key] = setting.breakOverlay.style[key];
- }
- });
- player.el().appendChild(breakOverlay);
- overlayIndex = NULL_INDEX;
- }
-
- function onTimeUpdate() {
- onUpdateMarker();
- updateBreakOverlay();
- options.onTimeUpdateAfterMarkerUpdate && options.onTimeUpdateAfterMarkerUpdate();
- }
-
- function onUpdateMarker() {
- /*
- check marker reached in between markers
- the logic here is that it triggers a new marker reached event only if the player
- enters a new marker range (e.g. from marker 1 to marker 2). Thus, if player is on marker 1 and user clicked on marker 1 again, no new reached event is triggered)
- */
- if (!markersList.length) {
- return;
- }
-
- var getNextMarkerTime = function getNextMarkerTime(index) {
- if (index < markersList.length - 1) {
- return setting.markerTip.time(markersList[index + 1]);
- }
- // next marker time of last marker would be end of video time
- return player.duration();
- };
- var currentTime = player.currentTime();
- var newMarkerIndex = NULL_INDEX;
-
- if (currentMarkerIndex !== NULL_INDEX) {
- // check if staying at same marker
- var nextMarkerTime = getNextMarkerTime(currentMarkerIndex);
- if (currentTime >= setting.markerTip.time(markersList[currentMarkerIndex]) && currentTime < nextMarkerTime) {
- return;
- }
-
- // check for ending (at the end current time equals player duration)
- if (currentMarkerIndex === markersList.length - 1 && currentTime === player.duration()) {
- return;
- }
- }
-
- // check first marker, no marker is selected
- if (currentTime < setting.markerTip.time(markersList[0])) {
- newMarkerIndex = NULL_INDEX;
- } else {
- // look for new index
- for (var i = 0; i < markersList.length; i++) {
- nextMarkerTime = getNextMarkerTime(i);
- if (currentTime >= setting.markerTip.time(markersList[i]) && currentTime < nextMarkerTime) {
- newMarkerIndex = i;
- break;
- }
- }
- }
-
- // set new marker index
- if (newMarkerIndex !== currentMarkerIndex) {
- // trigger event if index is not null
- if (newMarkerIndex !== NULL_INDEX && options.onMarkerReached) {
- options.onMarkerReached(markersList[newMarkerIndex], newMarkerIndex);
- }
- currentMarkerIndex = newMarkerIndex;
- }
- }
-
- // setup the whole thing
- function initialize() {
- if (setting.markerTip.display) {
- initializeMarkerTip();
- }
-
- // remove existing markers if already initialized
- player.markers.removeAll();
- addMarkers(setting.markers);
-
- if (setting.breakOverlay.display) {
- initializeOverlay();
- }
- onTimeUpdate();
- player.on("timeupdate", onTimeUpdate);
- player.off("loadedmetadata");
- }
-
- // setup the plugin after we loaded video's meta data
- player.on("loadedmetadata", function () {
- initialize();
- });
-
- // exposed plugin API
- player.markers = {
- getMarkers: function getMarkers() {
- return markersList;
- },
- next: function next() {
- // go to the next marker from current timestamp
- var currentTime = player.currentTime();
- for (var i = 0; i < markersList.length; i++) {
- var markerTime = setting.markerTip.time(markersList[i]);
- if (markerTime > currentTime) {
- player.currentTime(markerTime);
- break;
- }
- }
- },
- prev: function prev() {
- // go to previous marker
- var currentTime = player.currentTime();
- for (var i = markersList.length - 1; i >= 0; i--) {
- var markerTime = setting.markerTip.time(markersList[i]);
- // add a threshold
- if (markerTime + 0.5 < currentTime) {
- player.currentTime(markerTime);
- return;
- }
- }
- },
- add: function add(newMarkers) {
- // add new markers given an array of index
- addMarkers(newMarkers);
- },
- remove: function remove(indexArray) {
- // remove markers given an array of index
- removeMarkers(indexArray);
- },
- removeAll: function removeAll() {
- var indexArray = [];
- for (var i = 0; i < markersList.length; i++) {
- indexArray.push(i);
- }
- removeMarkers(indexArray);
- },
- // force - force all markers to be updated, regardless of if they have changed or not.
- updateTime: function updateTime(force) {
- // notify the plugin to update the UI for changes in marker times
- updateMarkers(force);
- },
- reset: function reset(newMarkers) {
- // remove all the existing markers and add new ones
- player.markers.removeAll();
- addMarkers(newMarkers);
- },
- destroy: function destroy() {
- // unregister the plugins and clean up even handlers
- player.markers.removeAll();
- breakOverlay && breakOverlay.remove();
- markerTip && markerTip.remove();
- player.off("timeupdate", updateBreakOverlay);
- delete player.markers;
- }
- };
- }
-
- _video2.default.plugin('markers', registerVideoJsMarkersPlugin);
-});
-//# sourceMappingURL=videojs-markers.js.map