diff options
Diffstat (limited to 'assets/js/videojs-markers.js')
| -rw-r--r-- | assets/js/videojs-markers.js | 517 |
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 |