From 00207f9abf553345cef176b7ccfe065798963bc4 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 13:14:44 +0100 Subject: [PATCH 01/12] feat: enabling more player properties --- src/browse/browse.js | 442 +++++++++++++--------- src/design/design.js | 629 +++++++++++++++++-------------- src/info/info.js | 102 +++-- src/logo/logo.css | 23 +- src/logo/logo.js | 113 +++--- src/share-button/share-button.js | 54 ++- src/sharing/sharing.js | 444 +++++++++++++--------- src/subtitles/subtitles.js | 486 +++++++++++++++--------- 8 files changed, 1355 insertions(+), 938 deletions(-) diff --git a/src/browse/browse.js b/src/browse/browse.js index eca875e2..018eab3d 100644 --- a/src/browse/browse.js +++ b/src/browse/browse.js @@ -15,210 +15,284 @@ Answers properties: - showBrowse [get/set] - browseMode [get/set] - - recommendationMethod [get] + - recommendationMethod [get/set] - hasRecommendations [get] - playlistClickMode [get/set] - browse_video_id [set] */ -Player.provide('browse', +Player.provide( + "browse", { showBrowse: false, browseMode: false, - recommendationMethod: 'channel-popular', - playlistClickMode:'inline', - browseThumbnailWidth:400, - browseThumbnailHeight:225 + recommendationMethod: "channel-popular", + playlistClickMode: "inline", + browseThumbnailWidth: 400, + browseThumbnailHeight: 225, }, - function(Player,$,opts){ - var $this = this; - $.extend($this, opts); + function (Player, $, opts) { + var $this = this; + $.extend($this, opts); - // Load recommendations through the API - $this.loadedRecommendations = false; - $this.loadRecommendations = function(overwrite){ - if(typeof(overwrite)=='undefined') overwrite = false; - if(overwrite) $this.loadedRecommendations = false; - if ($this.loadedRecommendations || !Player.get('showBrowse')) return; - if (overwrite){ - var c = Player.get('clips'); - c = []; - } + // Load recommendations through the API + $this.loadedRecommendations = false; + $this.loadRecommendations = function (overwrite) { + if (typeof overwrite == "undefined") overwrite = false; + if (overwrite) $this.loadedRecommendations = false; + if ($this.loadedRecommendations || !Player.get("showBrowse")) return; + if (overwrite) { + var c = Player.get("clips"); + c = []; + } - // If we're looking at a single video, load some recommendations as well - if(Player.get('clips').length<=1) { - var opts = (/-new$/.test(Player.get('recommendationMethod')) ? {orderby:'uploaded', order:'desc'} : {orderby:'rank', order:'desc'}); - if(/^channel-/.test(Player.get('recommendationMethod'))) opts['album_id'] = Player.get('video_album_id'); - $this.loadedRecommendations = true; - Player.get('api').photo.list( - $.extend({size:10, player_id:Player.get('player_id')}, opts), - function(data){ - $.each(data.photos, function(i,photo){ - if(photo.photo_id!=Player.get('video_photo_id')) { - Player.get('clips').push(new PlayerVideo(Player,$,'clip',photo)); - } - }); - Player.fire('player:browse:loaded'); - Player.fire('player:browse:updated'); - }, - Player.fail - ); - } else { - Player.fire('player:browse:loaded'); - Player.fire('player:browse:updated'); - } - }; + // If we're looking at a single video, load some recommendations as well + if (Player.get("clips").length <= 1) { + var opts = /-new$/.test(Player.get("recommendationMethod")) + ? { orderby: "uploaded", order: "desc" } + : { orderby: "rank", order: "desc" }; + if (/^channel-/.test(Player.get("recommendationMethod"))) + opts["album_id"] = Player.get("video_album_id"); + $this.loadedRecommendations = true; + Player.get("api").photo.list( + $.extend({ size: 10, player_id: Player.get("player_id") }, opts), + function (data) { + $.each(data.photos, function (i, photo) { + if (photo.photo_id != Player.get("video_photo_id")) { + Player.get("clips").push( + new PlayerVideo(Player, $, "clip", photo), + ); + } + }); + Player.fire("player:browse:loaded"); + Player.fire("player:browse:updated"); + }, + Player.fail, + ); + } else { + Player.fire("player:browse:loaded"); + Player.fire("player:browse:updated"); + } + }; + // Helper methods for skipping in and looping playlists + $this.getCurrentVideoIndex = function () { + var current_photo_id = Player.get("video_photo_id"); + var currentIndex = -1; + var c = Player.get("clips"); + c.each(function (clip, i) { + if (clip.photo_id == current_photo_id) currentIndex = i; + }); + return currentIndex; + }; + $this.getNextVideo = function () { + var c = Player.get("clips"); + var i = $this.getCurrentVideoIndex() + 1; + if (!c[i]) { + i = 0; + } + return c[i]; + }; + $this.getPreviousVideo = function () { + var c = Player.get("clips"); + var i = $this.getCurrentVideoIndex() - 1; + if (i < 0) i = 0; + return c[i]; + }; + $this.playNextVideo = function () { + Player.set("browse_photo_id", $this.getNextVideo().photo_id); + }; + $this.playPreviousVideo = function () { + Player.set("browse_photo_id", $this.getPreviousVideo().photo_id); + }; - // Helper methods for skipping in and looping playlists - $this.getCurrentVideoIndex = function(){ - var current_photo_id = Player.get('video_photo_id'); - var currentIndex = -1; - var c = Player.get('clips'); - c.each(function(clip,i){ - if(clip.photo_id==current_photo_id) currentIndex = i; - }); - return currentIndex; - }; - $this.getNextVideo = function(){ - var c = Player.get('clips'); - var i = $this.getCurrentVideoIndex() + 1; - if(!c[i]) { - i = 0; - } - return c[i]; - }; - $this.getPreviousVideo = function(){ - var c = Player.get('clips'); - var i = $this.getCurrentVideoIndex() - 1; - if(i<0) i = 0; - return c[i]; - }; - $this.playNextVideo = function(){ - Player.set('browse_photo_id', $this.getNextVideo().photo_id); - }; - $this.playPreviousVideo = function(){ - Player.set('browse_photo_id', $this.getPreviousVideo().photo_id); - }; + // Bind to events + $this.firstLoad = true; + Player.bind("player:video:loaded", function () { + if ($this.firstLoad) { + PlayerUtilities.mergeSettings($this, [ + "showBrowse", + "browseMode", + "recommendationMethod", + "playlistClickMode", + ]); + if ($this.showBrowse) $this.loadRecommendations(); + Player.fire("player:browse:updated"); + $this.firstLoad = false; + } + }); + Player.bind("player:video:playing", function () { + Player.set("browseMode", false); + }); - // Bind to events - $this.firstLoad = true; - Player.bind('player:video:loaded', function(){ - if($this.firstLoad) { - PlayerUtilities.mergeSettings($this, ['showBrowse', 'browseMode', 'recommendationMethod', 'playlistClickMode']); - if($this.showBrowse) $this.loadRecommendations(); - Player.fire('player:browse:updated'); - $this.firstLoad = false; - } - }); - Player.bind('player:video:playing', function(){ - Player.set('browseMode', false); + // Build a specific thumbnail for the browse pane + Player.bind("player:loaded player:browse:loaded", function () { + var c = Player.get("clips"); + $.each(c, function (i) { + c[i].browseThumbnailUrl = + "/" + + c[i].tree_id + + "/" + + c[i].photo_id + + "/" + + c[i].token + + "/" + + $this.browseThumbnailWidth + + "x" + + $this.browseThumbnailHeight + + "cr/thumbnail.jpg"; + }); + var s = Player.get("streams"); + $.each(s, function (i) { + s[i].browseThumbnailUrl = + "/" + + s[i].thumbnail_tree_id + + "/" + + s[i].thumbnail_photo_id + + "/" + + s[i].thumbnail_token + + "/" + + $this.browseThumbnailWidth + + "x" + + $this.browseThumbnailHeight + + "cr/thumbnail.jpg"; }); + Player.fire("player:browse:updated"); + }); - // Build a specific thumbnail for the browse pane - Player.bind('player:loaded player:browse:loaded', function(){ - var c = Player.get('clips'); - $.each(c, function(i){ - c[i].browseThumbnailUrl = '/' + c[i].tree_id + '/' + c[i].photo_id + '/' + c[i].token + '/' + $this.browseThumbnailWidth + 'x' + $this.browseThumbnailHeight + 'cr/thumbnail.jpg'; - }); - var s = Player.get('streams'); - $.each(s, function(i){ - s[i].browseThumbnailUrl = '/' + s[i].thumbnail_tree_id + '/' + s[i].thumbnail_photo_id + '/' + s[i].thumbnail_token + '/' + $this.browseThumbnailWidth + 'x' + $this.browseThumbnailHeight + 'cr/thumbnail.jpg'; - }); - Player.fire('player:browse:updated'); - }); + // Render on browse update + Player.bind("player:browse:updated", function () { + $this.render(function () { + _prevShow = false; + }); + }); - // Render on browse update - Player.bind('player:browse:updated', function(){ - $this.render(function(){ - _prevShow = false; - }); - }); + /* GETTERS */ + Player.getter("showBrowse", function () { + return $this.showBrowse; + }); + Player.getter("browseMode", function () { + return $this.browseMode; + }); + Player.getter("recommendationMethod", function () { + return $this.recommendationMethod; + }); + Player.getter("hasRecommendations", function () { + return Player.get("clips").length + Player.get("streams").length > 1; + }); + Player.getter("nextVideo", function () { + return $this.getNextVideo(); + }); + Player.getter("playlistClickMode", function () { + return $this.playlistClickMode; + }); + Player.getter("browseThumbnailWidth", function () { + return $this.browseThumbnailWidth; + }); + Player.getter("browseThumbnailHeight", function () { + return $this.browseThumbnailHeight; + }); + Player.getter("recommendations", function () { + var objects = Player.get("streams").concat(Player.get("clips")); + var recommendations = []; + for (var i = 0; i < objects.length; i++) { + var o = objects[i]; + if (o.type == "stream" && o.live_id != Player.get("video_live_id")) { + recommendations.push(o); + } + if (o.type == "clip" && o.photo_id != Player.get("video_photo_id")) { + recommendations.push(o); + } + } + recommendations = recommendations.slice(0, 6); + for (var j = 0; recommendations.length < 6; j++) { + recommendations.push({ type: "empty" }); + } + return recommendations; + }); - /* GETTERS */ - Player.getter('showBrowse', function(){return $this.showBrowse;}); - Player.getter('browseMode', function(){return $this.browseMode;}); - Player.getter('recommendationMethod', function(){return $this.recommendationMethod;}); - Player.getter('hasRecommendations', function(){return (Player.get('clips').length+Player.get('streams').length>1);}); - Player.getter('nextVideo', function(){return $this.getNextVideo();}); - Player.getter('playlistClickMode', function(){return $this.playlistClickMode;}); - Player.getter('browseThumbnailWidth', function(){return $this.browseThumbnailWidth;}); - Player.getter('browseThumbnailHeight', function(){return $this.browseThumbnailHeight;}); - Player.getter('recommendations', function(){ - var objects = Player.get("streams").concat(Player.get("clips")); - var recommendations = []; - for(var i = 0; i < objects.length; i++) { - var o = objects[i]; - if(o.type == "stream" && o.live_id != Player.get("video_live_id")){ - recommendations.push(o); - } - if(o.type == "clip" && o.photo_id != Player.get("video_photo_id")){ - recommendations.push(o); - } - } - recommendations = recommendations.slice(0, 6); - for(var j = 0; recommendations.length < 6; j++) { - recommendations.push({type: "empty"}); - } - return recommendations; - }); + /* SETTERS */ + Player.setter("showBrowse", function (sb) { + $this.showBrowse = sb; + $this.loadRecommendations(); + }); - /* SETTERS */ - Player.setter('showBrowse', function(sb){ - $this.showBrowse = sb; - $this.loadRecommendations(); - }); - var _browseTimeouts = []; - var _prevShow = false; - Player.setter('browseMode', function(bm){ - $this.browseMode = bm; - if($this.browseMode){ - $this.browseMode = !Player.fire("player:module:overlayactivated", {name: "browse", prevented: false}).prevented; - } - if($this.browseMode != _prevShow){ - while(_browseTimeouts.length > 0){ - clearTimeout(_browseTimeouts.pop()); - } - Player.set("forcer", {type: "persist", element: "tray", active: $this.browseMode, from: "browse"}); - $this.container.find(".browse-container").show(); - _browseTimeouts.push(setTimeout(function(){ - $this.container.find(".browse-container").toggleClass("browse-container-activated", $this.browseMode); - }, 10)); - _browseTimeouts.push(setTimeout(function(){ - $this.container.find(".browse-container").css({display: ""}); - }, 210)); - _prevShow = $this.browseMode; - } - }); - Player.setter('browse_photo_id', function(id){ - if(Player.get('playlistClickMode')=='link' && Player.get('permission_level')!='none') { - Player.set('open_photo_id', {pi:id, target:"_blank"}); - } else if(Player.get('playlistClickMode')=='top' && Player.get('permission_level')!='none'){ - Player.set('open_photo_id', {pi:id, target:"_top"}); - } else { - Player.set("currentTime", 0); - Player.set('video_photo_id', id); - Player.set('playing', true); - } + /* SETTERS */ + Player.setter("recommendationMethod", function (rm) { + $this.recommendationMethod = rm; + $this.loadRecommendations(); + }); + var _browseTimeouts = []; + var _prevShow = false; + Player.setter("browseMode", function (bm) { + $this.browseMode = bm; + if ($this.browseMode) { + $this.browseMode = !Player.fire("player:module:overlayactivated", { + name: "browse", + prevented: false, + }).prevented; + } + if ($this.browseMode != _prevShow) { + while (_browseTimeouts.length > 0) { + clearTimeout(_browseTimeouts.pop()); + } + Player.set("forcer", { + type: "persist", + element: "tray", + active: $this.browseMode, + from: "browse", }); - Player.setter('browse_live_id', function(id){ - if(Player.get('playlistClickMode')=='link') { - Player.set('open_live_id', {li:id,target:"_blank"}); - } else if(Player.get('playlistClickMode')=='top'){ - Player.set('open_live_id', {li:id,target:"_top"}); - } else { - Player.set('video_live_id', id); - Player.set('playing', true); - } - }); + $this.container.find(".browse-container").show(); + _browseTimeouts.push( + setTimeout(function () { + $this.container + .find(".browse-container") + .toggleClass("browse-container-activated", $this.browseMode); + }, 10), + ); + _browseTimeouts.push( + setTimeout(function () { + $this.container.find(".browse-container").css({ display: "" }); + }, 210), + ); + _prevShow = $this.browseMode; + } + }); + Player.setter("browse_photo_id", function (id) { + if ( + Player.get("playlistClickMode") == "link" && + Player.get("permission_level") != "none" + ) { + Player.set("open_photo_id", { pi: id, target: "_blank" }); + } else if ( + Player.get("playlistClickMode") == "top" && + Player.get("permission_level") != "none" + ) { + Player.set("open_photo_id", { pi: id, target: "_top" }); + } else { + Player.set("currentTime", 0); + Player.set("video_photo_id", id); + Player.set("playing", true); + } + }); + Player.setter("browse_live_id", function (id) { + if (Player.get("playlistClickMode") == "link") { + Player.set("open_live_id", { li: id, target: "_blank" }); + } else if (Player.get("playlistClickMode") == "top") { + Player.set("open_live_id", { li: id, target: "_top" }); + } else { + Player.set("video_live_id", id); + Player.set("playing", true); + } + }); - Player.bind("player:module:overlayactivated", function(e, info){ - if(info.name != "browse"){ - Player.set("browseMode", false); - } - return info; - }); + Player.bind("player:module:overlayactivated", function (e, info) { + if (info.name != "browse") { + Player.set("browseMode", false); + } + return info; + }); - return $this; - } + return $this; + }, ); diff --git a/src/design/design.js b/src/design/design.js index d1973e49..2f42f4fc 100644 --- a/src/design/design.js +++ b/src/design/design.js @@ -2,226 +2,262 @@ DESIGN THEME FOR THE PLAYER */ -Player.provide('design', - { - showTray: true, - alwaysShowTray: false, - verticalPadding:0, - horizontalPadding:0, - trayFont:'Helvetica', - scrubberColor:'#1EC95B', - backgroundColor:'black', - borderRadius:'', - endOn:'share', - start: 0, - theme:'' - }, - function(Player,$,opts){ - var $this = this; - $.extend($this, opts); +Player.provide( + "design", + { + showTray: true, + alwaysShowTray: false, + verticalPadding: 0, + horizontalPadding: 0, + trayFont: "Helvetica", + scrubberColor: "#1EC95B", + backgroundColor: "black", + borderRadius: "", + endOn: "share", + start: 0, + theme: "", + }, + function (Player, $, opts) { + var $this = this; + $.extend($this, opts); - // Insert the bootstrap module into DOM - $('body').append($this.container); + // Insert the bootstrap module into DOM + $("body").append($this.container); - Player.getter("is_dev", function(){ return !!GLUEDEV; }); + Player.getter("is_dev", function () { + return !!GLUEDEV; + }); - // State controller for the playback flow - // 1: Before playback of any video content. Video has been loaded. - // 2: Playback has been initiated, showing prerolls and other actions before playback of content video - // 3: Content video is active - // 4: Content video has ended, showing postrolls and other "after video" actions - // 5: Playflow ended. Show recommendations/sharing loop to next video, show any non-video actions - var _playflowPosition = 0; - var _setPlayflowPosition = function(nextPosition){ - if(nextPosition === _playflowPosition) return; - var transition = { - currentPosition: _playflowPosition, - nextPosition: nextPosition, - blocked: false, - performTransition: (function(next){ - return function(){ - _setPlayflowPosition(next); - }; - })(nextPosition) - }; - transition = Player.fire("player:playflow:beforetransition", transition); - if(!transition.blocked){ - window.setTimeout(function(){ - _playflowPosition = transition.nextPosition; - var playflowClasses = []; - for(var i = 1; i <= 5; i++) { - if(i != _playflowPosition) playflowClasses.push("playflow-position-"+i); - } - $("body").addClass("playflow-position-"+_playflowPosition).removeClass(playflowClasses.join(" ")); - Player.fire("player:playflow:transitioned", { - currentPosition: _playflowPosition - }); - },1); - } - return !transition.blocked; - }; - var _beforePlayHandled = false; - var _resetPlayflowPosition = function(){ - _beforePlayHandled = false; - _setPlayflowPosition(1); - }; + // State controller for the playback flow + // 1: Before playback of any video content. Video has been loaded. + // 2: Playback has been initiated, showing prerolls and other actions before playback of content video + // 3: Content video is active + // 4: Content video has ended, showing postrolls and other "after video" actions + // 5: Playflow ended. Show recommendations/sharing loop to next video, show any non-video actions + var _playflowPosition = 0; + var _setPlayflowPosition = function (nextPosition) { + if (nextPosition === _playflowPosition) return; + var transition = { + currentPosition: _playflowPosition, + nextPosition: nextPosition, + blocked: false, + performTransition: (function (next) { + return function () { + _setPlayflowPosition(next); + }; + })(nextPosition), + }; + transition = Player.fire("player:playflow:beforetransition", transition); + if (!transition.blocked) { + window.setTimeout(function () { + _playflowPosition = transition.nextPosition; + var playflowClasses = []; + for (var i = 1; i <= 5; i++) { + if (i != _playflowPosition) + playflowClasses.push("playflow-position-" + i); + } + $("body") + .addClass("playflow-position-" + _playflowPosition) + .removeClass(playflowClasses.join(" ")); + Player.fire("player:playflow:transitioned", { + currentPosition: _playflowPosition, + }); + }, 1); + } + return !transition.blocked; + }; + var _beforePlayHandled = false; + var _resetPlayflowPosition = function () { + _beforePlayHandled = false; + _setPlayflowPosition(1); + }; - // Listen for events to potentially change playflow position - var _currentObjectId = 0; - Player.bind("player:video:loaded", function(e,v){ - // check if the loaded video object is different from the last. If so, reset - if(!v) return; - var _nextObjectId = (v.type == "clip" ? v.photo_id : v.live_id); - if(_nextObjectId != _currentObjectId){ - _currentObjectId = _nextObjectId; - _resetPlayflowPosition(); - } - }); - Player.bind("player:action:autoplayfailed", function(){ - Player.set('autoPlay', false); - window.setTimeout(function(){ - _currentObjectId = 0; - _resetPlayflowPosition(); - Player.set('reloadVideo', true); - }, 300); - }); - Player.bind("player:video:ready", function(){ - // "player:video:ready is called as a response to "player:video:loaded" - // Here we timeout to allow handling of "player:video:loaded" to finish, before we autoplay - window.setTimeout(function(){ - if( Player.get("autoPlay") ) { - Player.set("playing", true); - } - }, 1); - }); - Player.bind("player:video:beforeplay", function(e, playbackAllowed){ - if(!_beforePlayHandled){ - _beforePlayHandled = true; - playbackAllowed = playbackAllowed && _setPlayflowPosition(2); - return playbackAllowed; - } - }); - Player.bind("player:action:prerollsplayed", function(){ - // Play the content video now from the specified start time - _setPlayflowPosition(3); - Player.set("playing", true); - if(Player.get("video_type") == "clip" && $this.start != 0){ - Player.set("currentTime", $this.start); - } - $this.start = 0; - }); - Player.bind("player:video:play player:video:playing", function(){ - _setPlayflowPosition(3); - }); - Player.bind("player:video:ended", function(){ - _setPlayflowPosition(4); - }); - Player.bind("player:action:postrollsplayed", function(){ - _setPlayflowPosition(5); - }); - Player.bind("player:playflow:transitioned", function(e, transition){ - // Read from settings the action to take when the playflow has been completed - setTimeout(function(){ - if(transition.currentPosition == 5 && Player.get('loop')){ - _setPlayflowPosition(2); - }else if(transition.currentPosition == 5 && !Player.get("actionsShown")){ - if($this.endOn == "browse") { - Player.set("browseMode", true); - }else if($this.endOn == "loop" && Player.get("clips").length > 1){ - Player.set("showLoop", true); - }else if($this.endOn == "share"){ - Player.set("showSharing", true); - } - } - }, 10); - }); - // Getter for retrieving current playflow position - Player.getter('playflowPosition', function(){ - return _playflowPosition; - }); + // Listen for events to potentially change playflow position + var _currentObjectId = 0; + Player.bind("player:video:loaded", function (e, v) { + // check if the loaded video object is different from the last. If so, reset + if (!v) return; + var _nextObjectId = v.type == "clip" ? v.photo_id : v.live_id; + if (_nextObjectId != _currentObjectId) { + _currentObjectId = _nextObjectId; + _resetPlayflowPosition(); + } + }); + Player.bind("player:action:autoplayfailed", function () { + Player.set("autoPlay", false); + window.setTimeout(function () { + _currentObjectId = 0; + _resetPlayflowPosition(); + Player.set("reloadVideo", true); + }, 300); + }); + Player.bind("player:video:ready", function () { + // "player:video:ready is called as a response to "player:video:loaded" + // Here we timeout to allow handling of "player:video:loaded" to finish, before we autoplay + window.setTimeout(function () { + if (Player.get("autoPlay")) { + Player.set("playing", true); + } + }, 1); + }); + Player.bind("player:video:beforeplay", function (e, playbackAllowed) { + if (!_beforePlayHandled) { + _beforePlayHandled = true; + playbackAllowed = playbackAllowed && _setPlayflowPosition(2); + return playbackAllowed; + } + }); + Player.bind("player:action:prerollsplayed", function () { + // Play the content video now from the specified start time + _setPlayflowPosition(3); + Player.set("playing", true); + if (Player.get("video_type") == "clip" && $this.start != 0) { + Player.set("currentTime", $this.start); + } + $this.start = 0; + }); + Player.bind("player:video:play player:video:playing", function () { + _setPlayflowPosition(3); + }); + Player.bind("player:video:ended", function () { + _setPlayflowPosition(4); + }); + Player.bind("player:action:postrollsplayed", function () { + _setPlayflowPosition(5); + }); + Player.bind("player:playflow:transitioned", function (e, transition) { + // Read from settings the action to take when the playflow has been completed + setTimeout(function () { + if (transition.currentPosition == 5 && Player.get("loop")) { + _setPlayflowPosition(2); + } else if ( + transition.currentPosition == 5 && + !Player.get("actionsShown") + ) { + if ($this.endOn == "browse") { + Player.set("browseMode", true); + } else if ($this.endOn == "loop" && Player.get("clips").length > 1) { + Player.set("showLoop", true); + } else if ($this.endOn == "share") { + Player.set("showSharing", true); + } + } + }, 10); + }); + // Getter for retrieving current playflow position + Player.getter("playflowPosition", function () { + return _playflowPosition; + }); - Player.bind('player:data:loaded', function(){ - if ($this.endOn == "browse") { - Player.set('showBrowse', true); - } - }); + Player.bind("player:data:loaded", function () { + if ($this.endOn == "browse") { + Player.set("showBrowse", true); + } + }); + Player.setter("endOn", function (eo) { + $this.endOn = eo; + $this.render(); + }); - // Set .touch-class on body, if we're on iDevice or Android - if(/iPad|iPhone|Android/.test(navigator.userAgent)){ - $("body").addClass("touch"); - } + // Set .touch-class on body, if we're on iDevice or Android + if (/iPad|iPhone|Android/.test(navigator.userAgent)) { + $("body").addClass("touch"); + } - // Set classes on body to indicate video type - Player.bind("player:video:loaded",function(e,v){ - if(typeof v == "undefined") return; - var $body = $("body"); - if(v.type == "clip"){ - $body.removeClass("video-stream stream-dvr"); - $body.addClass("video-clip"); - }else{ - if(Player.get("stream_has_dvr")){ - $body.removeClass("video-clip"); - $body.addClass("video-stream stream-dvr"); - }else{ - $body.removeClass("video-clip stream-dvr"); - $body.addClass("video-stream"); - } - } - }); + // Set classes on body to indicate video type + Player.bind("player:video:loaded", function (e, v) { + if (typeof v == "undefined") return; + var $body = $("body"); + if (v.type == "clip") { + $body.removeClass("video-stream stream-dvr"); + $body.addClass("video-clip"); + } else { + if (Player.get("stream_has_dvr")) { + $body.removeClass("video-clip"); + $body.addClass("video-stream stream-dvr"); + } else { + $body.removeClass("video-clip stream-dvr"); + $body.addClass("video-stream"); + } + } + }); - Player.bind('player:settings', function(e){ - PlayerUtilities.mergeSettings($this, ['theme', 'verticalPadding', 'horizontalPadding', 'trayFont', 'scrubberColor', 'backgroundColor', 'borderRadius', 'showTray', 'endOn', 'start', 'loop', 'alwaysShowTray']); - Player.set("forcer", { - type: "block", - element: "tray", - from: "settings", - active: !$this.showTray - }); - $this.applyDesignPreferences(); - if($this.alwaysShowTray) { - window.setTimeout(function(){ - Player.set('alwaysShowTray', true); - }, 500); - } - }); + Player.bind("player:settings", function (e) { + PlayerUtilities.mergeSettings($this, [ + "theme", + "verticalPadding", + "horizontalPadding", + "trayFont", + "scrubberColor", + "backgroundColor", + "borderRadius", + "showTray", + "endOn", + "start", + "loop", + "alwaysShowTray", + ]); + Player.set("forcer", { + type: "block", + element: "tray", + from: "settings", + active: !$this.showTray, + }); + $this.applyDesignPreferences(); + if ($this.alwaysShowTray) { + window.setTimeout(function () { + Player.set("alwaysShowTray", true); + }, 500); + } + }); - /* === TRAY HANDLING === */ + /* === TRAY HANDLING === */ - /* Showing/hiding the tray */ - var _trayTimeoutId = null; - var _showTray = function(){ - window.clearTimeout(_trayTimeoutId); - $('body').addClass("tray-shown"); - _trayTimeoutId = window.setTimeout(_hideTray, 5000); - }; - var _hideTray = function(){ - if($this.alwaysShowTray) return; - window.clearTimeout(_trayTimeoutId); - $('body').removeClass("tray-shown"); - }; - $(document).mousemove(_showTray); - $(document).mouseleave(_hideTray); + /* Showing/hiding the tray */ + var _trayTimeoutId = null; + var _showTray = function () { + window.clearTimeout(_trayTimeoutId); + $("body").addClass("tray-shown"); + _trayTimeoutId = window.setTimeout(_hideTray, 5000); + }; + var _hideTray = function () { + if ($this.alwaysShowTray) return; + window.clearTimeout(_trayTimeoutId); + $("body").removeClass("tray-shown"); + }; + $(document).mousemove(_showTray); + $(document).mouseleave(_hideTray); - /* Setter + Getter for alwaysShowTray */ - Player.getter('alwaysShowTray', function(){ - return $this.alwaysShowTray; - }); - Player.setter('alwaysShowTray', function(ast){ - $this.alwaysShowTray = ast; - if($this.alwaysShowTray) { - Player.set('infoShown', false); - Player.set("forcer", {type: "block", element: "tray", from: "design", active: false}); - _showTray(); - } else { - _hideTray(); - } - }); - Player.getter('showTray', function(){ - return $this.showTray; - }); + /* Setter + Getter for alwaysShowTray */ + Player.getter("alwaysShowTray", function () { + return $this.alwaysShowTray; + }); + Player.setter("alwaysShowTray", function (ast) { + $this.alwaysShowTray = ast; + if ($this.alwaysShowTray) { + Player.set("infoShown", false); + Player.set("forcer", { + type: "block", + element: "tray", + from: "design", + active: false, + }); + _showTray(); + } else { + _hideTray(); + } + }); + Player.getter("showTray", function () { + return $this.showTray; + }); + Player.setter("showTray", function (st) { + $this.showTray = st; + $this.render(); + Player.fire("player:settings"); + }); - /* + /* Allow modules to set "blocking" and "persisting" forcing classes on body. Usage: Player.set("forcer", { type: "force|block", @@ -230,85 +266,122 @@ Player.provide('design', active: true|false, }); */ - var _forcers = {}; - Player.setter("forcer", function(forcer){ - $.each(forcer.element.split(" "), function(i, element){ - var forcerClass = forcer.type + "-" + element; - if(typeof _forcers[ forcerClass ] == "undefined"){ - _forcers[ forcerClass ] = []; - } - var forcerArray = _forcers[ forcerClass ]; - var index = forcerArray.indexOf( forcer.from ); - if(forcer.active && index == -1){ - forcerArray.push(forcer.from); - }else if(!forcer.active && index > -1){ - forcerArray.splice(index, 1); - } - $("body").toggleClass(forcerClass, forcerArray.length > 0); - }); - }); + var _forcers = {}; + Player.setter("forcer", function (forcer) { + $.each(forcer.element.split(" "), function (i, element) { + var forcerClass = forcer.type + "-" + element; + if (typeof _forcers[forcerClass] == "undefined") { + _forcers[forcerClass] = []; + } + var forcerArray = _forcers[forcerClass]; + var index = forcerArray.indexOf(forcer.from); + if (forcer.active && index == -1) { + forcerArray.push(forcer.from); + } else if (!forcer.active && index > -1) { + forcerArray.splice(index, 1); + } + $("body").toggleClass(forcerClass, forcerArray.length > 0); + }); + }); - Player.getter('accentColor', function(){ - return $this.scrubberColor; - }); + Player.getter("accentColor", function () { + return $this.scrubberColor; + }); + Player.setter("accentColor", function (sc) { + $this.scrubberColor = sc; + $this.render(); + }); - /* === END TRAY HANDLING === */ - $this.hexToRGBA = function(hex, alpha){ - var colorTest = hex.match(/^\#(..)(..)(..)$/); - if(colorTest && colorTest.length==4) { - var r = parseInt(colorTest[1], 16); - var g = parseInt(colorTest[2], 16); - var b = parseInt(colorTest[3], 16); - return 'rgba('+r+','+g+','+b+','+alpha+')'; - } - return false; - }; - function hexToRGB(hex, alpha) { - var r = parseInt(hex.slice(1, 3), 16), - g = parseInt(hex.slice(3, 5), 16), - b = parseInt(hex.slice(5, 7), 16); + /* === END TRAY HANDLING === */ + $this.hexToRGBA = function (hex, alpha) { + var colorTest = hex.match(/^\#(..)(..)(..)$/); + if (colorTest && colorTest.length == 4) { + var r = parseInt(colorTest[1], 16); + var g = parseInt(colorTest[2], 16); + var b = parseInt(colorTest[3], 16); + return "rgba(" + r + "," + g + "," + b + "," + alpha + ")"; + } + return false; + }; + function hexToRGB(hex, alpha) { + var r = parseInt(hex.slice(1, 3), 16), + g = parseInt(hex.slice(3, 5), 16), + b = parseInt(hex.slice(5, 7), 16); - if (alpha) { - return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; - } else { - return "rgb(" + r + ", " + g + ", " + b + ")"; - } - } - $this.applyDesignPreferences = function(){ - $("filter#icon_hover feFlood").attr("flood-color", $this.scrubberColor); + if (alpha) { + return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; + } else { + return "rgb(" + r + ", " + g + ", " + b + ")"; + } + } + $this.applyDesignPreferences = function () { + $("filter#icon_hover feFlood").attr("flood-color", $this.scrubberColor); - if($this.theme) $('body').addClass('theme-'+$this.theme); + if ($this.theme) $("body").addClass("theme-" + $this.theme); - // CSS variables - var rootStyle = document.documentElement.style; - rootStyle.setProperty('--brand-color', $this.scrubberColor); - rootStyle.setProperty('--brand-color-light', $this.hexToRGBA($this.scrubberColor, 0.9)); - rootStyle.setProperty('--brand-color-lighter', $this.hexToRGBA($this.scrubberColor, 0.8)); - rootStyle.setProperty('--brand-color-lightest', $this.hexToRGBA($this.scrubberColor, 0.6)); - rootStyle.setProperty('--tray-font', $this.trayFont + ', sans-serif'); - rootStyle.setProperty('--player-vertical-padding', $this.verticalPadding+'px'); - rootStyle.setProperty('--player-horizontal-padding', $this.horizontalPadding+'px'); - if($this.backgroundColor) { - rootStyle.setProperty('--player-background-color', $this.backgroundColor); - } - if($this.borderRadius) { - rootStyle.setProperty('--player-border-radius', $this.borderRadius + 'px'); - } - } + // CSS variables + var rootStyle = document.documentElement.style; + rootStyle.setProperty("--brand-color", $this.scrubberColor); + rootStyle.setProperty( + "--brand-color-light", + $this.hexToRGBA($this.scrubberColor, 0.9), + ); + rootStyle.setProperty( + "--brand-color-lighter", + $this.hexToRGBA($this.scrubberColor, 0.8), + ); + rootStyle.setProperty( + "--brand-color-lightest", + $this.hexToRGBA($this.scrubberColor, 0.6), + ); + rootStyle.setProperty("--tray-font", $this.trayFont + ", sans-serif"); + rootStyle.setProperty( + "--player-vertical-padding", + $this.verticalPadding + "px", + ); + rootStyle.setProperty( + "--player-horizontal-padding", + $this.horizontalPadding + "px", + ); + if ($this.backgroundColor) { + rootStyle.setProperty( + "--player-background-color", + $this.backgroundColor, + ); + } + if ($this.borderRadius) { + rootStyle.setProperty( + "--player-border-radius", + $this.borderRadius + "px", + ); + } + }; - Player.set("forcer", {type: "block", element: "tray", from: "design", active: true}); - Player.bind("player:playflow:transitioned", function(e, transition){ - if(transition.currentPosition == 3){ - Player.set("forcer", {type: "block", element: "tray", from: "design", active: false}); - } - }); + Player.set("forcer", { + type: "block", + element: "tray", + from: "design", + active: true, + }); + Player.bind("player:playflow:transitioned", function (e, transition) { + if (transition.currentPosition == 3) { + Player.set("forcer", { + type: "block", + element: "tray", + from: "design", + active: false, + }); + } + }); - Player.bind('glue:localechange', function(evt,lang){$('html').attr({lang:lang})}); + Player.bind("glue:localechange", function (evt, lang) { + $("html").attr({ lang: lang }); + }); - $this.render(); + $this.render(); - // Return a reference - return $this; - } + // Return a reference + return $this; + }, ); diff --git a/src/info/info.js b/src/info/info.js index 5e78a32e..16ae9d2c 100644 --- a/src/info/info.js +++ b/src/info/info.js @@ -10,50 +10,80 @@ - player:infoengaged: Info pane was toggles somehow Answers properties: + - showDomain [get/set] - showDescriptions [get/set] - infoTimeout [get] */ -Player.provide('info', +Player.provide( + "info", { - showDescriptions: true, - showDomain: true + showDescriptions: true, + showDomain: true, }, - function(Player,$,opts){ - var $this = this; - $.extend($this, opts); - - $this.onRender = function(){ - Player.set('infoShown', (!!$this.showDescriptions && Player.get("playflowPosition") <= 1)); - }; - - // Bind to events - Player.bind('player:settings', function(e){ - PlayerUtilities.mergeSettings($this, ['showDescriptions', 'showDomain']); - $this.render($this.onRender); - }); - Player.bind('player:video:loaded', function(e,video){ - $this.render($this.onRender); - }); - Player.bind('player:video:play player:video:playing', function(e,video){ - Player.set('infoShown', false); - }); + function (Player, $, opts) { + var $this = this; + $.extend($this, opts); - /* GETTERS */ - Player.getter('infoShown', function(){ - return $this.infoShown; - }); - Player.getter('showDomain', function(){ return $this.showDomain; }); + $this.onRender = function () { + Player.set( + "infoShown", + (!!$this.showDescriptions || !!$this.showDomain) && + Player.get("playflowPosition") <= 1, + ); + }; - /* SETTERS */ - Player.setter('infoShown', function(is){ - $this.infoShown = is; - Player.set("forcer", {type: "block", element: "tray", from: "info", active: $this.infoShown}); - $this.container.find(".info-overlay").css({ display: ($this.infoShown ? 'block' : 'none') }); - }); + // Bind to events + Player.bind("player:settings", function (e) { + PlayerUtilities.mergeSettings($this, ["showDescriptions", "showDomain"]); + $this.render($this.onRender); + }); + Player.bind("player:video:loaded", function (e, video) { + $this.render($this.onRender); + }); + Player.bind("player:video:play player:video:playing", function (e, video) { + Player.set("infoShown", false); + }); + + /* GETTERS */ + Player.getter("infoShown", function () { + return $this.infoShown; + }); + Player.getter("showDomain", function () { + return $this.showDomain; + }); - $this.render(); + Player.getter("showDescriptions", function () { + return $this.showDescriptions; + }); - return $this; - } + /* SETTERS */ + + Player.setter("showDomain", function (sd) { + $this.showDomain = sd; + $this.render($this.onRender); + }); + + Player.setter("showDescriptions", function (sd) { + $this.showDescriptions = sd; + $this.render($this.onRender); + //$this.render(); + }); + + Player.setter("infoShown", function (is) { + $this.infoShown = is; + Player.set("forcer", { + type: "block", + element: "tray", + from: "info", + active: $this.infoShown, + }); + $this.container + .find(".info-overlay") + .css({ display: $this.infoShown ? "block" : "none" }); + }); + + $this.render(); + return $this; + }, ); diff --git a/src/logo/logo.css b/src/logo/logo.css index d30d55c2..bc7f1200 100644 --- a/src/logo/logo.css +++ b/src/logo/logo.css @@ -1,18 +1,21 @@ .logo { - position:absolute; - top:20px; - left:20px; - opacity:.8; + position: absolute; + top: 20px; + left: 20px; + opacity: 0.8; } .logo.align-right { - left: auto; - right: 20px; + left: auto; + right: 20px; } + .logo img { - display: none; - width: auto; - height: auto; + display: absolute; + width: 20px; + height: 20px; + object-fit: "cover"; } + .size-tiny .logo { - display:none !important; + display: none !important; } diff --git a/src/logo/logo.js b/src/logo/logo.js index 30794c6b..339dfa64 100644 --- a/src/logo/logo.js +++ b/src/logo/logo.js @@ -10,61 +10,80 @@ - logoSource [get] */ -Player.provide('logo', +Player.provide( + "logo", { - logoSource:'', - showLogo:true + logoSource: "", + showLogo: true, }, - function(Player,$,opts){ - var $this = this; - $.extend($this, opts); + function (Player, $, opts) { + var $this = this; + $.extend($this, opts); - var _onImageLoaded = function(){ - var img = $this.logo.get(0); - var ratio = img.naturalWidth / img.naturalHeight; - var style = {"display": "block"}; - if(ratio > 1.2){ - style["max-width"] = "80px"; - }else if(ratio < 0.8){ - style["max-height"] = "80px"; - }else{ - style["max-width"] = "60px"; - } - $this.logo.css(style); - }; + var _onImageLoaded = function () { + var img = $this.logo.get(0); + var ratio = img.naturalWidth / img.naturalHeight; + var style = { display: "block" }; + if (ratio > 1.2) { + style["max-width"] = "80px"; + } else if (ratio < 0.8) { + style["max-height"] = "80px"; + } else { + style["max-width"] = "60px"; + } + $this.logo.css(style); + }; - var _onRender = function(){ - $this.logo = $this.container.find("img"); - if($this.logo.size() > 0){ - if($this.logo.get(0).complete){ - _onImageLoaded(); - }else{ - $this.logo.load(_onImageLoaded); - } - } - }; + var _onRender = function () { + $this.logo = $this.container.find("img"); + if ($this.logo.size() > 0) { + if ($this.logo.get(0).complete) { + _onImageLoaded(); + } else { + $this.logo.load(_onImageLoaded); + } + } + }; - // Bind to events - Player.bind('player:settings', function(e,settings){ - // Load in settings from API if they haven't been overwritten by liquid "with ..." - PlayerUtilities.mergeSettings($this, ['logoSource', 'showLogo', 'logoPosition', 'logoAlpha', 'logoWidth', 'logoHeight']); - if(!$this.logoSource.length) $this.showLogo = false; - if($this.logoSource.length>0 && !/\/\//.test($this.logoSource)) $this.logoSource = Player.get('url')+$this.logoSource; - $this.render(_onRender); - }); + // Bind to events + Player.bind("player:settings", function (e, settings) { + // Load in settings from API if they haven't been overwritten by liquid "with ..." + PlayerUtilities.mergeSettings($this, [ + "logoSource", + "showLogo", + "logoPosition", + "logoAlpha", + "logoWidth", + "logoHeight", + ]); + if (!$this.logoSource.length) $this.showLogo = false; + if ($this.logoSource.length > 0 && !/\/\//.test($this.logoSource)) + $this.logoSource = Player.get("url") + $this.logoSource; + $this.render(_onRender); + }); - Player.bind('player:video:loaded', function() { - $this.render(_onRender); - }); + Player.bind("player:video:loaded", function () { + $this.render(_onRender); + }); - /* GETTERS */ - Player.getter('showLogo', function(){return $this.showLogo||false;}); - Player.getter('logoSource', function(){return $this.logoSource||'';}); + /* GETTERS */ + Player.getter("showLogo", function () { + return $this.showLogo || false; + }); + Player.getter("logoSource", function () { + return $this.logoSource || ""; + }); - return $this; - } + /* SETTERS */ + Player.setter("logoSource", function (ls) { + $this.logoSource = ls; + $this.render(); + }); + + return $this; + }, ); -Player.translate("logo-link",{ - en: "You are on a link press enter to open the company website", +Player.translate("logo-link", { + en: "You are on a link press enter to open the company website", }); diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index ae70ee54..e0e457c7 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -6,28 +6,60 @@ - player:sharing */ -Player.provide('share-button', - {}, - function(Player,$,opts){ +Player.provide( + "share-button", + { + socialSharing: false, + showSharing: false, + showDownload: false, + }, + function (Player, $, opts) { var $this = this; $.extend($this, opts); $this.render($this.toggleShareButton); - $this.toggleShareButton = function(){ - window.setTimeout(function(){ - $this.container.toggle(!!Player.get("socialSharing") && !(Player.get('unmuteButtonPosition')=='topRight' && Player.get('showMutedAutoPlayButton'))); + $this.toggleShareButton = function () { + window.setTimeout(function () { + $this.container.toggle( + !!Player.get("socialSharing") && + !( + Player.get("unmuteButtonPosition") == "topRight" && + Player.get("showMutedAutoPlayButton") + ), + ); }, 10); }; - Player.bind('player:settings player:video:loaded player:subtitlechange', $this.toggleShareButton); + Player.bind( + "player:settings player:video:loaded player:subtitlechange", + $this.toggleShareButton, + ); - return $this; - } + Player.getter("socialSharing", function () { + return ( + typeof $this.socialSharing != "undefined" && + $this.socialSharing && + $this.socialSharing != "0" && + Player.get("video_sharable") + ); + }); + Player.getter("showDownload", function () { + return $this.showDownload && Player.get("video_type") == "clip"; + }); + + Player.setter("socialSharing", function (ss) { + $this.socialSharing = ss; + $this.container + .find(".share-button") + .css({ display: $this.socialSharing ? "block" : "none" }); + }); + return $this; + }, ); /* Translations for this module */ -Player.translate("share_video",{ - en: "Share video" +Player.translate("share_video", { + en: "Share video", }); diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index a18ef584..61a32e52 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -15,6 +15,7 @@ Answers properties: - socialSharing [get]: Is social sharing even supported by the video site? And is is enabled in settings? - showSharing [get/set]: Show and hide the share pane. + - showDownload [get/set] - rssLink [get] - podcastLink [get] - embedCode [get] @@ -29,209 +30,284 @@ - mailLink [get] */ -Player.provide('sharing', +Player.provide( + "sharing", { socialSharing: false, showSharing: false, - showDownload: false + showDownload: false, }, - function(Player,$,opts){ - var $this = this; - $.extend($this, opts); - - var _shareCurrentTime = false; - - var _onRender = function(){ - $this.sharingLink = $this.container.find(".sharing-link"); - $this.currentTimeSelect = $this.container.find(".current-time-select"); - $this.checkbox = $this.container.find(".checkbox"); - $this.currentTimeSelect.click(_currentTimeClick); - var _show = $this.showSharing; - Player.set('showSharing', false); - Player.set('showSharing', _show); - }; - var _currentTimeClick = function(){ - $this.checkbox.toggleClass("checked"); - _shareCurrentTime = $this.checkbox.hasClass("checked"); - if(_shareCurrentTime){ - Player.set("playing", false); - var url = Player.get("videoLink") + "/" + formatTime(parseInt(Player.get("currentTime"))); - $this.sharingLink.text(url); - $this.sharingLink.attr("href", url); - }else{ - $this.sharingLink.text( Player.get("videoLink") ); - } - }; - - // Helper function - var absolutize = function(u){ - if(!/\/\//.test(u)) u = Player.get('mainUrl')+u; - return u; - }; - - // Bind to events - Player.bind('player:settings', function(e,settings){ - PlayerUtilities.mergeSettings($this, ['socialSharing', 'showSharing', 'rssLink', 'podcastLink', 'embedCode', 'showDownload']); - $this.rssLink = absolutize($this.rssLink||Player.get('url') + '/rss'); - $this.podcastLink = absolutize($this.podcastLink||Player.get('url') + '/podcast'); - $this.embedCode = $this.embedCode||''; - $this.render(_onRender); - Player.fire('player:sharing', {}); - }); - $this.videoLink = ''; - Player.bind('player:video:loaded', function(){ - $this.videoLink = absolutize(Player.get('video_one')); - $this.render(_onRender); - }); - - /* GETTERS */ - Player.getter('socialSharing', function(){ - return (typeof($this.socialSharing)!='undefined'&&$this.socialSharing&&$this.socialSharing!='0') && Player.get('video_sharable'); - }); - Player.getter('showSharing', function(){ - if(!Player.get('socialSharing')) return(false); - return (typeof($this.showSharing)=='undefined'||($this.showSharing&&$this.showSharing!='0')); - }); - Player.getter('rssLink', function(){ - if(!Player.get('socialSharing')) return(''); - return $this.rssLink; - }); - Player.getter('podcastLink', function(){ - if(!Player.get('socialSharing')) return(''); - return $this.podcastLink; - }); - Player.getter('embedCode', function(){ - if(!Player.get('socialSharing')) return(''); - return $this.embedCode; - }); - Player.getter('videoLink', function(){ - if(!Player.get('socialSharing')) return(''); - return $this.videoLink; - }); - Player.getter('siteLink', function(){ - return Player.get('mainUrl'); - }); - Player.getter('showDownload', function(){ - return ($this.showDownload && Player.get("video_type") == "clip"); - }); - Player.getter('downloadUrl', function(){ - var v = Player.get("video"); - if (typeof(v.video_1080p_download)!='undefined' && v.video_1080p_download.length>0 && v.video_1080p_size>0) { - return Player.get('url') + '/attachment' + v.video_1080p_download; - } else if (typeof(v.video_hd_download)!='undefined' && v.video_hd_download.length>0) { - return Player.get('url') + '/attachment' + v.video_hd_download; - } else if (typeof(v.video_medium_download)!='undefined' && v.video_medium_download.length>0) { - return Player.get('url') + '/attachment' + v.video_medium_download; - } - return ""; - }); - - var socialLink = function(service){ - if(!Player.get('socialSharing')) return(''); - if(_shareCurrentTime){ - return Player.get('videoLink') + '/' + formatTime(Player.get("currentTime")) + '/' + service; - } - return Player.get('videoLink') + '/' + service; - }; - Player.getter('facebookLink', function(){return socialLink('facebook');}); - Player.getter('twitterLink', function(){return socialLink('twitter');}); - Player.getter('tumblrLink', function(){return socialLink('tumblr');}); - Player.getter('googleLink', function(){return socialLink('google');}); - Player.getter('linkedinLink', function(){return socialLink('linkedin');}); - Player.getter('diggLink', function(){return socialLink('digg');}); - Player.getter('mailLink', function(){return socialLink('mail');}); - - /* SETTERS */ - var _sharingTimeouts = []; - var _prevShow = false; - Player.setter('showSharing', function(ss){ - $this.showSharing = ss && Player.get("socialSharing"); - if($this.showSharing){ - $this.showSharing = !Player.fire("player:module:overlayactivated", {name: "sharing", prevented: false}).prevented; - } - if($this.showSharing != _prevShow){ - while(_sharingTimeouts.length > 0){ - clearTimeout(_sharingTimeouts.pop()); - } - - $("body").toggleClass("overlay-shown", true); - - if(_shareCurrentTime){ - _currentTimeClick(); - } - - // Block a few other modules - Player.set("forcer", {type: "block", element: "tray big-play info", from: "sharing", active: $this.showSharing}); - - // Animate the container in/out - $this.container.find(".sharing-container").show(); - _sharingTimeouts.push(setTimeout(function(){ - $this.container.find(".sharing-container").toggleClass("sharing-container-active", $this.showSharing); - }, 10)); - _sharingTimeouts.push(setTimeout(function(){ - $this.container.find(".sharing-container").css({display: ""}); - $("body").toggleClass("overlay-shown", $this.showSharing); - }, 210)); - _prevShow = $this.showSharing; - } - }); - Player.setter('shareTo', function(service){ - Player.fire('player:sharing:shareengaged', service); - if(service=='site') { - Player.set('playing', false); - window.open(Player.get('siteLink')+Player.get('video_one')); - } else { - window.open(Player.get(service + 'Link')); - } - }); - - Player.bind("player:module:overlayactivated", function(e, info){ - if(info.name != "sharing"){ - Player.set("showSharing", false); - } - return info; - }); + function (Player, $, opts) { + var $this = this; + $.extend($this, opts); + + var _shareCurrentTime = false; + + var _onRender = function () { + $this.sharingLink = $this.container.find(".sharing-link"); + $this.currentTimeSelect = $this.container.find(".current-time-select"); + $this.checkbox = $this.container.find(".checkbox"); + $this.currentTimeSelect.click(_currentTimeClick); + var _show = $this.showSharing; + Player.set("showSharing", false); + Player.set("showSharing", _show); + }; + var _currentTimeClick = function () { + $this.checkbox.toggleClass("checked"); + _shareCurrentTime = $this.checkbox.hasClass("checked"); + if (_shareCurrentTime) { + Player.set("playing", false); + var url = + Player.get("videoLink") + + "/" + + formatTime(parseInt(Player.get("currentTime"))); + $this.sharingLink.text(url); + $this.sharingLink.attr("href", url); + } else { + $this.sharingLink.text(Player.get("videoLink")); + } + }; + // Helper function + var absolutize = function (u) { + if (!/\/\//.test(u)) u = Player.get("mainUrl") + u; + return u; + }; + + // Bind to events + Player.bind("player:settings", function (e, settings) { + PlayerUtilities.mergeSettings($this, [ + "socialSharing", + "showSharing", + "rssLink", + "podcastLink", + "embedCode", + "showDownload", + ]); + $this.rssLink = absolutize($this.rssLink || Player.get("url") + "/rss"); + $this.podcastLink = absolutize( + $this.podcastLink || Player.get("url") + "/podcast", + ); + $this.embedCode = $this.embedCode || ""; + $this.render(_onRender); + Player.fire("player:sharing", {}); + }); + $this.videoLink = ""; + Player.bind("player:video:loaded", function () { + $this.videoLink = absolutize(Player.get("video_one")); $this.render(_onRender); + }); + + /* GETTERS */ + Player.getter("socialSharing", function () { + return ( + typeof $this.socialSharing != "undefined" && + $this.socialSharing && + $this.socialSharing != "0" && + Player.get("video_sharable") + ); + }); + Player.getter("showSharing", function () { + if (!Player.get("socialSharing")) return false; + return ( + typeof $this.showSharing == "undefined" || + ($this.showSharing && $this.showSharing != "0") + ); + }); + Player.getter("rssLink", function () { + if (!Player.get("socialSharing")) return ""; + return $this.rssLink; + }); + Player.getter("podcastLink", function () { + if (!Player.get("socialSharing")) return ""; + return $this.podcastLink; + }); + Player.getter("embedCode", function () { + if (!Player.get("socialSharing")) return ""; + return $this.embedCode; + }); + Player.getter("videoLink", function () { + if (!Player.get("socialSharing")) return ""; + return $this.videoLink; + }); + Player.getter("siteLink", function () { + return Player.get("mainUrl"); + }); + Player.getter("showDownload", function () { + return $this.showDownload && Player.get("video_type") == "clip"; + }); + Player.getter("downloadUrl", function () { + var v = Player.get("video"); + if ( + typeof v.video_1080p_download != "undefined" && + v.video_1080p_download.length > 0 && + v.video_1080p_size > 0 + ) { + return Player.get("url") + "/attachment" + v.video_1080p_download; + } else if ( + typeof v.video_hd_download != "undefined" && + v.video_hd_download.length > 0 + ) { + return Player.get("url") + "/attachment" + v.video_hd_download; + } else if ( + typeof v.video_medium_download != "undefined" && + v.video_medium_download.length > 0 + ) { + return Player.get("url") + "/attachment" + v.video_medium_download; + } + return ""; + }); - return $this; - } + var socialLink = function (service) { + if (!Player.get("socialSharing")) return ""; + if (_shareCurrentTime) { + return ( + Player.get("videoLink") + + "/" + + formatTime(Player.get("currentTime")) + + "/" + + service + ); + } + return Player.get("videoLink") + "/" + service; + }; + Player.getter("facebookLink", function () { + return socialLink("facebook"); + }); + Player.getter("twitterLink", function () { + return socialLink("twitter"); + }); + Player.getter("tumblrLink", function () { + return socialLink("tumblr"); + }); + Player.getter("googleLink", function () { + return socialLink("google"); + }); + Player.getter("linkedinLink", function () { + return socialLink("linkedin"); + }); + Player.getter("diggLink", function () { + return socialLink("digg"); + }); + Player.getter("mailLink", function () { + return socialLink("mail"); + }); + + /* SETTERS */ + var _sharingTimeouts = []; + var _prevShow = false; + Player.setter("showSharing", function (ss) { + $this.showSharing = ss && Player.get("socialSharing"); + if ($this.showSharing) { + $this.showSharing = !Player.fire("player:module:overlayactivated", { + name: "sharing", + prevented: false, + }).prevented; + } + if ($this.showSharing != _prevShow) { + while (_sharingTimeouts.length > 0) { + clearTimeout(_sharingTimeouts.pop()); + } + + $("body").toggleClass("overlay-shown", true); + + if (_shareCurrentTime) { + _currentTimeClick(); + } + + // Block a few other modules + Player.set("forcer", { + type: "block", + element: "tray big-play info", + from: "sharing", + active: $this.showSharing, + }); + + // Animate the container in/out + $this.container.find(".sharing-container").show(); + _sharingTimeouts.push( + setTimeout(function () { + $this.container + .find(".sharing-container") + .toggleClass("sharing-container-active", $this.showSharing); + }, 10), + ); + _sharingTimeouts.push( + setTimeout(function () { + $this.container.find(".sharing-container").css({ display: "" }); + $("body").toggleClass("overlay-shown", $this.showSharing); + }, 210), + ); + _prevShow = $this.showSharing; + } + }); + Player.setter("shareTo", function (service) { + Player.fire("player:sharing:shareengaged", service); + if (service == "site") { + Player.set("playing", false); + window.open(Player.get("siteLink") + Player.get("video_one")); + } else { + window.open(Player.get(service + "Link")); + } + }); + + Player.setter("showDownload", function (sd) { + $this.showDownload = sd; + Player.fire("player:module:overlayactivated", { + name: "download", + prevented: true, + }).prevented; + $this.render(); + }); + + Player.bind("player:module:overlayactivated", function (e, info) { + if (info.name != "sharing") { + Player.set("showSharing", false); + } + + return info; + }); + + $this.render(_onRender); + + return $this; + }, ); /* Translations for this module */ -Player.translate("embed",{ - en: "Embed" +Player.translate("embed", { + en: "Embed", }); -Player.translate("copy_embed",{ - en: "Copy embed code for video" +Player.translate("copy_embed", { + en: "Copy embed code for video", }); -Player.translate("see_on_site",{ - en: "See on site" +Player.translate("see_on_site", { + en: "See on site", }); -Player.translate("share_on_facebook",{ - en: "Share on Facebook" +Player.translate("share_on_facebook", { + en: "Share on Facebook", }); -Player.translate("tweet_this_video",{ - en: "Tweet this video" +Player.translate("tweet_this_video", { + en: "Tweet this video", }); -Player.translate("plus_one_google",{ - en: "+1 on Google" +Player.translate("plus_one_google", { + en: "+1 on Google", }); -Player.translate("mail_video",{ - en: "Mail video" +Player.translate("mail_video", { + en: "Mail video", }); -Player.translate("share",{ - en: "Share" +Player.translate("share", { + en: "Share", }); -Player.translate("share_from_current_time",{ - en: "Share from current time" +Player.translate("share_from_current_time", { + en: "Share from current time", }); -Player.translate("share_on_linkedin",{ - en: "Share on LinkedIn" +Player.translate("share_on_linkedin", { + en: "Share on LinkedIn", }); -Player.translate("more_sharing_options",{ - en: "More sharing options" +Player.translate("more_sharing_options", { + en: "More sharing options", }); -Player.translate("download_video",{ - en: "Download video" +Player.translate("download_video", { + en: "Download video", }); diff --git a/src/subtitles/subtitles.js b/src/subtitles/subtitles.js index 17e7751d..c131ca9b 100644 --- a/src/subtitles/subtitles.js +++ b/src/subtitles/subtitles.js @@ -28,14 +28,15 @@ - audioDescriptionLocaleMessages [get] */ -Player.provide('subtitles', +Player.provide( + "subtitles", { enableSubtitles: true, subtitlesOnByDefault: false, includeDraftSubtitles: false, - defaultLocale: '', - defaultAudioDescripionLocale: '', - subtitlesDesign: 'bars' + defaultLocale: "", + defaultAudioDescripionLocale: "", + subtitlesDesign: "bars", }, function (Player, $, opts) { var $this = this; @@ -43,139 +44,181 @@ Player.provide('subtitles', var forceReloadSubtitles = false; // Properties - $this.subtitleStreamType = 'video'; + $this.subtitleStreamType = "video"; var _reset = function () { $this.locales = {}; - $this.subtitleLocale = ''; + $this.subtitleLocale = ""; $this.subtitles = []; - $this.subtitleText = ''; + $this.subtitleText = ""; $this.hasSubtitles = false; // Make audio descriptions available through the same load procedures - $this.supportsAudioDescriptions = window.speechSynthesis && true;; + $this.supportsAudioDescriptions = window.speechSynthesis && true; $this.hasAudioDescriptions = false; $this.audioDescriptionTracks = {}; - $this.audioDescriptionLocale = ''; + $this.audioDescriptionLocale = ""; $this.audioDescriptionLocaleMessages = []; - Player.set('subtitles', ''); - Player.fire('player:subtitlechange'); + Player.set("subtitles", ""); + Player.fire("player:subtitlechange"); }; /* GETTERS */ - Player.getter('enableSubtitles', function () { return $this.enableSubtitles; }); - Player.getter('hasSubtitles', function () { return $this.hasSubtitles; }); - Player.getter('subtitleText', function () { return $this.subtitleText; }); - Player.getter('subtitles', function () { return $this.subtitles; }); - Player.getter('locales', function () { return $this.locales; }); - Player.getter('localesArray', function () { + Player.getter("enableSubtitles", function () { + return $this.enableSubtitles; + }); + Player.getter("hasSubtitles", function () { + return $this.hasSubtitles; + }); + Player.getter("subtitleText", function () { + return $this.subtitleText; + }); + Player.getter("subtitles", function () { + return $this.subtitles; + }); + Player.getter("locales", function () { + return $this.locales; + }); + Player.getter("localesArray", function () { var ret = []; $.each($this.locales, function (i, o) { ret.push(o); }); return ret; }); - Player.getter('subtitleLocale', function () { return $this.subtitleLocale; }); - Player.getter('subtitleDirection', function () { + Player.getter("subtitleLocale", function () { + return $this.subtitleLocale; + }); + Player.getter("subtitleDirection", function () { try { - return Player.get('locales')[Player.get('subtitleLocale')].direction || 'ltr'; + return ( + Player.get("locales")[Player.get("subtitleLocale")].direction || "ltr" + ); } catch (e) { - return 'ltr'; + return "ltr"; } }); - Player.getter('supportsAudioDescriptions', function () { return $this.supportsAudioDescriptions; }); - Player.getter('hasAudioDescriptions', function () { return $this.supportsAudioDescriptions && $this.hasAudioDescriptions; }); - Player.getter('audioDescriptionTracks', function () { return $this.audioDescriptionTracks; }); - Player.getter('audioDescriptionTracksArray', function () { + Player.getter("supportsAudioDescriptions", function () { + return $this.supportsAudioDescriptions; + }); + Player.getter("hasAudioDescriptions", function () { + return $this.supportsAudioDescriptions && $this.hasAudioDescriptions; + }); + Player.getter("audioDescriptionTracks", function () { + return $this.audioDescriptionTracks; + }); + Player.getter("audioDescriptionTracksArray", function () { var ret = []; $.each($this.audioDescriptionTracks, function (i, o) { ret.push(o); }); return ret; }); - Player.getter('audioDescriptionLocale', function () { return $this.audioDescriptionLocale; }); - Player.getter('audioDescriptionLocaleMessages', function () { return $this.audioDescriptionLocaleMessages; }); + Player.getter("audioDescriptionLocale", function () { + return $this.audioDescriptionLocale; + }); + Player.getter("audioDescriptionLocaleMessages", function () { + return $this.audioDescriptionLocaleMessages; + }); /* SETTERS */ - Player.setter('enableSubtitles', function (es) { + Player.setter("enableSubtitles", function (es) { $this.enableSubtitles = es; $this.render(); - Player.fire('player:subtitlechange'); + Player.fire("player:subtitlechange"); + }); + Player.setter("subtitlesDesign", function (sd) { + $this.subtitlesDesign = sd; + $this.container.removeClass("design-bars").removeClass("design-outline"); + $this.container.addClass("design-" + $this.subtitlesDesign || "bars"); + $this.render(); + Player.fire("player:subtitlechange"); }); - Player.setter('locales', function (l) { + Player.setter("locales", function (l) { $this.locales = l; $this.hasSubtitles = Object.keys($this.locales).length > 0; - Player.fire('player:subtitlechange'); + Player.fire("player:subtitlechange"); }); - Player.setter('audioDescriptionTracks', function (adt) { + Player.setter("audioDescriptionTracks", function (adt) { $this.audioDescriptionTracks = adt; - $this.hasAudioDescriptions = Object.keys($this.audioDescriptionTracks).length > 0; + $this.hasAudioDescriptions = + Object.keys($this.audioDescriptionTracks).length > 0; Player.fire("player:audiodescriptionchanged"); }); - Player.setter('subtitleLocale', function (sl) { + Player.setter("subtitleLocale", function (sl) { if ($this.locales[sl]) { - Player.set('subtitles', ''); - if($this.subtitleStreamType=='video') { - loadVideoTrackFromApi(sl, 'general', function (subtitles) { - Player.set('subtitles', subtitles); + Player.set("subtitles", ""); + if ($this.subtitleStreamType == "video") { + loadVideoTrackFromApi(sl, "general", function (subtitles) { + Player.set("subtitles", subtitles); }); } $this.subtitleLocale = sl; - $this.enableSubtitles = !Player.get('showNativeVideoControls'); + $this.enableSubtitles = !Player.get("showNativeVideoControls"); Player.fire("player:subtitlesactivated"); } else { - $this.subtitleLocale = ''; + $this.subtitleLocale = ""; $this.subtitles = []; $this.render(); } - Player.fire('player:subtitlechange'); + Player.fire("player:subtitlechange"); }); - Player.setter('subtitleText', function (st) { - if (typeof (st) != 'object') st = (st == '' ? [] : [st]); + Player.setter("subtitleText", function (st) { + if (typeof st != "object") st = st == "" ? [] : [st]; if ($this.subtitleText != st) { $this.subtitleText = st; $this.render(); } }); - Player.setter('subtitles', function (s) { + Player.setter("subtitles", function (s) { $this.subtitles = s; - Player.fire('player:subtitlechange'); + Player.fire("player:subtitlechange"); $this.possiblyRender(); }); - Player.setter('audioDescriptionLocale', function (adl) { + Player.setter("audioDescriptionLocale", function (adl) { if (!$this.supportsAudioDescriptions) { - $this.audioDescriptionLocale = ''; + $this.audioDescriptionLocale = ""; return; } - if (!$this.audioDescriptionTracks[adl]) adl = ''; + if (!$this.audioDescriptionTracks[adl]) adl = ""; $this.audioDescriptionLocale = adl; Player.fire("player:audiodescriptionchanged"); // Load messages $this.audioDescriptionLocaleMessages = []; - if ($this.audioDescriptionLocale != '') { - loadVideoTrackFromApi($this.audioDescriptionLocale, 'audiodescriptions', function (data) { - var messages = []; - for (var i = 0; i < data.length; i++) { - var text = data[i].text.join('\n'); - var utterance = new SpeechSynthesisUtterance(text); - utterance.lang = $this.audioDescriptionLocale.replace(/_/, '-'); - utterance.pitch = 1.0; - utterance.rate = 1.2; - messages.push({ start: data[i].timestamp_begin, end: data[i].timestamp_end, queued: false, utterance: utterance, text: text }); - } - $this.audioDescriptionLocaleMessages = messages; - Player.fire("player:audiodescriptionsupdated"); - }); + if ($this.audioDescriptionLocale != "") { + loadVideoTrackFromApi( + $this.audioDescriptionLocale, + "audiodescriptions", + function (data) { + var messages = []; + for (var i = 0; i < data.length; i++) { + var text = data[i].text.join("\n"); + var utterance = new SpeechSynthesisUtterance(text); + utterance.lang = $this.audioDescriptionLocale.replace(/_/, "-"); + utterance.pitch = 1.0; + utterance.rate = 1.2; + messages.push({ + start: data[i].timestamp_begin, + end: data[i].timestamp_end, + queued: false, + utterance: utterance, + text: text, + }); + } + $this.audioDescriptionLocaleMessages = messages; + Player.fire("player:audiodescriptionsupdated"); + }, + ); } }); if (window.speechSynthesis && true) { var speech = window.speechSynthesis; var queueSpeech = function () { - if (!Player.get('playing')) return; - var ct = Player.get('currentTime'); + if (!Player.get("playing")) return; + var ct = Player.get("currentTime"); var messages = $this.audioDescriptionLocaleMessages; for (var i = 0; i < messages.length; i++) { if (messages[i].queued) continue; @@ -193,79 +236,96 @@ Player.provide('subtitles', for (var i = 0; i < messages.length; i++) messages[i].queued = false; }; - - Player.bind('player:audiodescriptionsupdated player:audiodescriptionchanged player:video:seeked', cancelSpeechQueue); - Player.bind('player:video:timeupdate', queueSpeech); - Player.bind('player:video:pause', function () { + Player.bind( + "player:audiodescriptionsupdated player:audiodescriptionchanged player:video:seeked", + cancelSpeechQueue, + ); + Player.bind("player:video:timeupdate", queueSpeech); + Player.bind("player:video:pause", function () { speech.pause(); }); - Player.bind('player:video:play', function () { + Player.bind("player:video:play", function () { speech.resume(); }); } // Listen to events - Player.bind('player:subtitlechange', function () { - $this.container.css({ direction: Player.get('subtitleDirection') }); + Player.bind("player:subtitlechange", function () { + $this.container.css({ direction: Player.get("subtitleDirection") }); }); // Subtitle rendering // Listens to events and rerenders accordingly - Player.bind('player:settings', function (e, s) { - PlayerUtilities.mergeSettings($this, ['enableSubtitles', 'subtitlesOnByDefault', 'subtitlesDesign', 'includeDraftSubtitles', 'defaultLocale', 'defaultAudioDescripionLocale']); - $this.container.removeClass('design-bars').removeClass('design-outline'); - $this.container.addClass('design-' + $this.subtitlesDesign || 'bars'); - Player.fire('player:subtitlechange'); - }); - Player.bind('player:video:play play:video:playing player:video:pause player:video:progress player:video:timeupdate player:video:seeked', function (e, o) { - $this.possiblyRender(); + Player.bind("player:settings", function (e, s) { + PlayerUtilities.mergeSettings($this, [ + "enableSubtitles", + "subtitlesOnByDefault", + "subtitlesDesign", + "includeDraftSubtitles", + "defaultLocale", + "defaultAudioDescripionLocale", + ]); + $this.container.removeClass("design-bars").removeClass("design-outline"); + $this.container.addClass("design-" + $this.subtitlesDesign || "bars"); + Player.fire("player:subtitlechange"); }); - Player.bind('player:video:ended', function (e, o) { - Player.set('subtitleText', ''); + Player.bind( + "player:video:play play:video:playing player:video:pause player:video:progress player:video:timeupdate player:video:seeked", + function (e, o) { + $this.possiblyRender(); + }, + ); + Player.bind("player:video:ended", function (e, o) { + Player.set("subtitleText", ""); }); $this.possiblyRender = function () { - var time = 0 - if($this.subtitleStreamType=='video') { - time = Player.get('currentTime'); + var time = 0; + if ($this.subtitleStreamType == "video") { + time = Player.get("currentTime"); } else { - var ve = Player.get('videoElement') - if(ve) { + var ve = Player.get("videoElement"); + if (ve) { if (ve.hls && ve.hls.playingDate) { - time = (Player.get('videoElement').hls.playingDate)*1.0 + time = Player.get("videoElement").hls.playingDate * 1.0; } else if (ve.getProgramDate) { - time = ve.getProgramDate() + time = ve.getProgramDate(); } } } if (time > 0 && $this.subtitles.length > 0) { - var text = ''; + var text = ""; $.each($this.subtitles, function (i, s) { if (time >= s.timestamp_begin && time < s.timestamp_end) { text = s.text; } }); - Player.set('subtitleText', text); + Player.set("subtitleText", text); } else { - Player.set('subtitleText', ''); + Player.set("subtitleText", ""); } }; $this.possiblyInsertSubtitleTracks = function () { if (/iPhone|iPad/.test(navigator.userAgent)) { var ve = Player.get("videoElement"); var v; - if (typeof (ve) != "undefined") { + if (typeof ve != "undefined") { v = $(ve.video[0]); } else { return; } v.find("track").remove(); - if($this.subtitleStreamType=='video') { + if ($this.subtitleStreamType == "video") { $.each($this.locales, function (i, o) { var track = $(""); track.attr("kind", "subtitles"); track.attr("src", o.href.replace(/\.srt|\.websrt/, ".vtt")); - track.attr("srclang", o.locale.replace(/_/, '-')); - track.attr("label", (/^([^\(]+)\(/.test(o.language) ? o.language.match(/^([^\(]+)\(/)[1] : o.language)); + track.attr("srclang", o.locale.replace(/_/, "-")); + track.attr( + "label", + /^([^\(]+)\(/.test(o.language) + ? o.language.match(/^([^\(]+)\(/)[1] + : o.language, + ); track.prop("mode", "disabled"); v.append(track); }); @@ -281,64 +341,83 @@ Player.provide('subtitles', }); $this.fullscreenListenersBound = false; $this.bindFullscreenListeners = function (v) { - if (/iPad|iPhone/.test(navigator.userAgent) && !$this.fullscreenListenersBound) { + if ( + /iPad|iPhone/.test(navigator.userAgent) && + !$this.fullscreenListenersBound + ) { var ve = v.get(0); // Possibly show track elements when we enter fullscreen - ve.addEventListener('webkitbeginfullscreen', function () { - for (var i = 0; i < ve.textTracks.length; i += 1) { - if ( - ve.textTracks[i].language.substr(0, 2) == Player.get("subtitleLocale").substr(0, 2) - || - ve.textTracks[i].language == Player.get("subtitleLocale").replace(/_/, '-') - ) { - ve.textTracks[i].mode = "showing"; - } else { - ve.textTracks[i].mode = "disabled"; + ve.addEventListener( + "webkitbeginfullscreen", + function () { + for (var i = 0; i < ve.textTracks.length; i += 1) { + if ( + ve.textTracks[i].language.substr(0, 2) == + Player.get("subtitleLocale").substr(0, 2) || + ve.textTracks[i].language == + Player.get("subtitleLocale").replace(/_/, "-") + ) { + ve.textTracks[i].mode = "showing"; + } else { + ve.textTracks[i].mode = "disabled"; + } } - } - }, false); + }, + false, + ); // Disable native track elements when we leave fullscreen // and mirror showing/disabled subtitles in the subtitles module - ve.addEventListener('webkitendfullscreen', function () { - var _showingSubtitlesFound = false; - for (var i = 0; i < ve.textTracks.length; i += 1) { - if (ve.textTracks[i].mode == "showing") { - $.each($this.locales, function (a, o) { - if (ve.textTracks[i].language == o.locale.substr(0, 2)) { - Player.set("subtitleLocale", o.locale); - _showingSubtitlesFound = true; - } - }); + ve.addEventListener( + "webkitendfullscreen", + function () { + var _showingSubtitlesFound = false; + for (var i = 0; i < ve.textTracks.length; i += 1) { + if (ve.textTracks[i].mode == "showing") { + $.each($this.locales, function (a, o) { + if (ve.textTracks[i].language == o.locale.substr(0, 2)) { + Player.set("subtitleLocale", o.locale); + _showingSubtitlesFound = true; + } + }); + } + ve.textTracks[i].mode = "disabled"; } - ve.textTracks[i].mode = "disabled"; - } - if (!_showingSubtitlesFound) { - Player.set("subtitleLocale", ""); - } - }, false); + if (!_showingSubtitlesFound) { + Player.set("subtitleLocale", ""); + } + }, + false, + ); } $this.fullscreenListenersBound = true; }; // Load some list of available video subtitles from /api/photo/subtitle/list var loadVideoSubtitlesFromApi = function () { - var v = Player.get('video'); - var includeDraftSubtitles = ($this.includeDraftSubtitles ? 1 : 0) + var v = Player.get("video"); + var includeDraftSubtitles = $this.includeDraftSubtitles ? 1 : 0; if (includeDraftSubtitles) forceReloadSubtitles = true; - if ((typeof (v.subtitles_p) != 'undefined' && v.subtitles_p) || includeDraftSubtitles) { - var query = { photo_id: Player.get('video_photo_id'), token: Player.get('video_token'), include_drafts_p: includeDraftSubtitles }; + if ( + (typeof v.subtitles_p != "undefined" && v.subtitles_p) || + includeDraftSubtitles + ) { + var query = { + photo_id: Player.get("video_photo_id"), + token: Player.get("video_token"), + include_drafts_p: includeDraftSubtitles, + }; if (forceReloadSubtitles) { - query['cache_bust'] = Math.random() + query["cache_bust"] = Math.random(); } - Player.get('api').photo.subtitle.list( + Player.get("api").photo.subtitle.list( query, function (data) { // Load a list of languages to support - var locales = {} - var audioDescriptionTracks = {} + var locales = {}; + var audioDescriptionTracks = {}; $.each(data.subtitles, function (i, o) { - if (o.type != 'audiodescriptions') { - if (o.default_p && !o.draft_p && $this.defaultLocale == '') { + if (o.type != "audiodescriptions") { + if (o.default_p && !o.draft_p && $this.defaultLocale == "") { $this.defaultLocale = o.locale; } locales[o.locale] = o; @@ -346,128 +425,159 @@ Player.provide('subtitles', audioDescriptionTracks[o.locale] = o; } }); - Player.set('locales', locales); - Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); - Player.set('audioDescriptionTracks', audioDescriptionTracks); - Player.set('audioDescriptionLocale', $this.defaultAudioDescripionLocale); + Player.set("locales", locales); + Player.set( + "subtitleLocale", + !!$this.defaultLocale && !!$this.subtitlesOnByDefault + ? $this.defaultLocale + : "", + ); + Player.set("audioDescriptionTracks", audioDescriptionTracks); + Player.set( + "audioDescriptionLocale", + $this.defaultAudioDescripionLocale, + ); $this.pendingSubtitleTracks = true; - Player.fire('player:subtitlechange'); + Player.fire("player:subtitlechange"); Player.fire("player:audiodescriptionchanged"); }, - Player.fail + Player.fail, ); } - } + }; var localVideoTrackCache = {}; var loadVideoTrackFromApi = function (locale, type, callback) { - var key = [Player.get('video_photo_id'), locale, type].join(':'); + var key = [Player.get("video_photo_id"), locale, type].join(":"); if (localVideoTrackCache[key]) { callback(localVideoTrackCache[key], locale, type); } else { - var query = { photo_id: Player.get('video_photo_id'), token: Player.get('video_token'), locale: locale, type: type, subtitle_format: 'json' } + var query = { + photo_id: Player.get("video_photo_id"), + token: Player.get("video_token"), + locale: locale, + type: type, + subtitle_format: "json", + }; if (forceReloadSubtitles) { - query['cache_bust'] = Math.random() + query["cache_bust"] = Math.random(); } - Player.get('api').photo.subtitle.data( + Player.get("api").photo.subtitle.data( query, function (data) { var s = $.parseJSON(data.data.json); localVideoTrackCache[key] = s.subtitles; callback(s.subtitles, locale, type); }, - Player.fail + Player.fail, ); } - } + }; // Load locales for live var loadLiveSubtitlesFromApi = function () { - var v = Player.get('video'); + var v = Player.get("video"); // Empty by default - Player.set('locales', {}); - Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); - Player.set('audioDescriptionTracks', {}); - Player.set('audioDescriptionLocale', $this.defaultAudioDescripionLocale); + Player.set("locales", {}); + Player.set( + "subtitleLocale", + !!$this.defaultLocale && !!$this.subtitlesOnByDefault + ? $this.defaultLocale + : "", + ); + Player.set("audioDescriptionTracks", {}); + Player.set("audioDescriptionLocale", $this.defaultAudioDescripionLocale); // Load locales - Player.get('api').live.transcription.locales( - {live_id:v.live_id, token:v.token}, + Player.get("api").live.transcription.locales( + { live_id: v.live_id, token: v.token }, function (data) { - var locales = {} + var locales = {}; $.each(data.livelocales, function (i, o) { if (o.default_p) { $this.defaultLocale = o.locale; } - o.type = 'live'; + o.type = "live"; locales[o.locale] = o; }); - Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); - Player.set('locales', locales); + Player.set( + "subtitleLocale", + !!$this.defaultLocale && !!$this.subtitlesOnByDefault + ? $this.defaultLocale + : "", + ); + Player.set("locales", locales); //$this.pendingSubtitleTracks = true; }, - Player.fail + Player.fail, ); - } + }; var liveSubtitleRefreshInterval = null; - Player.bind('player:subtitlechange', function(){ - if($this.subtitleStreamType!='live' || Player.get('subtitleLocale').length==0) { - if(liveSubtitleRefreshInterval) { - window.clearInterval(liveSubtitleRefreshInterval) + Player.bind("player:subtitlechange", function () { + if ( + $this.subtitleStreamType != "live" || + Player.get("subtitleLocale").length == 0 + ) { + if (liveSubtitleRefreshInterval) { + window.clearInterval(liveSubtitleRefreshInterval); liveSubtitleRefreshInterval = null; } } else { - if(!liveSubtitleRefreshInterval) { - v = Player.get('video') - liveSubtitleRefreshInterval = window.setInterval(function(){ - var subtitles = [] - Player.get('api').live.transcription.list( - {live_id:v.live_id, token:v.token, recent_p:1, locale:Player.get('subtitleLocale')}, - function(data){ - $.each(data.livetranscriptions, function(i,t) { + if (!liveSubtitleRefreshInterval) { + v = Player.get("video"); + liveSubtitleRefreshInterval = window.setInterval(function () { + var subtitles = []; + Player.get("api").live.transcription.list( + { + live_id: v.live_id, + token: v.token, + recent_p: 1, + locale: Player.get("subtitleLocale"), + }, + function (data) { + $.each(data.livetranscriptions, function (i, t) { subtitles.push({ - text:[t.text], - timestamp_begin:parseFloat(t.start_time)*1000, - timestamp_end:parseFloat(t.end_time)*1000 + text: [t.text], + timestamp_begin: parseFloat(t.start_time) * 1000, + timestamp_end: parseFloat(t.end_time) * 1000, }); }); $this.subtitles = subtitles; }, - Player.fail - ) - }, 1000) + Player.fail, + ); + }, 1000); } } }); - var resetAndLoadSubtitles = function(){ + var resetAndLoadSubtitles = function () { _reset(); - if($this.subtitleStreamType=='live'){ + if ($this.subtitleStreamType == "live") { loadLiveSubtitlesFromApi(false); } else { loadVideoSubtitlesFromApi(false); } - } - Player.bind('player:video:loaded', function (e,v) { - $this.subtitleStreamType = (v.type=='stream' ? 'live' : 'video'); + }; + Player.bind("player:video:loaded", function (e, v) { + $this.subtitleStreamType = v.type == "stream" ? "live" : "video"; resetAndLoadSubtitles(); }); - Player.setter('reloadSubtitles', function () { + Player.setter("reloadSubtitles", function () { forceReloadSubtitles = true; // clear cache localVideoTrackCache = {}; - var locale = Player.get('subtitleLocale'); + var locale = Player.get("subtitleLocale"); if (locale) { $this.defaultLocale = locale; } - if ($this.audioDescriptionLocale != '') { + if ($this.audioDescriptionLocale != "") { $this.defaultAudioDescripionLocale = $this.audioDescriptionLocale; } resetAndLoadSubtitles(); }); - // Bootstrap and load _reset(); return $this; - } + }, ); From b8d93da345365ee636d2d01c7759f83c5dafa854 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 13:22:38 +0100 Subject: [PATCH 02/12] feat: enabling more player properties --- src/info/info.liquid | 3 ++- src/sharing/sharing.js | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/info/info.liquid b/src/info/info.liquid index d9a8a379..65ee0c27 100644 --- a/src/info/info.liquid +++ b/src/info/info.liquid @@ -1,6 +1,6 @@
- {% if video_title != empty%}

{{video_title|truncatewords:15}}

{% endif %} + {% if video_title != empty and showDescriptions %}

{{video_title|truncatewords:15}}

{% endif %} {% if showDomain and source != "site" %} {% if video.published_p != 0 && video.published_p != "0" %} {{domain|escape}} @@ -10,3 +10,4 @@ {% endif %}
+ diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index 61a32e52..9bd0e5b3 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -13,8 +13,7 @@ - player:sharing:embedengaged: Fires when embed is engaged (used by analytics) Answers properties: - - socialSharing [get]: Is social sharing even supported by the video site? And is is enabled in settings? - - showSharing [get/set]: Show and hide the share pane. + - socialSharing [get/set] - showDownload [get/set] - rssLink [get] - podcastLink [get] From 6f03938db38bb131a22fec30aaeb1c0967479165 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 13:25:44 +0100 Subject: [PATCH 03/12] chore: cleanup --- src/info/info.js | 1 - src/subtitles/subtitles.js | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/info/info.js b/src/info/info.js index 16ae9d2c..52f028be 100644 --- a/src/info/info.js +++ b/src/info/info.js @@ -67,7 +67,6 @@ Player.provide( Player.setter("showDescriptions", function (sd) { $this.showDescriptions = sd; $this.render($this.onRender); - //$this.render(); }); Player.setter("infoShown", function (is) { diff --git a/src/subtitles/subtitles.js b/src/subtitles/subtitles.js index c131ca9b..bb8ef893 100644 --- a/src/subtitles/subtitles.js +++ b/src/subtitles/subtitles.js @@ -17,6 +17,7 @@ - hasSubtitles [get] - subtitleText [get/set] - subtitles [get/set] + - subtitlesDesign [get/set] - locales [get/set] - localesArray [get] - subtitleLocale [get/set] @@ -73,6 +74,9 @@ Player.provide( Player.getter("subtitleText", function () { return $this.subtitleText; }); + Player.getter("subtitlesDesign", function () { + return $this.subtitlesDesign; + }); Player.getter("subtitles", function () { return $this.subtitles; }); From b51212840d8d512a3795aa4c316d0e033970b89d Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 14:13:37 +0100 Subject: [PATCH 04/12] Revert "feat: enabling more player properties" This reverts commit 00207f9abf553345cef176b7ccfe065798963bc4. --- src/browse/browse.js | 442 +++++++++------------- src/design/design.js | 629 ++++++++++++++----------------- src/info/info.js | 96 ++--- src/logo/logo.css | 23 +- src/logo/logo.js | 113 +++--- src/share-button/share-button.js | 54 +-- src/sharing/sharing.js | 443 +++++++++------------- src/subtitles/subtitles.js | 489 +++++++++--------------- 8 files changed, 936 insertions(+), 1353 deletions(-) diff --git a/src/browse/browse.js b/src/browse/browse.js index 018eab3d..eca875e2 100644 --- a/src/browse/browse.js +++ b/src/browse/browse.js @@ -15,284 +15,210 @@ Answers properties: - showBrowse [get/set] - browseMode [get/set] - - recommendationMethod [get/set] + - recommendationMethod [get] - hasRecommendations [get] - playlistClickMode [get/set] - browse_video_id [set] */ -Player.provide( - "browse", +Player.provide('browse', { showBrowse: false, browseMode: false, - recommendationMethod: "channel-popular", - playlistClickMode: "inline", - browseThumbnailWidth: 400, - browseThumbnailHeight: 225, + recommendationMethod: 'channel-popular', + playlistClickMode:'inline', + browseThumbnailWidth:400, + browseThumbnailHeight:225 }, - function (Player, $, opts) { - var $this = this; - $.extend($this, opts); + function(Player,$,opts){ + var $this = this; + $.extend($this, opts); - // Load recommendations through the API - $this.loadedRecommendations = false; - $this.loadRecommendations = function (overwrite) { - if (typeof overwrite == "undefined") overwrite = false; - if (overwrite) $this.loadedRecommendations = false; - if ($this.loadedRecommendations || !Player.get("showBrowse")) return; - if (overwrite) { - var c = Player.get("clips"); - c = []; - } + // Load recommendations through the API + $this.loadedRecommendations = false; + $this.loadRecommendations = function(overwrite){ + if(typeof(overwrite)=='undefined') overwrite = false; + if(overwrite) $this.loadedRecommendations = false; + if ($this.loadedRecommendations || !Player.get('showBrowse')) return; + if (overwrite){ + var c = Player.get('clips'); + c = []; + } - // If we're looking at a single video, load some recommendations as well - if (Player.get("clips").length <= 1) { - var opts = /-new$/.test(Player.get("recommendationMethod")) - ? { orderby: "uploaded", order: "desc" } - : { orderby: "rank", order: "desc" }; - if (/^channel-/.test(Player.get("recommendationMethod"))) - opts["album_id"] = Player.get("video_album_id"); - $this.loadedRecommendations = true; - Player.get("api").photo.list( - $.extend({ size: 10, player_id: Player.get("player_id") }, opts), - function (data) { - $.each(data.photos, function (i, photo) { - if (photo.photo_id != Player.get("video_photo_id")) { - Player.get("clips").push( - new PlayerVideo(Player, $, "clip", photo), - ); - } - }); - Player.fire("player:browse:loaded"); - Player.fire("player:browse:updated"); - }, - Player.fail, - ); - } else { - Player.fire("player:browse:loaded"); - Player.fire("player:browse:updated"); - } - }; + // If we're looking at a single video, load some recommendations as well + if(Player.get('clips').length<=1) { + var opts = (/-new$/.test(Player.get('recommendationMethod')) ? {orderby:'uploaded', order:'desc'} : {orderby:'rank', order:'desc'}); + if(/^channel-/.test(Player.get('recommendationMethod'))) opts['album_id'] = Player.get('video_album_id'); + $this.loadedRecommendations = true; + Player.get('api').photo.list( + $.extend({size:10, player_id:Player.get('player_id')}, opts), + function(data){ + $.each(data.photos, function(i,photo){ + if(photo.photo_id!=Player.get('video_photo_id')) { + Player.get('clips').push(new PlayerVideo(Player,$,'clip',photo)); + } + }); + Player.fire('player:browse:loaded'); + Player.fire('player:browse:updated'); + }, + Player.fail + ); + } else { + Player.fire('player:browse:loaded'); + Player.fire('player:browse:updated'); + } + }; - // Helper methods for skipping in and looping playlists - $this.getCurrentVideoIndex = function () { - var current_photo_id = Player.get("video_photo_id"); - var currentIndex = -1; - var c = Player.get("clips"); - c.each(function (clip, i) { - if (clip.photo_id == current_photo_id) currentIndex = i; - }); - return currentIndex; - }; - $this.getNextVideo = function () { - var c = Player.get("clips"); - var i = $this.getCurrentVideoIndex() + 1; - if (!c[i]) { - i = 0; - } - return c[i]; - }; - $this.getPreviousVideo = function () { - var c = Player.get("clips"); - var i = $this.getCurrentVideoIndex() - 1; - if (i < 0) i = 0; - return c[i]; - }; - $this.playNextVideo = function () { - Player.set("browse_photo_id", $this.getNextVideo().photo_id); - }; - $this.playPreviousVideo = function () { - Player.set("browse_photo_id", $this.getPreviousVideo().photo_id); - }; - // Bind to events - $this.firstLoad = true; - Player.bind("player:video:loaded", function () { - if ($this.firstLoad) { - PlayerUtilities.mergeSettings($this, [ - "showBrowse", - "browseMode", - "recommendationMethod", - "playlistClickMode", - ]); - if ($this.showBrowse) $this.loadRecommendations(); - Player.fire("player:browse:updated"); - $this.firstLoad = false; - } - }); - Player.bind("player:video:playing", function () { - Player.set("browseMode", false); - }); + // Helper methods for skipping in and looping playlists + $this.getCurrentVideoIndex = function(){ + var current_photo_id = Player.get('video_photo_id'); + var currentIndex = -1; + var c = Player.get('clips'); + c.each(function(clip,i){ + if(clip.photo_id==current_photo_id) currentIndex = i; + }); + return currentIndex; + }; + $this.getNextVideo = function(){ + var c = Player.get('clips'); + var i = $this.getCurrentVideoIndex() + 1; + if(!c[i]) { + i = 0; + } + return c[i]; + }; + $this.getPreviousVideo = function(){ + var c = Player.get('clips'); + var i = $this.getCurrentVideoIndex() - 1; + if(i<0) i = 0; + return c[i]; + }; + $this.playNextVideo = function(){ + Player.set('browse_photo_id', $this.getNextVideo().photo_id); + }; + $this.playPreviousVideo = function(){ + Player.set('browse_photo_id', $this.getPreviousVideo().photo_id); + }; - // Build a specific thumbnail for the browse pane - Player.bind("player:loaded player:browse:loaded", function () { - var c = Player.get("clips"); - $.each(c, function (i) { - c[i].browseThumbnailUrl = - "/" + - c[i].tree_id + - "/" + - c[i].photo_id + - "/" + - c[i].token + - "/" + - $this.browseThumbnailWidth + - "x" + - $this.browseThumbnailHeight + - "cr/thumbnail.jpg"; - }); - var s = Player.get("streams"); - $.each(s, function (i) { - s[i].browseThumbnailUrl = - "/" + - s[i].thumbnail_tree_id + - "/" + - s[i].thumbnail_photo_id + - "/" + - s[i].thumbnail_token + - "/" + - $this.browseThumbnailWidth + - "x" + - $this.browseThumbnailHeight + - "cr/thumbnail.jpg"; + // Bind to events + $this.firstLoad = true; + Player.bind('player:video:loaded', function(){ + if($this.firstLoad) { + PlayerUtilities.mergeSettings($this, ['showBrowse', 'browseMode', 'recommendationMethod', 'playlistClickMode']); + if($this.showBrowse) $this.loadRecommendations(); + Player.fire('player:browse:updated'); + $this.firstLoad = false; + } + }); + Player.bind('player:video:playing', function(){ + Player.set('browseMode', false); }); - Player.fire("player:browse:updated"); - }); - // Render on browse update - Player.bind("player:browse:updated", function () { - $this.render(function () { - _prevShow = false; - }); - }); + // Build a specific thumbnail for the browse pane + Player.bind('player:loaded player:browse:loaded', function(){ + var c = Player.get('clips'); + $.each(c, function(i){ + c[i].browseThumbnailUrl = '/' + c[i].tree_id + '/' + c[i].photo_id + '/' + c[i].token + '/' + $this.browseThumbnailWidth + 'x' + $this.browseThumbnailHeight + 'cr/thumbnail.jpg'; + }); + var s = Player.get('streams'); + $.each(s, function(i){ + s[i].browseThumbnailUrl = '/' + s[i].thumbnail_tree_id + '/' + s[i].thumbnail_photo_id + '/' + s[i].thumbnail_token + '/' + $this.browseThumbnailWidth + 'x' + $this.browseThumbnailHeight + 'cr/thumbnail.jpg'; + }); + Player.fire('player:browse:updated'); + }); - /* GETTERS */ - Player.getter("showBrowse", function () { - return $this.showBrowse; - }); - Player.getter("browseMode", function () { - return $this.browseMode; - }); - Player.getter("recommendationMethod", function () { - return $this.recommendationMethod; - }); - Player.getter("hasRecommendations", function () { - return Player.get("clips").length + Player.get("streams").length > 1; - }); - Player.getter("nextVideo", function () { - return $this.getNextVideo(); - }); - Player.getter("playlistClickMode", function () { - return $this.playlistClickMode; - }); - Player.getter("browseThumbnailWidth", function () { - return $this.browseThumbnailWidth; - }); - Player.getter("browseThumbnailHeight", function () { - return $this.browseThumbnailHeight; - }); - Player.getter("recommendations", function () { - var objects = Player.get("streams").concat(Player.get("clips")); - var recommendations = []; - for (var i = 0; i < objects.length; i++) { - var o = objects[i]; - if (o.type == "stream" && o.live_id != Player.get("video_live_id")) { - recommendations.push(o); - } - if (o.type == "clip" && o.photo_id != Player.get("video_photo_id")) { - recommendations.push(o); - } - } - recommendations = recommendations.slice(0, 6); - for (var j = 0; recommendations.length < 6; j++) { - recommendations.push({ type: "empty" }); - } - return recommendations; - }); + // Render on browse update + Player.bind('player:browse:updated', function(){ + $this.render(function(){ + _prevShow = false; + }); + }); - /* SETTERS */ - Player.setter("showBrowse", function (sb) { - $this.showBrowse = sb; - $this.loadRecommendations(); - }); + /* GETTERS */ + Player.getter('showBrowse', function(){return $this.showBrowse;}); + Player.getter('browseMode', function(){return $this.browseMode;}); + Player.getter('recommendationMethod', function(){return $this.recommendationMethod;}); + Player.getter('hasRecommendations', function(){return (Player.get('clips').length+Player.get('streams').length>1);}); + Player.getter('nextVideo', function(){return $this.getNextVideo();}); + Player.getter('playlistClickMode', function(){return $this.playlistClickMode;}); + Player.getter('browseThumbnailWidth', function(){return $this.browseThumbnailWidth;}); + Player.getter('browseThumbnailHeight', function(){return $this.browseThumbnailHeight;}); + Player.getter('recommendations', function(){ + var objects = Player.get("streams").concat(Player.get("clips")); + var recommendations = []; + for(var i = 0; i < objects.length; i++) { + var o = objects[i]; + if(o.type == "stream" && o.live_id != Player.get("video_live_id")){ + recommendations.push(o); + } + if(o.type == "clip" && o.photo_id != Player.get("video_photo_id")){ + recommendations.push(o); + } + } + recommendations = recommendations.slice(0, 6); + for(var j = 0; recommendations.length < 6; j++) { + recommendations.push({type: "empty"}); + } + return recommendations; + }); - /* SETTERS */ - Player.setter("recommendationMethod", function (rm) { - $this.recommendationMethod = rm; - $this.loadRecommendations(); - }); - var _browseTimeouts = []; - var _prevShow = false; - Player.setter("browseMode", function (bm) { - $this.browseMode = bm; - if ($this.browseMode) { - $this.browseMode = !Player.fire("player:module:overlayactivated", { - name: "browse", - prevented: false, - }).prevented; - } - if ($this.browseMode != _prevShow) { - while (_browseTimeouts.length > 0) { - clearTimeout(_browseTimeouts.pop()); - } - Player.set("forcer", { - type: "persist", - element: "tray", - active: $this.browseMode, - from: "browse", + /* SETTERS */ + Player.setter('showBrowse', function(sb){ + $this.showBrowse = sb; + $this.loadRecommendations(); + }); + var _browseTimeouts = []; + var _prevShow = false; + Player.setter('browseMode', function(bm){ + $this.browseMode = bm; + if($this.browseMode){ + $this.browseMode = !Player.fire("player:module:overlayactivated", {name: "browse", prevented: false}).prevented; + } + if($this.browseMode != _prevShow){ + while(_browseTimeouts.length > 0){ + clearTimeout(_browseTimeouts.pop()); + } + Player.set("forcer", {type: "persist", element: "tray", active: $this.browseMode, from: "browse"}); + $this.container.find(".browse-container").show(); + _browseTimeouts.push(setTimeout(function(){ + $this.container.find(".browse-container").toggleClass("browse-container-activated", $this.browseMode); + }, 10)); + _browseTimeouts.push(setTimeout(function(){ + $this.container.find(".browse-container").css({display: ""}); + }, 210)); + _prevShow = $this.browseMode; + } + }); + Player.setter('browse_photo_id', function(id){ + if(Player.get('playlistClickMode')=='link' && Player.get('permission_level')!='none') { + Player.set('open_photo_id', {pi:id, target:"_blank"}); + } else if(Player.get('playlistClickMode')=='top' && Player.get('permission_level')!='none'){ + Player.set('open_photo_id', {pi:id, target:"_top"}); + } else { + Player.set("currentTime", 0); + Player.set('video_photo_id', id); + Player.set('playing', true); + } }); - $this.container.find(".browse-container").show(); - _browseTimeouts.push( - setTimeout(function () { - $this.container - .find(".browse-container") - .toggleClass("browse-container-activated", $this.browseMode); - }, 10), - ); - _browseTimeouts.push( - setTimeout(function () { - $this.container.find(".browse-container").css({ display: "" }); - }, 210), - ); - _prevShow = $this.browseMode; - } - }); - Player.setter("browse_photo_id", function (id) { - if ( - Player.get("playlistClickMode") == "link" && - Player.get("permission_level") != "none" - ) { - Player.set("open_photo_id", { pi: id, target: "_blank" }); - } else if ( - Player.get("playlistClickMode") == "top" && - Player.get("permission_level") != "none" - ) { - Player.set("open_photo_id", { pi: id, target: "_top" }); - } else { - Player.set("currentTime", 0); - Player.set("video_photo_id", id); - Player.set("playing", true); - } - }); - Player.setter("browse_live_id", function (id) { - if (Player.get("playlistClickMode") == "link") { - Player.set("open_live_id", { li: id, target: "_blank" }); - } else if (Player.get("playlistClickMode") == "top") { - Player.set("open_live_id", { li: id, target: "_top" }); - } else { - Player.set("video_live_id", id); - Player.set("playing", true); - } - }); + Player.setter('browse_live_id', function(id){ + if(Player.get('playlistClickMode')=='link') { + Player.set('open_live_id', {li:id,target:"_blank"}); + } else if(Player.get('playlistClickMode')=='top'){ + Player.set('open_live_id', {li:id,target:"_top"}); + } else { + Player.set('video_live_id', id); + Player.set('playing', true); + } + }); - Player.bind("player:module:overlayactivated", function (e, info) { - if (info.name != "browse") { - Player.set("browseMode", false); - } - return info; - }); + Player.bind("player:module:overlayactivated", function(e, info){ + if(info.name != "browse"){ + Player.set("browseMode", false); + } + return info; + }); - return $this; - }, + return $this; + } ); diff --git a/src/design/design.js b/src/design/design.js index 2f42f4fc..d1973e49 100644 --- a/src/design/design.js +++ b/src/design/design.js @@ -2,262 +2,226 @@ DESIGN THEME FOR THE PLAYER */ -Player.provide( - "design", - { - showTray: true, - alwaysShowTray: false, - verticalPadding: 0, - horizontalPadding: 0, - trayFont: "Helvetica", - scrubberColor: "#1EC95B", - backgroundColor: "black", - borderRadius: "", - endOn: "share", - start: 0, - theme: "", - }, - function (Player, $, opts) { - var $this = this; - $.extend($this, opts); +Player.provide('design', + { + showTray: true, + alwaysShowTray: false, + verticalPadding:0, + horizontalPadding:0, + trayFont:'Helvetica', + scrubberColor:'#1EC95B', + backgroundColor:'black', + borderRadius:'', + endOn:'share', + start: 0, + theme:'' + }, + function(Player,$,opts){ + var $this = this; + $.extend($this, opts); - // Insert the bootstrap module into DOM - $("body").append($this.container); + // Insert the bootstrap module into DOM + $('body').append($this.container); - Player.getter("is_dev", function () { - return !!GLUEDEV; - }); + Player.getter("is_dev", function(){ return !!GLUEDEV; }); - // State controller for the playback flow - // 1: Before playback of any video content. Video has been loaded. - // 2: Playback has been initiated, showing prerolls and other actions before playback of content video - // 3: Content video is active - // 4: Content video has ended, showing postrolls and other "after video" actions - // 5: Playflow ended. Show recommendations/sharing loop to next video, show any non-video actions - var _playflowPosition = 0; - var _setPlayflowPosition = function (nextPosition) { - if (nextPosition === _playflowPosition) return; - var transition = { - currentPosition: _playflowPosition, - nextPosition: nextPosition, - blocked: false, - performTransition: (function (next) { - return function () { - _setPlayflowPosition(next); - }; - })(nextPosition), - }; - transition = Player.fire("player:playflow:beforetransition", transition); - if (!transition.blocked) { - window.setTimeout(function () { - _playflowPosition = transition.nextPosition; - var playflowClasses = []; - for (var i = 1; i <= 5; i++) { - if (i != _playflowPosition) - playflowClasses.push("playflow-position-" + i); - } - $("body") - .addClass("playflow-position-" + _playflowPosition) - .removeClass(playflowClasses.join(" ")); - Player.fire("player:playflow:transitioned", { - currentPosition: _playflowPosition, - }); - }, 1); - } - return !transition.blocked; - }; - var _beforePlayHandled = false; - var _resetPlayflowPosition = function () { - _beforePlayHandled = false; - _setPlayflowPosition(1); - }; + // State controller for the playback flow + // 1: Before playback of any video content. Video has been loaded. + // 2: Playback has been initiated, showing prerolls and other actions before playback of content video + // 3: Content video is active + // 4: Content video has ended, showing postrolls and other "after video" actions + // 5: Playflow ended. Show recommendations/sharing loop to next video, show any non-video actions + var _playflowPosition = 0; + var _setPlayflowPosition = function(nextPosition){ + if(nextPosition === _playflowPosition) return; + var transition = { + currentPosition: _playflowPosition, + nextPosition: nextPosition, + blocked: false, + performTransition: (function(next){ + return function(){ + _setPlayflowPosition(next); + }; + })(nextPosition) + }; + transition = Player.fire("player:playflow:beforetransition", transition); + if(!transition.blocked){ + window.setTimeout(function(){ + _playflowPosition = transition.nextPosition; + var playflowClasses = []; + for(var i = 1; i <= 5; i++) { + if(i != _playflowPosition) playflowClasses.push("playflow-position-"+i); + } + $("body").addClass("playflow-position-"+_playflowPosition).removeClass(playflowClasses.join(" ")); + Player.fire("player:playflow:transitioned", { + currentPosition: _playflowPosition + }); + },1); + } + return !transition.blocked; + }; + var _beforePlayHandled = false; + var _resetPlayflowPosition = function(){ + _beforePlayHandled = false; + _setPlayflowPosition(1); + }; - // Listen for events to potentially change playflow position - var _currentObjectId = 0; - Player.bind("player:video:loaded", function (e, v) { - // check if the loaded video object is different from the last. If so, reset - if (!v) return; - var _nextObjectId = v.type == "clip" ? v.photo_id : v.live_id; - if (_nextObjectId != _currentObjectId) { - _currentObjectId = _nextObjectId; - _resetPlayflowPosition(); - } - }); - Player.bind("player:action:autoplayfailed", function () { - Player.set("autoPlay", false); - window.setTimeout(function () { - _currentObjectId = 0; - _resetPlayflowPosition(); - Player.set("reloadVideo", true); - }, 300); - }); - Player.bind("player:video:ready", function () { - // "player:video:ready is called as a response to "player:video:loaded" - // Here we timeout to allow handling of "player:video:loaded" to finish, before we autoplay - window.setTimeout(function () { - if (Player.get("autoPlay")) { - Player.set("playing", true); - } - }, 1); - }); - Player.bind("player:video:beforeplay", function (e, playbackAllowed) { - if (!_beforePlayHandled) { - _beforePlayHandled = true; - playbackAllowed = playbackAllowed && _setPlayflowPosition(2); - return playbackAllowed; - } - }); - Player.bind("player:action:prerollsplayed", function () { - // Play the content video now from the specified start time - _setPlayflowPosition(3); - Player.set("playing", true); - if (Player.get("video_type") == "clip" && $this.start != 0) { - Player.set("currentTime", $this.start); - } - $this.start = 0; - }); - Player.bind("player:video:play player:video:playing", function () { - _setPlayflowPosition(3); - }); - Player.bind("player:video:ended", function () { - _setPlayflowPosition(4); - }); - Player.bind("player:action:postrollsplayed", function () { - _setPlayflowPosition(5); - }); - Player.bind("player:playflow:transitioned", function (e, transition) { - // Read from settings the action to take when the playflow has been completed - setTimeout(function () { - if (transition.currentPosition == 5 && Player.get("loop")) { - _setPlayflowPosition(2); - } else if ( - transition.currentPosition == 5 && - !Player.get("actionsShown") - ) { - if ($this.endOn == "browse") { - Player.set("browseMode", true); - } else if ($this.endOn == "loop" && Player.get("clips").length > 1) { - Player.set("showLoop", true); - } else if ($this.endOn == "share") { - Player.set("showSharing", true); - } - } - }, 10); - }); - // Getter for retrieving current playflow position - Player.getter("playflowPosition", function () { - return _playflowPosition; - }); + // Listen for events to potentially change playflow position + var _currentObjectId = 0; + Player.bind("player:video:loaded", function(e,v){ + // check if the loaded video object is different from the last. If so, reset + if(!v) return; + var _nextObjectId = (v.type == "clip" ? v.photo_id : v.live_id); + if(_nextObjectId != _currentObjectId){ + _currentObjectId = _nextObjectId; + _resetPlayflowPosition(); + } + }); + Player.bind("player:action:autoplayfailed", function(){ + Player.set('autoPlay', false); + window.setTimeout(function(){ + _currentObjectId = 0; + _resetPlayflowPosition(); + Player.set('reloadVideo', true); + }, 300); + }); + Player.bind("player:video:ready", function(){ + // "player:video:ready is called as a response to "player:video:loaded" + // Here we timeout to allow handling of "player:video:loaded" to finish, before we autoplay + window.setTimeout(function(){ + if( Player.get("autoPlay") ) { + Player.set("playing", true); + } + }, 1); + }); + Player.bind("player:video:beforeplay", function(e, playbackAllowed){ + if(!_beforePlayHandled){ + _beforePlayHandled = true; + playbackAllowed = playbackAllowed && _setPlayflowPosition(2); + return playbackAllowed; + } + }); + Player.bind("player:action:prerollsplayed", function(){ + // Play the content video now from the specified start time + _setPlayflowPosition(3); + Player.set("playing", true); + if(Player.get("video_type") == "clip" && $this.start != 0){ + Player.set("currentTime", $this.start); + } + $this.start = 0; + }); + Player.bind("player:video:play player:video:playing", function(){ + _setPlayflowPosition(3); + }); + Player.bind("player:video:ended", function(){ + _setPlayflowPosition(4); + }); + Player.bind("player:action:postrollsplayed", function(){ + _setPlayflowPosition(5); + }); + Player.bind("player:playflow:transitioned", function(e, transition){ + // Read from settings the action to take when the playflow has been completed + setTimeout(function(){ + if(transition.currentPosition == 5 && Player.get('loop')){ + _setPlayflowPosition(2); + }else if(transition.currentPosition == 5 && !Player.get("actionsShown")){ + if($this.endOn == "browse") { + Player.set("browseMode", true); + }else if($this.endOn == "loop" && Player.get("clips").length > 1){ + Player.set("showLoop", true); + }else if($this.endOn == "share"){ + Player.set("showSharing", true); + } + } + }, 10); + }); + // Getter for retrieving current playflow position + Player.getter('playflowPosition', function(){ + return _playflowPosition; + }); - Player.bind("player:data:loaded", function () { - if ($this.endOn == "browse") { - Player.set("showBrowse", true); - } - }); + Player.bind('player:data:loaded', function(){ + if ($this.endOn == "browse") { + Player.set('showBrowse', true); + } + }); - Player.setter("endOn", function (eo) { - $this.endOn = eo; - $this.render(); - }); - // Set .touch-class on body, if we're on iDevice or Android - if (/iPad|iPhone|Android/.test(navigator.userAgent)) { - $("body").addClass("touch"); - } + // Set .touch-class on body, if we're on iDevice or Android + if(/iPad|iPhone|Android/.test(navigator.userAgent)){ + $("body").addClass("touch"); + } - // Set classes on body to indicate video type - Player.bind("player:video:loaded", function (e, v) { - if (typeof v == "undefined") return; - var $body = $("body"); - if (v.type == "clip") { - $body.removeClass("video-stream stream-dvr"); - $body.addClass("video-clip"); - } else { - if (Player.get("stream_has_dvr")) { - $body.removeClass("video-clip"); - $body.addClass("video-stream stream-dvr"); - } else { - $body.removeClass("video-clip stream-dvr"); - $body.addClass("video-stream"); - } - } - }); + // Set classes on body to indicate video type + Player.bind("player:video:loaded",function(e,v){ + if(typeof v == "undefined") return; + var $body = $("body"); + if(v.type == "clip"){ + $body.removeClass("video-stream stream-dvr"); + $body.addClass("video-clip"); + }else{ + if(Player.get("stream_has_dvr")){ + $body.removeClass("video-clip"); + $body.addClass("video-stream stream-dvr"); + }else{ + $body.removeClass("video-clip stream-dvr"); + $body.addClass("video-stream"); + } + } + }); - Player.bind("player:settings", function (e) { - PlayerUtilities.mergeSettings($this, [ - "theme", - "verticalPadding", - "horizontalPadding", - "trayFont", - "scrubberColor", - "backgroundColor", - "borderRadius", - "showTray", - "endOn", - "start", - "loop", - "alwaysShowTray", - ]); - Player.set("forcer", { - type: "block", - element: "tray", - from: "settings", - active: !$this.showTray, - }); - $this.applyDesignPreferences(); - if ($this.alwaysShowTray) { - window.setTimeout(function () { - Player.set("alwaysShowTray", true); - }, 500); - } - }); + Player.bind('player:settings', function(e){ + PlayerUtilities.mergeSettings($this, ['theme', 'verticalPadding', 'horizontalPadding', 'trayFont', 'scrubberColor', 'backgroundColor', 'borderRadius', 'showTray', 'endOn', 'start', 'loop', 'alwaysShowTray']); + Player.set("forcer", { + type: "block", + element: "tray", + from: "settings", + active: !$this.showTray + }); + $this.applyDesignPreferences(); + if($this.alwaysShowTray) { + window.setTimeout(function(){ + Player.set('alwaysShowTray', true); + }, 500); + } + }); - /* === TRAY HANDLING === */ + /* === TRAY HANDLING === */ - /* Showing/hiding the tray */ - var _trayTimeoutId = null; - var _showTray = function () { - window.clearTimeout(_trayTimeoutId); - $("body").addClass("tray-shown"); - _trayTimeoutId = window.setTimeout(_hideTray, 5000); - }; - var _hideTray = function () { - if ($this.alwaysShowTray) return; - window.clearTimeout(_trayTimeoutId); - $("body").removeClass("tray-shown"); - }; - $(document).mousemove(_showTray); - $(document).mouseleave(_hideTray); + /* Showing/hiding the tray */ + var _trayTimeoutId = null; + var _showTray = function(){ + window.clearTimeout(_trayTimeoutId); + $('body').addClass("tray-shown"); + _trayTimeoutId = window.setTimeout(_hideTray, 5000); + }; + var _hideTray = function(){ + if($this.alwaysShowTray) return; + window.clearTimeout(_trayTimeoutId); + $('body').removeClass("tray-shown"); + }; + $(document).mousemove(_showTray); + $(document).mouseleave(_hideTray); - /* Setter + Getter for alwaysShowTray */ - Player.getter("alwaysShowTray", function () { - return $this.alwaysShowTray; - }); - Player.setter("alwaysShowTray", function (ast) { - $this.alwaysShowTray = ast; - if ($this.alwaysShowTray) { - Player.set("infoShown", false); - Player.set("forcer", { - type: "block", - element: "tray", - from: "design", - active: false, - }); - _showTray(); - } else { - _hideTray(); - } - }); - Player.getter("showTray", function () { - return $this.showTray; - }); - Player.setter("showTray", function (st) { - $this.showTray = st; - $this.render(); - Player.fire("player:settings"); - }); + /* Setter + Getter for alwaysShowTray */ + Player.getter('alwaysShowTray', function(){ + return $this.alwaysShowTray; + }); + Player.setter('alwaysShowTray', function(ast){ + $this.alwaysShowTray = ast; + if($this.alwaysShowTray) { + Player.set('infoShown', false); + Player.set("forcer", {type: "block", element: "tray", from: "design", active: false}); + _showTray(); + } else { + _hideTray(); + } + }); + Player.getter('showTray', function(){ + return $this.showTray; + }); - /* + /* Allow modules to set "blocking" and "persisting" forcing classes on body. Usage: Player.set("forcer", { type: "force|block", @@ -266,122 +230,85 @@ Player.provide( active: true|false, }); */ - var _forcers = {}; - Player.setter("forcer", function (forcer) { - $.each(forcer.element.split(" "), function (i, element) { - var forcerClass = forcer.type + "-" + element; - if (typeof _forcers[forcerClass] == "undefined") { - _forcers[forcerClass] = []; - } - var forcerArray = _forcers[forcerClass]; - var index = forcerArray.indexOf(forcer.from); - if (forcer.active && index == -1) { - forcerArray.push(forcer.from); - } else if (!forcer.active && index > -1) { - forcerArray.splice(index, 1); - } - $("body").toggleClass(forcerClass, forcerArray.length > 0); - }); - }); + var _forcers = {}; + Player.setter("forcer", function(forcer){ + $.each(forcer.element.split(" "), function(i, element){ + var forcerClass = forcer.type + "-" + element; + if(typeof _forcers[ forcerClass ] == "undefined"){ + _forcers[ forcerClass ] = []; + } + var forcerArray = _forcers[ forcerClass ]; + var index = forcerArray.indexOf( forcer.from ); + if(forcer.active && index == -1){ + forcerArray.push(forcer.from); + }else if(!forcer.active && index > -1){ + forcerArray.splice(index, 1); + } + $("body").toggleClass(forcerClass, forcerArray.length > 0); + }); + }); - Player.getter("accentColor", function () { - return $this.scrubberColor; - }); + Player.getter('accentColor', function(){ + return $this.scrubberColor; + }); - Player.setter("accentColor", function (sc) { - $this.scrubberColor = sc; - $this.render(); - }); - /* === END TRAY HANDLING === */ - $this.hexToRGBA = function (hex, alpha) { - var colorTest = hex.match(/^\#(..)(..)(..)$/); - if (colorTest && colorTest.length == 4) { - var r = parseInt(colorTest[1], 16); - var g = parseInt(colorTest[2], 16); - var b = parseInt(colorTest[3], 16); - return "rgba(" + r + "," + g + "," + b + "," + alpha + ")"; - } - return false; - }; - function hexToRGB(hex, alpha) { - var r = parseInt(hex.slice(1, 3), 16), - g = parseInt(hex.slice(3, 5), 16), - b = parseInt(hex.slice(5, 7), 16); + /* === END TRAY HANDLING === */ + $this.hexToRGBA = function(hex, alpha){ + var colorTest = hex.match(/^\#(..)(..)(..)$/); + if(colorTest && colorTest.length==4) { + var r = parseInt(colorTest[1], 16); + var g = parseInt(colorTest[2], 16); + var b = parseInt(colorTest[3], 16); + return 'rgba('+r+','+g+','+b+','+alpha+')'; + } + return false; + }; + function hexToRGB(hex, alpha) { + var r = parseInt(hex.slice(1, 3), 16), + g = parseInt(hex.slice(3, 5), 16), + b = parseInt(hex.slice(5, 7), 16); - if (alpha) { - return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; - } else { - return "rgb(" + r + ", " + g + ", " + b + ")"; - } - } - $this.applyDesignPreferences = function () { - $("filter#icon_hover feFlood").attr("flood-color", $this.scrubberColor); + if (alpha) { + return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; + } else { + return "rgb(" + r + ", " + g + ", " + b + ")"; + } + } + $this.applyDesignPreferences = function(){ + $("filter#icon_hover feFlood").attr("flood-color", $this.scrubberColor); - if ($this.theme) $("body").addClass("theme-" + $this.theme); + if($this.theme) $('body').addClass('theme-'+$this.theme); - // CSS variables - var rootStyle = document.documentElement.style; - rootStyle.setProperty("--brand-color", $this.scrubberColor); - rootStyle.setProperty( - "--brand-color-light", - $this.hexToRGBA($this.scrubberColor, 0.9), - ); - rootStyle.setProperty( - "--brand-color-lighter", - $this.hexToRGBA($this.scrubberColor, 0.8), - ); - rootStyle.setProperty( - "--brand-color-lightest", - $this.hexToRGBA($this.scrubberColor, 0.6), - ); - rootStyle.setProperty("--tray-font", $this.trayFont + ", sans-serif"); - rootStyle.setProperty( - "--player-vertical-padding", - $this.verticalPadding + "px", - ); - rootStyle.setProperty( - "--player-horizontal-padding", - $this.horizontalPadding + "px", - ); - if ($this.backgroundColor) { - rootStyle.setProperty( - "--player-background-color", - $this.backgroundColor, - ); - } - if ($this.borderRadius) { - rootStyle.setProperty( - "--player-border-radius", - $this.borderRadius + "px", - ); - } - }; + // CSS variables + var rootStyle = document.documentElement.style; + rootStyle.setProperty('--brand-color', $this.scrubberColor); + rootStyle.setProperty('--brand-color-light', $this.hexToRGBA($this.scrubberColor, 0.9)); + rootStyle.setProperty('--brand-color-lighter', $this.hexToRGBA($this.scrubberColor, 0.8)); + rootStyle.setProperty('--brand-color-lightest', $this.hexToRGBA($this.scrubberColor, 0.6)); + rootStyle.setProperty('--tray-font', $this.trayFont + ', sans-serif'); + rootStyle.setProperty('--player-vertical-padding', $this.verticalPadding+'px'); + rootStyle.setProperty('--player-horizontal-padding', $this.horizontalPadding+'px'); + if($this.backgroundColor) { + rootStyle.setProperty('--player-background-color', $this.backgroundColor); + } + if($this.borderRadius) { + rootStyle.setProperty('--player-border-radius', $this.borderRadius + 'px'); + } + } - Player.set("forcer", { - type: "block", - element: "tray", - from: "design", - active: true, - }); - Player.bind("player:playflow:transitioned", function (e, transition) { - if (transition.currentPosition == 3) { - Player.set("forcer", { - type: "block", - element: "tray", - from: "design", - active: false, - }); - } - }); + Player.set("forcer", {type: "block", element: "tray", from: "design", active: true}); + Player.bind("player:playflow:transitioned", function(e, transition){ + if(transition.currentPosition == 3){ + Player.set("forcer", {type: "block", element: "tray", from: "design", active: false}); + } + }); - Player.bind("glue:localechange", function (evt, lang) { - $("html").attr({ lang: lang }); - }); + Player.bind('glue:localechange', function(evt,lang){$('html').attr({lang:lang})}); - $this.render(); + $this.render(); - // Return a reference - return $this; - }, + // Return a reference + return $this; + } ); diff --git a/src/info/info.js b/src/info/info.js index 52f028be..f4a66563 100644 --- a/src/info/info.js +++ b/src/info/info.js @@ -10,79 +10,51 @@ - player:infoengaged: Info pane was toggles somehow Answers properties: - - showDomain [get/set] - showDescriptions [get/set] - infoTimeout [get] */ -Player.provide( - "info", +Player.provide('info', { - showDescriptions: true, - showDomain: true, + showDescriptions: true, + showDomain: true }, - function (Player, $, opts) { - var $this = this; - $.extend($this, opts); + function(Player,$,opts){ + var $this = this; + $.extend($this, opts); - $this.onRender = function () { - Player.set( - "infoShown", - (!!$this.showDescriptions || !!$this.showDomain) && - Player.get("playflowPosition") <= 1, - ); - }; + $this.onRender = function(){ + Player.set('infoShown', (!!$this.showDescriptions && Player.get("playflowPosition") <= 1)); + }; - // Bind to events - Player.bind("player:settings", function (e) { - PlayerUtilities.mergeSettings($this, ["showDescriptions", "showDomain"]); - $this.render($this.onRender); - }); - Player.bind("player:video:loaded", function (e, video) { - $this.render($this.onRender); - }); - Player.bind("player:video:play player:video:playing", function (e, video) { - Player.set("infoShown", false); - }); - /* GETTERS */ - Player.getter("infoShown", function () { - return $this.infoShown; - }); - Player.getter("showDomain", function () { - return $this.showDomain; - }); - - Player.getter("showDescriptions", function () { - return $this.showDescriptions; - }); - - /* SETTERS */ - - Player.setter("showDomain", function (sd) { - $this.showDomain = sd; - $this.render($this.onRender); - }); + // Bind to events + Player.bind('player:settings', function(e){ + PlayerUtilities.mergeSettings($this, ['showDescriptions', 'showDomain']); + $this.render($this.onRender); + }); + Player.bind('player:video:loaded', function(e,video){ + $this.render($this.onRender); + }); + Player.bind('player:video:play player:video:playing', function(e,video){ + Player.set('infoShown', false); + }); - Player.setter("showDescriptions", function (sd) { - $this.showDescriptions = sd; - $this.render($this.onRender); - }); + /* GETTERS */ + Player.getter('infoShown', function(){ + return $this.infoShown; + }); + Player.getter('showDomain', function(){ return $this.showDomain; }); - Player.setter("infoShown", function (is) { - $this.infoShown = is; - Player.set("forcer", { - type: "block", - element: "tray", - from: "info", - active: $this.infoShown, + /* SETTERS */ + Player.setter('infoShown', function(is){ + $this.infoShown = is; + Player.set("forcer", {type: "block", element: "tray", from: "info", active: $this.infoShown}); + $this.container.find(".info-overlay").css({ display: ($this.infoShown ? 'block' : 'none') }); }); - $this.container - .find(".info-overlay") - .css({ display: $this.infoShown ? "block" : "none" }); - }); - $this.render(); - return $this; - }, + $this.render(); + + return $this; + } ); diff --git a/src/logo/logo.css b/src/logo/logo.css index bc7f1200..d30d55c2 100644 --- a/src/logo/logo.css +++ b/src/logo/logo.css @@ -1,21 +1,18 @@ .logo { - position: absolute; - top: 20px; - left: 20px; - opacity: 0.8; + position:absolute; + top:20px; + left:20px; + opacity:.8; } .logo.align-right { - left: auto; - right: 20px; + left: auto; + right: 20px; } - .logo img { - display: absolute; - width: 20px; - height: 20px; - object-fit: "cover"; + display: none; + width: auto; + height: auto; } - .size-tiny .logo { - display: none !important; + display:none !important; } diff --git a/src/logo/logo.js b/src/logo/logo.js index 339dfa64..30794c6b 100644 --- a/src/logo/logo.js +++ b/src/logo/logo.js @@ -10,80 +10,61 @@ - logoSource [get] */ -Player.provide( - "logo", +Player.provide('logo', { - logoSource: "", - showLogo: true, + logoSource:'', + showLogo:true }, - function (Player, $, opts) { - var $this = this; - $.extend($this, opts); + function(Player,$,opts){ + var $this = this; + $.extend($this, opts); - var _onImageLoaded = function () { - var img = $this.logo.get(0); - var ratio = img.naturalWidth / img.naturalHeight; - var style = { display: "block" }; - if (ratio > 1.2) { - style["max-width"] = "80px"; - } else if (ratio < 0.8) { - style["max-height"] = "80px"; - } else { - style["max-width"] = "60px"; - } - $this.logo.css(style); - }; + var _onImageLoaded = function(){ + var img = $this.logo.get(0); + var ratio = img.naturalWidth / img.naturalHeight; + var style = {"display": "block"}; + if(ratio > 1.2){ + style["max-width"] = "80px"; + }else if(ratio < 0.8){ + style["max-height"] = "80px"; + }else{ + style["max-width"] = "60px"; + } + $this.logo.css(style); + }; - var _onRender = function () { - $this.logo = $this.container.find("img"); - if ($this.logo.size() > 0) { - if ($this.logo.get(0).complete) { - _onImageLoaded(); - } else { - $this.logo.load(_onImageLoaded); - } - } - }; + var _onRender = function(){ + $this.logo = $this.container.find("img"); + if($this.logo.size() > 0){ + if($this.logo.get(0).complete){ + _onImageLoaded(); + }else{ + $this.logo.load(_onImageLoaded); + } + } + }; - // Bind to events - Player.bind("player:settings", function (e, settings) { - // Load in settings from API if they haven't been overwritten by liquid "with ..." - PlayerUtilities.mergeSettings($this, [ - "logoSource", - "showLogo", - "logoPosition", - "logoAlpha", - "logoWidth", - "logoHeight", - ]); - if (!$this.logoSource.length) $this.showLogo = false; - if ($this.logoSource.length > 0 && !/\/\//.test($this.logoSource)) - $this.logoSource = Player.get("url") + $this.logoSource; - $this.render(_onRender); - }); + // Bind to events + Player.bind('player:settings', function(e,settings){ + // Load in settings from API if they haven't been overwritten by liquid "with ..." + PlayerUtilities.mergeSettings($this, ['logoSource', 'showLogo', 'logoPosition', 'logoAlpha', 'logoWidth', 'logoHeight']); + if(!$this.logoSource.length) $this.showLogo = false; + if($this.logoSource.length>0 && !/\/\//.test($this.logoSource)) $this.logoSource = Player.get('url')+$this.logoSource; + $this.render(_onRender); + }); - Player.bind("player:video:loaded", function () { - $this.render(_onRender); - }); + Player.bind('player:video:loaded', function() { + $this.render(_onRender); + }); - /* GETTERS */ - Player.getter("showLogo", function () { - return $this.showLogo || false; - }); - Player.getter("logoSource", function () { - return $this.logoSource || ""; - }); + /* GETTERS */ + Player.getter('showLogo', function(){return $this.showLogo||false;}); + Player.getter('logoSource', function(){return $this.logoSource||'';}); - /* SETTERS */ - Player.setter("logoSource", function (ls) { - $this.logoSource = ls; - $this.render(); - }); - - return $this; - }, + return $this; + } ); -Player.translate("logo-link", { - en: "You are on a link press enter to open the company website", +Player.translate("logo-link",{ + en: "You are on a link press enter to open the company website", }); diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index e0e457c7..ae70ee54 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -6,60 +6,28 @@ - player:sharing */ -Player.provide( - "share-button", - { - socialSharing: false, - showSharing: false, - showDownload: false, - }, - function (Player, $, opts) { +Player.provide('share-button', + {}, + function(Player,$,opts){ var $this = this; $.extend($this, opts); $this.render($this.toggleShareButton); - $this.toggleShareButton = function () { - window.setTimeout(function () { - $this.container.toggle( - !!Player.get("socialSharing") && - !( - Player.get("unmuteButtonPosition") == "topRight" && - Player.get("showMutedAutoPlayButton") - ), - ); + $this.toggleShareButton = function(){ + window.setTimeout(function(){ + $this.container.toggle(!!Player.get("socialSharing") && !(Player.get('unmuteButtonPosition')=='topRight' && Player.get('showMutedAutoPlayButton'))); }, 10); }; - Player.bind( - "player:settings player:video:loaded player:subtitlechange", - $this.toggleShareButton, - ); - - Player.getter("socialSharing", function () { - return ( - typeof $this.socialSharing != "undefined" && - $this.socialSharing && - $this.socialSharing != "0" && - Player.get("video_sharable") - ); - }); - Player.getter("showDownload", function () { - return $this.showDownload && Player.get("video_type") == "clip"; - }); - - Player.setter("socialSharing", function (ss) { - $this.socialSharing = ss; - $this.container - .find(".share-button") - .css({ display: $this.socialSharing ? "block" : "none" }); - }); + Player.bind('player:settings player:video:loaded player:subtitlechange', $this.toggleShareButton); return $this; - }, + } + ); /* Translations for this module */ -Player.translate("share_video", { - en: "Share video", +Player.translate("share_video",{ + en: "Share video" }); diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index 9bd0e5b3..5748e3da 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -29,284 +29,209 @@ - mailLink [get] */ -Player.provide( - "sharing", +Player.provide('sharing', { socialSharing: false, showSharing: false, - showDownload: false, + showDownload: false }, - function (Player, $, opts) { - var $this = this; - $.extend($this, opts); - - var _shareCurrentTime = false; - - var _onRender = function () { - $this.sharingLink = $this.container.find(".sharing-link"); - $this.currentTimeSelect = $this.container.find(".current-time-select"); - $this.checkbox = $this.container.find(".checkbox"); - $this.currentTimeSelect.click(_currentTimeClick); - var _show = $this.showSharing; - Player.set("showSharing", false); - Player.set("showSharing", _show); - }; - var _currentTimeClick = function () { - $this.checkbox.toggleClass("checked"); - _shareCurrentTime = $this.checkbox.hasClass("checked"); - if (_shareCurrentTime) { - Player.set("playing", false); - var url = - Player.get("videoLink") + - "/" + - formatTime(parseInt(Player.get("currentTime"))); - $this.sharingLink.text(url); - $this.sharingLink.attr("href", url); - } else { - $this.sharingLink.text(Player.get("videoLink")); - } - }; - - // Helper function - var absolutize = function (u) { - if (!/\/\//.test(u)) u = Player.get("mainUrl") + u; - return u; - }; - - // Bind to events - Player.bind("player:settings", function (e, settings) { - PlayerUtilities.mergeSettings($this, [ - "socialSharing", - "showSharing", - "rssLink", - "podcastLink", - "embedCode", - "showDownload", - ]); - $this.rssLink = absolutize($this.rssLink || Player.get("url") + "/rss"); - $this.podcastLink = absolutize( - $this.podcastLink || Player.get("url") + "/podcast", - ); - $this.embedCode = $this.embedCode || ""; - $this.render(_onRender); - Player.fire("player:sharing", {}); - }); - $this.videoLink = ""; - Player.bind("player:video:loaded", function () { - $this.videoLink = absolutize(Player.get("video_one")); - $this.render(_onRender); - }); - - /* GETTERS */ - Player.getter("socialSharing", function () { - return ( - typeof $this.socialSharing != "undefined" && - $this.socialSharing && - $this.socialSharing != "0" && - Player.get("video_sharable") - ); - }); - Player.getter("showSharing", function () { - if (!Player.get("socialSharing")) return false; - return ( - typeof $this.showSharing == "undefined" || - ($this.showSharing && $this.showSharing != "0") - ); - }); - Player.getter("rssLink", function () { - if (!Player.get("socialSharing")) return ""; - return $this.rssLink; - }); - Player.getter("podcastLink", function () { - if (!Player.get("socialSharing")) return ""; - return $this.podcastLink; - }); - Player.getter("embedCode", function () { - if (!Player.get("socialSharing")) return ""; - return $this.embedCode; - }); - Player.getter("videoLink", function () { - if (!Player.get("socialSharing")) return ""; - return $this.videoLink; - }); - Player.getter("siteLink", function () { - return Player.get("mainUrl"); - }); - Player.getter("showDownload", function () { - return $this.showDownload && Player.get("video_type") == "clip"; - }); - Player.getter("downloadUrl", function () { - var v = Player.get("video"); - if ( - typeof v.video_1080p_download != "undefined" && - v.video_1080p_download.length > 0 && - v.video_1080p_size > 0 - ) { - return Player.get("url") + "/attachment" + v.video_1080p_download; - } else if ( - typeof v.video_hd_download != "undefined" && - v.video_hd_download.length > 0 - ) { - return Player.get("url") + "/attachment" + v.video_hd_download; - } else if ( - typeof v.video_medium_download != "undefined" && - v.video_medium_download.length > 0 - ) { - return Player.get("url") + "/attachment" + v.video_medium_download; - } - return ""; - }); - - var socialLink = function (service) { - if (!Player.get("socialSharing")) return ""; - if (_shareCurrentTime) { - return ( - Player.get("videoLink") + - "/" + - formatTime(Player.get("currentTime")) + - "/" + - service - ); - } - return Player.get("videoLink") + "/" + service; - }; - Player.getter("facebookLink", function () { - return socialLink("facebook"); - }); - Player.getter("twitterLink", function () { - return socialLink("twitter"); - }); - Player.getter("tumblrLink", function () { - return socialLink("tumblr"); - }); - Player.getter("googleLink", function () { - return socialLink("google"); - }); - Player.getter("linkedinLink", function () { - return socialLink("linkedin"); - }); - Player.getter("diggLink", function () { - return socialLink("digg"); - }); - Player.getter("mailLink", function () { - return socialLink("mail"); - }); - - /* SETTERS */ - var _sharingTimeouts = []; - var _prevShow = false; - Player.setter("showSharing", function (ss) { - $this.showSharing = ss && Player.get("socialSharing"); - if ($this.showSharing) { - $this.showSharing = !Player.fire("player:module:overlayactivated", { - name: "sharing", - prevented: false, - }).prevented; - } - if ($this.showSharing != _prevShow) { - while (_sharingTimeouts.length > 0) { - clearTimeout(_sharingTimeouts.pop()); - } - - $("body").toggleClass("overlay-shown", true); - - if (_shareCurrentTime) { - _currentTimeClick(); - } - - // Block a few other modules - Player.set("forcer", { - type: "block", - element: "tray big-play info", - from: "sharing", - active: $this.showSharing, + function(Player,$,opts){ + var $this = this; + $.extend($this, opts); + + var _shareCurrentTime = false; + + var _onRender = function(){ + $this.sharingLink = $this.container.find(".sharing-link"); + $this.currentTimeSelect = $this.container.find(".current-time-select"); + $this.checkbox = $this.container.find(".checkbox"); + $this.currentTimeSelect.click(_currentTimeClick); + var _show = $this.showSharing; + Player.set('showSharing', false); + Player.set('showSharing', _show); + }; + var _currentTimeClick = function(){ + $this.checkbox.toggleClass("checked"); + _shareCurrentTime = $this.checkbox.hasClass("checked"); + if(_shareCurrentTime){ + Player.set("playing", false); + var url = Player.get("videoLink") + "/" + formatTime(parseInt(Player.get("currentTime"))); + $this.sharingLink.text(url); + $this.sharingLink.attr("href", url); + }else{ + $this.sharingLink.text( Player.get("videoLink") ); + } + }; + + // Helper function + var absolutize = function(u){ + if(!/\/\//.test(u)) u = Player.get('mainUrl')+u; + return u; + }; + + // Bind to events + Player.bind('player:settings', function(e,settings){ + PlayerUtilities.mergeSettings($this, ['socialSharing', 'showSharing', 'rssLink', 'podcastLink', 'embedCode', 'showDownload']); + $this.rssLink = absolutize($this.rssLink||Player.get('url') + '/rss'); + $this.podcastLink = absolutize($this.podcastLink||Player.get('url') + '/podcast'); + $this.embedCode = $this.embedCode||''; + $this.render(_onRender); + Player.fire('player:sharing', {}); }); + $this.videoLink = ''; + Player.bind('player:video:loaded', function(){ + $this.videoLink = absolutize(Player.get('video_one')); + $this.render(_onRender); + }); + + /* GETTERS */ + Player.getter('socialSharing', function(){ + return (typeof($this.socialSharing)!='undefined'&&$this.socialSharing&&$this.socialSharing!='0') && Player.get('video_sharable'); + }); + Player.getter('showSharing', function(){ + if(!Player.get('socialSharing')) return(false); + return (typeof($this.showSharing)=='undefined'||($this.showSharing&&$this.showSharing!='0')); + }); + Player.getter('rssLink', function(){ + if(!Player.get('socialSharing')) return(''); + return $this.rssLink; + }); + Player.getter('podcastLink', function(){ + if(!Player.get('socialSharing')) return(''); + return $this.podcastLink; + }); + Player.getter('embedCode', function(){ + if(!Player.get('socialSharing')) return(''); + return $this.embedCode; + }); + Player.getter('videoLink', function(){ + if(!Player.get('socialSharing')) return(''); + return $this.videoLink; + }); + Player.getter('siteLink', function(){ + return Player.get('mainUrl'); + }); + Player.getter('showDownload', function(){ + return ($this.showDownload && Player.get("video_type") == "clip"); + }); + Player.getter('downloadUrl', function(){ + var v = Player.get("video"); + if (typeof(v.video_1080p_download)!='undefined' && v.video_1080p_download.length>0 && v.video_1080p_size>0) { + return Player.get('url') + '/attachment' + v.video_1080p_download; + } else if (typeof(v.video_hd_download)!='undefined' && v.video_hd_download.length>0) { + return Player.get('url') + '/attachment' + v.video_hd_download; + } else if (typeof(v.video_medium_download)!='undefined' && v.video_medium_download.length>0) { + return Player.get('url') + '/attachment' + v.video_medium_download; + } + return ""; + }); + + var socialLink = function(service){ + if(!Player.get('socialSharing')) return(''); + if(_shareCurrentTime){ + return Player.get('videoLink') + '/' + formatTime(Player.get("currentTime")) + '/' + service; + } + return Player.get('videoLink') + '/' + service; + }; + Player.getter('facebookLink', function(){return socialLink('facebook');}); + Player.getter('twitterLink', function(){return socialLink('twitter');}); + Player.getter('tumblrLink', function(){return socialLink('tumblr');}); + Player.getter('googleLink', function(){return socialLink('google');}); + Player.getter('linkedinLink', function(){return socialLink('linkedin');}); + Player.getter('diggLink', function(){return socialLink('digg');}); + Player.getter('mailLink', function(){return socialLink('mail');}); + + /* SETTERS */ + var _sharingTimeouts = []; + var _prevShow = false; + Player.setter('showSharing', function(ss){ + $this.showSharing = ss && Player.get("socialSharing"); + if($this.showSharing){ + $this.showSharing = !Player.fire("player:module:overlayactivated", {name: "sharing", prevented: false}).prevented; + } + if($this.showSharing != _prevShow){ + while(_sharingTimeouts.length > 0){ + clearTimeout(_sharingTimeouts.pop()); + } + + $("body").toggleClass("overlay-shown", true); + + if(_shareCurrentTime){ + _currentTimeClick(); + } + + // Block a few other modules + Player.set("forcer", {type: "block", element: "tray big-play info", from: "sharing", active: $this.showSharing}); + + // Animate the container in/out + $this.container.find(".sharing-container").show(); + _sharingTimeouts.push(setTimeout(function(){ + $this.container.find(".sharing-container").toggleClass("sharing-container-active", $this.showSharing); + }, 10)); + _sharingTimeouts.push(setTimeout(function(){ + $this.container.find(".sharing-container").css({display: ""}); + $("body").toggleClass("overlay-shown", $this.showSharing); + }, 210)); + _prevShow = $this.showSharing; + } + }); + Player.setter('shareTo', function(service){ + Player.fire('player:sharing:shareengaged', service); + if(service=='site') { + Player.set('playing', false); + window.open(Player.get('siteLink')+Player.get('video_one')); + } else { + window.open(Player.get(service + 'Link')); + } + }); + + Player.bind("player:module:overlayactivated", function(e, info){ + if(info.name != "sharing"){ + Player.set("showSharing", false); + } + return info; + }); - // Animate the container in/out - $this.container.find(".sharing-container").show(); - _sharingTimeouts.push( - setTimeout(function () { - $this.container - .find(".sharing-container") - .toggleClass("sharing-container-active", $this.showSharing); - }, 10), - ); - _sharingTimeouts.push( - setTimeout(function () { - $this.container.find(".sharing-container").css({ display: "" }); - $("body").toggleClass("overlay-shown", $this.showSharing); - }, 210), - ); - _prevShow = $this.showSharing; - } - }); - Player.setter("shareTo", function (service) { - Player.fire("player:sharing:shareengaged", service); - if (service == "site") { - Player.set("playing", false); - window.open(Player.get("siteLink") + Player.get("video_one")); - } else { - window.open(Player.get(service + "Link")); - } - }); - - Player.setter("showDownload", function (sd) { - $this.showDownload = sd; - Player.fire("player:module:overlayactivated", { - name: "download", - prevented: true, - }).prevented; - $this.render(); - }); - - Player.bind("player:module:overlayactivated", function (e, info) { - if (info.name != "sharing") { - Player.set("showSharing", false); - } - - return info; - }); - - $this.render(_onRender); + $this.render(_onRender); - return $this; - }, + return $this; + } ); /* Translations for this module */ -Player.translate("embed", { - en: "Embed", +Player.translate("embed",{ + en: "Embed" }); -Player.translate("copy_embed", { - en: "Copy embed code for video", +Player.translate("copy_embed",{ + en: "Copy embed code for video" }); -Player.translate("see_on_site", { - en: "See on site", +Player.translate("see_on_site",{ + en: "See on site" }); -Player.translate("share_on_facebook", { - en: "Share on Facebook", +Player.translate("share_on_facebook",{ + en: "Share on Facebook" }); -Player.translate("tweet_this_video", { - en: "Tweet this video", +Player.translate("tweet_this_video",{ + en: "Tweet this video" }); -Player.translate("plus_one_google", { - en: "+1 on Google", +Player.translate("plus_one_google",{ + en: "+1 on Google" }); -Player.translate("mail_video", { - en: "Mail video", +Player.translate("mail_video",{ + en: "Mail video" }); -Player.translate("share", { - en: "Share", +Player.translate("share",{ + en: "Share" }); -Player.translate("share_from_current_time", { - en: "Share from current time", +Player.translate("share_from_current_time",{ + en: "Share from current time" }); -Player.translate("share_on_linkedin", { - en: "Share on LinkedIn", +Player.translate("share_on_linkedin",{ + en: "Share on LinkedIn" }); -Player.translate("more_sharing_options", { - en: "More sharing options", +Player.translate("more_sharing_options",{ + en: "More sharing options" }); -Player.translate("download_video", { - en: "Download video", +Player.translate("download_video",{ + en: "Download video" }); diff --git a/src/subtitles/subtitles.js b/src/subtitles/subtitles.js index bb8ef893..2d089611 100644 --- a/src/subtitles/subtitles.js +++ b/src/subtitles/subtitles.js @@ -29,15 +29,14 @@ - audioDescriptionLocaleMessages [get] */ -Player.provide( - "subtitles", +Player.provide('subtitles', { enableSubtitles: true, subtitlesOnByDefault: false, includeDraftSubtitles: false, - defaultLocale: "", - defaultAudioDescripionLocale: "", - subtitlesDesign: "bars", + defaultLocale: '', + defaultAudioDescripionLocale: '', + subtitlesDesign: 'bars' }, function (Player, $, opts) { var $this = this; @@ -45,184 +44,139 @@ Player.provide( var forceReloadSubtitles = false; // Properties - $this.subtitleStreamType = "video"; + $this.subtitleStreamType = 'video'; var _reset = function () { $this.locales = {}; - $this.subtitleLocale = ""; + $this.subtitleLocale = ''; $this.subtitles = []; - $this.subtitleText = ""; + $this.subtitleText = ''; $this.hasSubtitles = false; // Make audio descriptions available through the same load procedures - $this.supportsAudioDescriptions = window.speechSynthesis && true; + $this.supportsAudioDescriptions = window.speechSynthesis && true;; $this.hasAudioDescriptions = false; $this.audioDescriptionTracks = {}; - $this.audioDescriptionLocale = ""; + $this.audioDescriptionLocale = ''; $this.audioDescriptionLocaleMessages = []; - Player.set("subtitles", ""); - Player.fire("player:subtitlechange"); + Player.set('subtitles', ''); + Player.fire('player:subtitlechange'); }; /* GETTERS */ - Player.getter("enableSubtitles", function () { - return $this.enableSubtitles; - }); - Player.getter("hasSubtitles", function () { - return $this.hasSubtitles; - }); - Player.getter("subtitleText", function () { - return $this.subtitleText; - }); - Player.getter("subtitlesDesign", function () { - return $this.subtitlesDesign; - }); - Player.getter("subtitles", function () { - return $this.subtitles; - }); - Player.getter("locales", function () { - return $this.locales; - }); - Player.getter("localesArray", function () { + Player.getter('enableSubtitles', function () { return $this.enableSubtitles; }); + Player.getter('hasSubtitles', function () { return $this.hasSubtitles; }); + Player.getter('subtitleText', function () { return $this.subtitleText; }); + Player.getter('subtitles', function () { return $this.subtitles; }); + Player.getter('locales', function () { return $this.locales; }); + Player.getter('localesArray', function () { var ret = []; $.each($this.locales, function (i, o) { ret.push(o); }); return ret; }); - Player.getter("subtitleLocale", function () { - return $this.subtitleLocale; - }); - Player.getter("subtitleDirection", function () { + Player.getter('subtitleLocale', function () { return $this.subtitleLocale; }); + Player.getter('subtitleDirection', function () { try { - return ( - Player.get("locales")[Player.get("subtitleLocale")].direction || "ltr" - ); + return Player.get('locales')[Player.get('subtitleLocale')].direction || 'ltr'; } catch (e) { - return "ltr"; + return 'ltr'; } }); - Player.getter("supportsAudioDescriptions", function () { - return $this.supportsAudioDescriptions; - }); - Player.getter("hasAudioDescriptions", function () { - return $this.supportsAudioDescriptions && $this.hasAudioDescriptions; - }); - Player.getter("audioDescriptionTracks", function () { - return $this.audioDescriptionTracks; - }); - Player.getter("audioDescriptionTracksArray", function () { + Player.getter('supportsAudioDescriptions', function () { return $this.supportsAudioDescriptions; }); + Player.getter('hasAudioDescriptions', function () { return $this.supportsAudioDescriptions && $this.hasAudioDescriptions; }); + Player.getter('audioDescriptionTracks', function () { return $this.audioDescriptionTracks; }); + Player.getter('audioDescriptionTracksArray', function () { var ret = []; $.each($this.audioDescriptionTracks, function (i, o) { ret.push(o); }); return ret; }); - Player.getter("audioDescriptionLocale", function () { - return $this.audioDescriptionLocale; - }); - Player.getter("audioDescriptionLocaleMessages", function () { - return $this.audioDescriptionLocaleMessages; - }); + Player.getter('audioDescriptionLocale', function () { return $this.audioDescriptionLocale; }); + Player.getter('audioDescriptionLocaleMessages', function () { return $this.audioDescriptionLocaleMessages; }); /* SETTERS */ - Player.setter("enableSubtitles", function (es) { + Player.setter('enableSubtitles', function (es) { $this.enableSubtitles = es; $this.render(); - Player.fire("player:subtitlechange"); - }); - Player.setter("subtitlesDesign", function (sd) { - $this.subtitlesDesign = sd; - $this.container.removeClass("design-bars").removeClass("design-outline"); - $this.container.addClass("design-" + $this.subtitlesDesign || "bars"); - $this.render(); - Player.fire("player:subtitlechange"); + Player.fire('player:subtitlechange'); }); - Player.setter("locales", function (l) { + Player.setter('locales', function (l) { $this.locales = l; $this.hasSubtitles = Object.keys($this.locales).length > 0; - Player.fire("player:subtitlechange"); + Player.fire('player:subtitlechange'); }); - Player.setter("audioDescriptionTracks", function (adt) { + Player.setter('audioDescriptionTracks', function (adt) { $this.audioDescriptionTracks = adt; - $this.hasAudioDescriptions = - Object.keys($this.audioDescriptionTracks).length > 0; + $this.hasAudioDescriptions = Object.keys($this.audioDescriptionTracks).length > 0; Player.fire("player:audiodescriptionchanged"); }); - Player.setter("subtitleLocale", function (sl) { + Player.setter('subtitleLocale', function (sl) { if ($this.locales[sl]) { - Player.set("subtitles", ""); - if ($this.subtitleStreamType == "video") { - loadVideoTrackFromApi(sl, "general", function (subtitles) { - Player.set("subtitles", subtitles); + Player.set('subtitles', ''); + if($this.subtitleStreamType=='video') { + loadVideoTrackFromApi(sl, 'general', function (subtitles) { + Player.set('subtitles', subtitles); }); } $this.subtitleLocale = sl; - $this.enableSubtitles = !Player.get("showNativeVideoControls"); + $this.enableSubtitles = !Player.get('showNativeVideoControls'); Player.fire("player:subtitlesactivated"); } else { - $this.subtitleLocale = ""; + $this.subtitleLocale = ''; $this.subtitles = []; $this.render(); } - Player.fire("player:subtitlechange"); + Player.fire('player:subtitlechange'); }); - Player.setter("subtitleText", function (st) { - if (typeof st != "object") st = st == "" ? [] : [st]; + Player.setter('subtitleText', function (st) { + if (typeof (st) != 'object') st = (st == '' ? [] : [st]); if ($this.subtitleText != st) { $this.subtitleText = st; $this.render(); } }); - Player.setter("subtitles", function (s) { + Player.setter('subtitles', function (s) { $this.subtitles = s; - Player.fire("player:subtitlechange"); + Player.fire('player:subtitlechange'); $this.possiblyRender(); }); - Player.setter("audioDescriptionLocale", function (adl) { + Player.setter('audioDescriptionLocale', function (adl) { if (!$this.supportsAudioDescriptions) { - $this.audioDescriptionLocale = ""; + $this.audioDescriptionLocale = ''; return; } - if (!$this.audioDescriptionTracks[adl]) adl = ""; + if (!$this.audioDescriptionTracks[adl]) adl = ''; $this.audioDescriptionLocale = adl; Player.fire("player:audiodescriptionchanged"); // Load messages $this.audioDescriptionLocaleMessages = []; - if ($this.audioDescriptionLocale != "") { - loadVideoTrackFromApi( - $this.audioDescriptionLocale, - "audiodescriptions", - function (data) { - var messages = []; - for (var i = 0; i < data.length; i++) { - var text = data[i].text.join("\n"); - var utterance = new SpeechSynthesisUtterance(text); - utterance.lang = $this.audioDescriptionLocale.replace(/_/, "-"); - utterance.pitch = 1.0; - utterance.rate = 1.2; - messages.push({ - start: data[i].timestamp_begin, - end: data[i].timestamp_end, - queued: false, - utterance: utterance, - text: text, - }); - } - $this.audioDescriptionLocaleMessages = messages; - Player.fire("player:audiodescriptionsupdated"); - }, - ); + if ($this.audioDescriptionLocale != '') { + loadVideoTrackFromApi($this.audioDescriptionLocale, 'audiodescriptions', function (data) { + var messages = []; + for (var i = 0; i < data.length; i++) { + var text = data[i].text.join('\n'); + var utterance = new SpeechSynthesisUtterance(text); + utterance.lang = $this.audioDescriptionLocale.replace(/_/, '-'); + utterance.pitch = 1.0; + utterance.rate = 1.2; + messages.push({ start: data[i].timestamp_begin, end: data[i].timestamp_end, queued: false, utterance: utterance, text: text }); + } + $this.audioDescriptionLocaleMessages = messages; + Player.fire("player:audiodescriptionsupdated"); + }); } }); if (window.speechSynthesis && true) { var speech = window.speechSynthesis; var queueSpeech = function () { - if (!Player.get("playing")) return; - var ct = Player.get("currentTime"); + if (!Player.get('playing')) return; + var ct = Player.get('currentTime'); var messages = $this.audioDescriptionLocaleMessages; for (var i = 0; i < messages.length; i++) { if (messages[i].queued) continue; @@ -240,96 +194,79 @@ Player.provide( for (var i = 0; i < messages.length; i++) messages[i].queued = false; }; - Player.bind( - "player:audiodescriptionsupdated player:audiodescriptionchanged player:video:seeked", - cancelSpeechQueue, - ); - Player.bind("player:video:timeupdate", queueSpeech); - Player.bind("player:video:pause", function () { + + Player.bind('player:audiodescriptionsupdated player:audiodescriptionchanged player:video:seeked', cancelSpeechQueue); + Player.bind('player:video:timeupdate', queueSpeech); + Player.bind('player:video:pause', function () { speech.pause(); }); - Player.bind("player:video:play", function () { + Player.bind('player:video:play', function () { speech.resume(); }); } // Listen to events - Player.bind("player:subtitlechange", function () { - $this.container.css({ direction: Player.get("subtitleDirection") }); + Player.bind('player:subtitlechange', function () { + $this.container.css({ direction: Player.get('subtitleDirection') }); }); // Subtitle rendering // Listens to events and rerenders accordingly - Player.bind("player:settings", function (e, s) { - PlayerUtilities.mergeSettings($this, [ - "enableSubtitles", - "subtitlesOnByDefault", - "subtitlesDesign", - "includeDraftSubtitles", - "defaultLocale", - "defaultAudioDescripionLocale", - ]); - $this.container.removeClass("design-bars").removeClass("design-outline"); - $this.container.addClass("design-" + $this.subtitlesDesign || "bars"); - Player.fire("player:subtitlechange"); + Player.bind('player:settings', function (e, s) { + PlayerUtilities.mergeSettings($this, ['enableSubtitles', 'subtitlesOnByDefault', 'subtitlesDesign', 'includeDraftSubtitles', 'defaultLocale', 'defaultAudioDescripionLocale']); + $this.container.removeClass('design-bars').removeClass('design-outline'); + $this.container.addClass('design-' + $this.subtitlesDesign || 'bars'); + Player.fire('player:subtitlechange'); }); - Player.bind( - "player:video:play play:video:playing player:video:pause player:video:progress player:video:timeupdate player:video:seeked", - function (e, o) { - $this.possiblyRender(); - }, - ); - Player.bind("player:video:ended", function (e, o) { - Player.set("subtitleText", ""); + Player.bind('player:video:play play:video:playing player:video:pause player:video:progress player:video:timeupdate player:video:seeked', function (e, o) { + $this.possiblyRender(); + }); + Player.bind('player:video:ended', function (e, o) { + Player.set('subtitleText', ''); }); $this.possiblyRender = function () { - var time = 0; - if ($this.subtitleStreamType == "video") { - time = Player.get("currentTime"); + var time = 0 + if($this.subtitleStreamType=='video') { + time = Player.get('currentTime'); } else { - var ve = Player.get("videoElement"); - if (ve) { + var ve = Player.get('videoElement') + if(ve) { if (ve.hls && ve.hls.playingDate) { - time = Player.get("videoElement").hls.playingDate * 1.0; + time = (Player.get('videoElement').hls.playingDate)*1.0 } else if (ve.getProgramDate) { - time = ve.getProgramDate(); + time = ve.getProgramDate() } } } if (time > 0 && $this.subtitles.length > 0) { - var text = ""; + var text = ''; $.each($this.subtitles, function (i, s) { if (time >= s.timestamp_begin && time < s.timestamp_end) { text = s.text; } }); - Player.set("subtitleText", text); + Player.set('subtitleText', text); } else { - Player.set("subtitleText", ""); + Player.set('subtitleText', ''); } }; $this.possiblyInsertSubtitleTracks = function () { if (/iPhone|iPad/.test(navigator.userAgent)) { var ve = Player.get("videoElement"); var v; - if (typeof ve != "undefined") { + if (typeof (ve) != "undefined") { v = $(ve.video[0]); } else { return; } v.find("track").remove(); - if ($this.subtitleStreamType == "video") { + if($this.subtitleStreamType=='video') { $.each($this.locales, function (i, o) { var track = $(""); track.attr("kind", "subtitles"); track.attr("src", o.href.replace(/\.srt|\.websrt/, ".vtt")); - track.attr("srclang", o.locale.replace(/_/, "-")); - track.attr( - "label", - /^([^\(]+)\(/.test(o.language) - ? o.language.match(/^([^\(]+)\(/)[1] - : o.language, - ); + track.attr("srclang", o.locale.replace(/_/, '-')); + track.attr("label", (/^([^\(]+)\(/.test(o.language) ? o.language.match(/^([^\(]+)\(/)[1] : o.language)); track.prop("mode", "disabled"); v.append(track); }); @@ -345,83 +282,64 @@ Player.provide( }); $this.fullscreenListenersBound = false; $this.bindFullscreenListeners = function (v) { - if ( - /iPad|iPhone/.test(navigator.userAgent) && - !$this.fullscreenListenersBound - ) { + if (/iPad|iPhone/.test(navigator.userAgent) && !$this.fullscreenListenersBound) { var ve = v.get(0); // Possibly show track elements when we enter fullscreen - ve.addEventListener( - "webkitbeginfullscreen", - function () { - for (var i = 0; i < ve.textTracks.length; i += 1) { - if ( - ve.textTracks[i].language.substr(0, 2) == - Player.get("subtitleLocale").substr(0, 2) || - ve.textTracks[i].language == - Player.get("subtitleLocale").replace(/_/, "-") - ) { - ve.textTracks[i].mode = "showing"; - } else { - ve.textTracks[i].mode = "disabled"; - } + ve.addEventListener('webkitbeginfullscreen', function () { + for (var i = 0; i < ve.textTracks.length; i += 1) { + if ( + ve.textTracks[i].language.substr(0, 2) == Player.get("subtitleLocale").substr(0, 2) + || + ve.textTracks[i].language == Player.get("subtitleLocale").replace(/_/, '-') + ) { + ve.textTracks[i].mode = "showing"; + } else { + ve.textTracks[i].mode = "disabled"; } - }, - false, - ); + } + }, false); // Disable native track elements when we leave fullscreen // and mirror showing/disabled subtitles in the subtitles module - ve.addEventListener( - "webkitendfullscreen", - function () { - var _showingSubtitlesFound = false; - for (var i = 0; i < ve.textTracks.length; i += 1) { - if (ve.textTracks[i].mode == "showing") { - $.each($this.locales, function (a, o) { - if (ve.textTracks[i].language == o.locale.substr(0, 2)) { - Player.set("subtitleLocale", o.locale); - _showingSubtitlesFound = true; - } - }); - } - ve.textTracks[i].mode = "disabled"; - } - if (!_showingSubtitlesFound) { - Player.set("subtitleLocale", ""); + ve.addEventListener('webkitendfullscreen', function () { + var _showingSubtitlesFound = false; + for (var i = 0; i < ve.textTracks.length; i += 1) { + if (ve.textTracks[i].mode == "showing") { + $.each($this.locales, function (a, o) { + if (ve.textTracks[i].language == o.locale.substr(0, 2)) { + Player.set("subtitleLocale", o.locale); + _showingSubtitlesFound = true; + } + }); } - }, - false, - ); + ve.textTracks[i].mode = "disabled"; + } + if (!_showingSubtitlesFound) { + Player.set("subtitleLocale", ""); + } + }, false); } $this.fullscreenListenersBound = true; }; // Load some list of available video subtitles from /api/photo/subtitle/list var loadVideoSubtitlesFromApi = function () { - var v = Player.get("video"); - var includeDraftSubtitles = $this.includeDraftSubtitles ? 1 : 0; + var v = Player.get('video'); + var includeDraftSubtitles = ($this.includeDraftSubtitles ? 1 : 0) if (includeDraftSubtitles) forceReloadSubtitles = true; - if ( - (typeof v.subtitles_p != "undefined" && v.subtitles_p) || - includeDraftSubtitles - ) { - var query = { - photo_id: Player.get("video_photo_id"), - token: Player.get("video_token"), - include_drafts_p: includeDraftSubtitles, - }; + if ((typeof (v.subtitles_p) != 'undefined' && v.subtitles_p) || includeDraftSubtitles) { + var query = { photo_id: Player.get('video_photo_id'), token: Player.get('video_token'), include_drafts_p: includeDraftSubtitles }; if (forceReloadSubtitles) { - query["cache_bust"] = Math.random(); + query['cache_bust'] = Math.random() } - Player.get("api").photo.subtitle.list( + Player.get('api').photo.subtitle.list( query, function (data) { // Load a list of languages to support - var locales = {}; - var audioDescriptionTracks = {}; + var locales = {} + var audioDescriptionTracks = {} $.each(data.subtitles, function (i, o) { - if (o.type != "audiodescriptions") { - if (o.default_p && !o.draft_p && $this.defaultLocale == "") { + if (o.type != 'audiodescriptions') { + if (o.default_p && !o.draft_p && $this.defaultLocale == '') { $this.defaultLocale = o.locale; } locales[o.locale] = o; @@ -429,159 +347,128 @@ Player.provide( audioDescriptionTracks[o.locale] = o; } }); - Player.set("locales", locales); - Player.set( - "subtitleLocale", - !!$this.defaultLocale && !!$this.subtitlesOnByDefault - ? $this.defaultLocale - : "", - ); - Player.set("audioDescriptionTracks", audioDescriptionTracks); - Player.set( - "audioDescriptionLocale", - $this.defaultAudioDescripionLocale, - ); + Player.set('locales', locales); + Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); + Player.set('audioDescriptionTracks', audioDescriptionTracks); + Player.set('audioDescriptionLocale', $this.defaultAudioDescripionLocale); $this.pendingSubtitleTracks = true; - Player.fire("player:subtitlechange"); + Player.fire('player:subtitlechange'); Player.fire("player:audiodescriptionchanged"); }, - Player.fail, + Player.fail ); } - }; + } var localVideoTrackCache = {}; var loadVideoTrackFromApi = function (locale, type, callback) { - var key = [Player.get("video_photo_id"), locale, type].join(":"); + var key = [Player.get('video_photo_id'), locale, type].join(':'); if (localVideoTrackCache[key]) { callback(localVideoTrackCache[key], locale, type); } else { - var query = { - photo_id: Player.get("video_photo_id"), - token: Player.get("video_token"), - locale: locale, - type: type, - subtitle_format: "json", - }; + var query = { photo_id: Player.get('video_photo_id'), token: Player.get('video_token'), locale: locale, type: type, subtitle_format: 'json' } if (forceReloadSubtitles) { - query["cache_bust"] = Math.random(); + query['cache_bust'] = Math.random() } - Player.get("api").photo.subtitle.data( + Player.get('api').photo.subtitle.data( query, function (data) { var s = $.parseJSON(data.data.json); localVideoTrackCache[key] = s.subtitles; callback(s.subtitles, locale, type); }, - Player.fail, + Player.fail ); } - }; + } // Load locales for live var loadLiveSubtitlesFromApi = function () { - var v = Player.get("video"); + var v = Player.get('video'); // Empty by default - Player.set("locales", {}); - Player.set( - "subtitleLocale", - !!$this.defaultLocale && !!$this.subtitlesOnByDefault - ? $this.defaultLocale - : "", - ); - Player.set("audioDescriptionTracks", {}); - Player.set("audioDescriptionLocale", $this.defaultAudioDescripionLocale); + Player.set('locales', {}); + Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); + Player.set('audioDescriptionTracks', {}); + Player.set('audioDescriptionLocale', $this.defaultAudioDescripionLocale); // Load locales - Player.get("api").live.transcription.locales( - { live_id: v.live_id, token: v.token }, + Player.get('api').live.transcription.locales( + {live_id:v.live_id, token:v.token}, function (data) { - var locales = {}; + var locales = {} $.each(data.livelocales, function (i, o) { if (o.default_p) { $this.defaultLocale = o.locale; } - o.type = "live"; + o.type = 'live'; locales[o.locale] = o; }); - Player.set( - "subtitleLocale", - !!$this.defaultLocale && !!$this.subtitlesOnByDefault - ? $this.defaultLocale - : "", - ); - Player.set("locales", locales); + Player.set('subtitleLocale', (!!$this.defaultLocale && !!$this.subtitlesOnByDefault ? $this.defaultLocale : '')); + Player.set('locales', locales); //$this.pendingSubtitleTracks = true; }, - Player.fail, + Player.fail ); - }; + } var liveSubtitleRefreshInterval = null; - Player.bind("player:subtitlechange", function () { - if ( - $this.subtitleStreamType != "live" || - Player.get("subtitleLocale").length == 0 - ) { - if (liveSubtitleRefreshInterval) { - window.clearInterval(liveSubtitleRefreshInterval); + Player.bind('player:subtitlechange', function(){ + if($this.subtitleStreamType!='live' || Player.get('subtitleLocale').length==0) { + if(liveSubtitleRefreshInterval) { + window.clearInterval(liveSubtitleRefreshInterval) liveSubtitleRefreshInterval = null; } } else { - if (!liveSubtitleRefreshInterval) { - v = Player.get("video"); - liveSubtitleRefreshInterval = window.setInterval(function () { - var subtitles = []; - Player.get("api").live.transcription.list( - { - live_id: v.live_id, - token: v.token, - recent_p: 1, - locale: Player.get("subtitleLocale"), - }, - function (data) { - $.each(data.livetranscriptions, function (i, t) { + if(!liveSubtitleRefreshInterval) { + v = Player.get('video') + liveSubtitleRefreshInterval = window.setInterval(function(){ + var subtitles = [] + Player.get('api').live.transcription.list( + {live_id:v.live_id, token:v.token, recent_p:1, locale:Player.get('subtitleLocale')}, + function(data){ + $.each(data.livetranscriptions, function(i,t) { subtitles.push({ - text: [t.text], - timestamp_begin: parseFloat(t.start_time) * 1000, - timestamp_end: parseFloat(t.end_time) * 1000, + text:[t.text], + timestamp_begin:parseFloat(t.start_time)*1000, + timestamp_end:parseFloat(t.end_time)*1000 }); }); $this.subtitles = subtitles; }, - Player.fail, - ); - }, 1000); + Player.fail + ) + }, 1000) } } }); - var resetAndLoadSubtitles = function () { + var resetAndLoadSubtitles = function(){ _reset(); - if ($this.subtitleStreamType == "live") { + if($this.subtitleStreamType=='live'){ loadLiveSubtitlesFromApi(false); } else { loadVideoSubtitlesFromApi(false); } - }; - Player.bind("player:video:loaded", function (e, v) { - $this.subtitleStreamType = v.type == "stream" ? "live" : "video"; + } + Player.bind('player:video:loaded', function (e,v) { + $this.subtitleStreamType = (v.type=='stream' ? 'live' : 'video'); resetAndLoadSubtitles(); }); - Player.setter("reloadSubtitles", function () { + Player.setter('reloadSubtitles', function () { forceReloadSubtitles = true; // clear cache localVideoTrackCache = {}; - var locale = Player.get("subtitleLocale"); + var locale = Player.get('subtitleLocale'); if (locale) { $this.defaultLocale = locale; } - if ($this.audioDescriptionLocale != "") { + if ($this.audioDescriptionLocale != '') { $this.defaultAudioDescripionLocale = $this.audioDescriptionLocale; } resetAndLoadSubtitles(); }); + // Bootstrap and load _reset(); return $this; - }, + } ); From d2141e01a377457df533319343afd3ddc81bdfc5 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 14:50:29 +0100 Subject: [PATCH 05/12] feat: enabling more player properties --- src/browse/browse.js | 8 +++++- src/design/design.js | 13 +++++++-- src/info/info.js | 31 +++++++++++++++----- src/logo/logo.css | 9 ++++-- src/logo/logo.js | 8 +++++- src/share-button/share-button.js | 49 ++++++++++++++++++++++++++------ src/sharing/sharing.js | 9 ++++++ src/subtitles/subtitles.js | 10 +++++++ 8 files changed, 114 insertions(+), 23 deletions(-) diff --git a/src/browse/browse.js b/src/browse/browse.js index eca875e2..b00bd7a3 100644 --- a/src/browse/browse.js +++ b/src/browse/browse.js @@ -15,7 +15,7 @@ Answers properties: - showBrowse [get/set] - browseMode [get/set] - - recommendationMethod [get] + - recommendationMethod [get/set] - hasRecommendations [get] - playlistClickMode [get/set] - browse_video_id [set] @@ -168,6 +168,12 @@ Player.provide('browse', $this.showBrowse = sb; $this.loadRecommendations(); }); + + Player.setter('recommendationMethod', function (rm) { + $this.recommendationMethod = rm; + $this.loadRecommendations(); + }); + var _browseTimeouts = []; var _prevShow = false; Player.setter('browseMode', function(bm){ diff --git a/src/design/design.js b/src/design/design.js index d1973e49..6964cf05 100644 --- a/src/design/design.js +++ b/src/design/design.js @@ -217,9 +217,14 @@ Player.provide('design', _hideTray(); } }); - Player.getter('showTray', function(){ + Player.getter('showTray', function () { return $this.showTray; }); + Player.setter('showTray', function (st) { + $this.showTray = st; + $this.render(); + Player.fire("player:settings"); + }); /* Allow modules to set "blocking" and "persisting" forcing classes on body. @@ -251,7 +256,11 @@ Player.provide('design', Player.getter('accentColor', function(){ return $this.scrubberColor; }); - + + Player.setter('accentColor', function (sc) { + $this.scrubberColor = sc; + $this.render(); + }); /* === END TRAY HANDLING === */ $this.hexToRGBA = function(hex, alpha){ diff --git a/src/info/info.js b/src/info/info.js index f4a66563..900d3491 100644 --- a/src/info/info.js +++ b/src/info/info.js @@ -10,6 +10,7 @@ - player:infoengaged: Info pane was toggles somehow Answers properties: + - showDomain [get/set] - showDescriptions [get/set] - infoTimeout [get] */ @@ -23,11 +24,14 @@ Player.provide('info', var $this = this; $.extend($this, opts); - $this.onRender = function(){ - Player.set('infoShown', (!!$this.showDescriptions && Player.get("playflowPosition") <= 1)); + $this.onRender = function () { + Player.set( + 'infoShown', + (!!$this.showDescriptions || !!$this.showDomain) && + Player.get("playflowPosition") <= 1, + ); }; - // Bind to events Player.bind('player:settings', function(e){ PlayerUtilities.mergeSettings($this, ['showDescriptions', 'showDomain']); @@ -40,13 +44,26 @@ Player.provide('info', Player.set('infoShown', false); }); - /* GETTERS */ - Player.getter('infoShown', function(){ - return $this.infoShown; + Player.getter('showDomain', function () { + return $this.showDomain; + }); + + Player.getter('showDescriptions', function () { + return $this.showDescriptions; }); - Player.getter('showDomain', function(){ return $this.showDomain; }); /* SETTERS */ + + Player.setter('showDomain', function (sd) { + $this.showDomain = sd; + $this.render($this.onRender); + }); + + Player.setter('showDescriptions', function (sd) { + $this.showDescriptions = sd; + $this.render($this.onRender); + }); + Player.setter('infoShown', function(is){ $this.infoShown = is; Player.set("forcer", {type: "block", element: "tray", from: "info", active: $this.infoShown}); diff --git a/src/logo/logo.css b/src/logo/logo.css index d30d55c2..6bf91a0d 100644 --- a/src/logo/logo.css +++ b/src/logo/logo.css @@ -8,11 +8,14 @@ left: auto; right: 20px; } + .logo img { - display: none; - width: auto; - height: auto; + display: absolute; + width: 20px; + height: 20px; + object-fit: 'cover'; } + .size-tiny .logo { display:none !important; } diff --git a/src/logo/logo.js b/src/logo/logo.js index 30794c6b..882f6244 100644 --- a/src/logo/logo.js +++ b/src/logo/logo.js @@ -7,7 +7,7 @@ Answers properties: - showLogo [get/set] - - logoSource [get] + - logoSource [get/set] */ Player.provide('logo', @@ -61,6 +61,12 @@ Player.provide('logo', Player.getter('showLogo', function(){return $this.showLogo||false;}); Player.getter('logoSource', function(){return $this.logoSource||'';}); + /* SETTERS */ + Player.setter('logoSource', function(ls) { + $this.logoSource = ls; + $this.render(); + }); + return $this; } ); diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index ae70ee54..b4f6537f 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -6,25 +6,56 @@ - player:sharing */ -Player.provide('share-button', - {}, - function(Player,$,opts){ +Player.provide( + 'share-button', + { + socialSharing: false, + showDownload: false, + }, + function (Player, $, opts) { var $this = this; $.extend($this, opts); $this.render($this.toggleShareButton); - $this.toggleShareButton = function(){ - window.setTimeout(function(){ - $this.container.toggle(!!Player.get("socialSharing") && !(Player.get('unmuteButtonPosition')=='topRight' && Player.get('showMutedAutoPlayButton'))); + $this.toggleShareButton = function () { + window.setTimeout(function () { + $this.container.toggle( + !!Player.get("socialSharing") && + !( + Player.get("unmuteButtonPosition") == "topRight" && + Player.get("showMutedAutoPlayButton") + ), + ); }, 10); }; - Player.bind('player:settings player:video:loaded player:subtitlechange', $this.toggleShareButton); + Player.bind( + "player:settings player:video:loaded player:subtitlechange", + $this.toggleShareButton, + ); - return $this; - } + Player.getter('socialSharing', function () { + return ( + typeof $this.socialSharing != "undefined" && + $this.socialSharing && + $this.socialSharing != "0" && + Player.get("video_sharable") + ); + }); + Player.getter('showDownload', function () { + return $this.showDownload && Player.get("video_type") == "clip"; + }); + + Player.setter('socialSharing', function (ss) { + $this.socialSharing = ss; + $this.container + .find(".share-button") + .css({ display: $this.socialSharing ? "block" : "none" }); + }); + return $this; + }, ); /* Translations for this module */ diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index 5748e3da..453d48cd 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -185,6 +185,15 @@ Player.provide('sharing', } }); + Player.setter('showDownload', function (sd) { + $this.showDownload = sd; + Player.fire("player:module:overlayactivated", { + name: "download", + prevented: true,}).prevented; + $this.render(); + }); + + Player.bind("player:module:overlayactivated", function(e, info){ if(info.name != "sharing"){ Player.set("showSharing", false); diff --git a/src/subtitles/subtitles.js b/src/subtitles/subtitles.js index 2d089611..a006ef6c 100644 --- a/src/subtitles/subtitles.js +++ b/src/subtitles/subtitles.js @@ -67,6 +67,7 @@ Player.provide('subtitles', Player.getter('enableSubtitles', function () { return $this.enableSubtitles; }); Player.getter('hasSubtitles', function () { return $this.hasSubtitles; }); Player.getter('subtitleText', function () { return $this.subtitleText; }); + Player.getter("subtitlesDesign", function () { return $this.subtitlesDesign; }); Player.getter('subtitles', function () { return $this.subtitles; }); Player.getter('locales', function () { return $this.locales; }); Player.getter('localesArray', function () { @@ -143,6 +144,15 @@ Player.provide('subtitles', Player.fire('player:subtitlechange'); $this.possiblyRender(); }); + + Player.setter('subtitlesDesign', function (sd) { + $this.subtitlesDesign = sd; + $this.container.removeClass("design-bars").removeClass("design-outline"); + $this.container.addClass("design-" + $this.subtitlesDesign || "bars"); + $this.render(); + Player.fire("player:subtitlechange"); + }); + Player.setter('audioDescriptionLocale', function (adl) { if (!$this.supportsAudioDescriptions) { $this.audioDescriptionLocale = ''; From cd9c5bb03ddce7d708e4e4c35dc8d84d32027895 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 14:53:31 +0100 Subject: [PATCH 06/12] chore: cleanup --- src/design/design.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design/design.js b/src/design/design.js index 6964cf05..a017a6ff 100644 --- a/src/design/design.js +++ b/src/design/design.js @@ -217,7 +217,7 @@ Player.provide('design', _hideTray(); } }); - Player.getter('showTray', function () { + Player.getter('showTray', function(){ return $this.showTray; }); Player.setter('showTray', function (st) { From d77dd9540a10f16881e777206cedbab30468861c Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 16:26:52 +0100 Subject: [PATCH 07/12] chore: cleanup --- src/logo/logo.css | 8 ++++---- src/logo/logo.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/logo/logo.css b/src/logo/logo.css index 6bf91a0d..0bf9ee3f 100644 --- a/src/logo/logo.css +++ b/src/logo/logo.css @@ -10,12 +10,12 @@ } .logo img { - display: absolute; - width: 20px; - height: 20px; - object-fit: 'cover'; + display: none; + width: auto; + height: auto; } + .size-tiny .logo { display:none !important; } diff --git a/src/logo/logo.js b/src/logo/logo.js index 882f6244..7c130f6f 100644 --- a/src/logo/logo.js +++ b/src/logo/logo.js @@ -64,7 +64,7 @@ Player.provide('logo', /* SETTERS */ Player.setter('logoSource', function(ls) { $this.logoSource = ls; - $this.render(); + $this.render(_onRender); }); return $this; From 8e298120c9e9526407094f8019cb7541a261da2b Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Tue, 24 Feb 2026 17:16:12 +0100 Subject: [PATCH 08/12] chore: cleanup --- src/share-button/share-button.js | 29 +---------------------------- src/sharing/sharing.js | 9 +++++++++ 2 files changed, 10 insertions(+), 28 deletions(-) diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index b4f6537f..5902a546 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -8,10 +8,7 @@ Player.provide( 'share-button', - { - socialSharing: false, - showDownload: false, - }, + {}, function (Player, $, opts) { var $this = this; $.extend($this, opts); @@ -30,30 +27,6 @@ Player.provide( }, 10); }; - Player.bind( - "player:settings player:video:loaded player:subtitlechange", - $this.toggleShareButton, - ); - - Player.getter('socialSharing', function () { - return ( - typeof $this.socialSharing != "undefined" && - $this.socialSharing && - $this.socialSharing != "0" && - Player.get("video_sharable") - ); - }); - Player.getter('showDownload', function () { - return $this.showDownload && Player.get("video_type") == "clip"; - }); - - Player.setter('socialSharing', function (ss) { - $this.socialSharing = ss; - $this.container - .find(".share-button") - .css({ display: $this.socialSharing ? "block" : "none" }); - }); - return $this; }, ); diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index 453d48cd..3d7efe3d 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -193,6 +193,15 @@ Player.provide('sharing', $this.render(); }); + Player.setter("socialSharing", function (ss) { + $this.socialSharing = ss; + $this.container + .find(".sharing-container") + .css({ display: $this.socialSharing ? "block" : "none" }); + $this.render(); + }); + + Player.bind("player:module:overlayactivated", function(e, info){ if(info.name != "sharing"){ From bceb7652240f8411e4314b090ca1294200db58a1 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Wed, 25 Feb 2026 15:36:29 +0100 Subject: [PATCH 09/12] feat: showLogo setter --- src/logo/logo.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/logo/logo.js b/src/logo/logo.js index 7c130f6f..6405c616 100644 --- a/src/logo/logo.js +++ b/src/logo/logo.js @@ -62,10 +62,15 @@ Player.provide('logo', Player.getter('logoSource', function(){return $this.logoSource||'';}); /* SETTERS */ + Player.setter("showLogo", function (sl) { + $this.showLogo = sl; + $this.render(_onRender); + }); + Player.setter('logoSource', function(ls) { $this.logoSource = ls; $this.render(_onRender); - }); + }); return $this; } From da73218a00b2f06e9e721dafdd14dfc52de0e751 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Thu, 5 Mar 2026 11:12:21 +0100 Subject: [PATCH 10/12] chore: return missing getter --- src/info/info.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/info/info.js b/src/info/info.js index 900d3491..4aca0f1d 100644 --- a/src/info/info.js +++ b/src/info/info.js @@ -44,6 +44,8 @@ Player.provide('info', Player.set('infoShown', false); }); + /* GETTERS */ + Player.getter('showDomain', function () { return $this.showDomain; }); @@ -52,6 +54,10 @@ Player.provide('info', return $this.showDescriptions; }); + Player.getter("infoShown", function () { + return $this.infoShown; + }); + /* SETTERS */ Player.setter('showDomain', function (sd) { From db453e3b5ddb72cd837363c4259bd7fec44b5073 Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Thu, 5 Mar 2026 11:50:32 +0100 Subject: [PATCH 11/12] feat: address button hiding and sharing documentation changes --- src/share-button/share-button.js | 6 ++++++ src/sharing/sharing.js | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index 5902a546..5d3a568f 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -25,6 +25,12 @@ Player.provide( ), ); }, 10); + + Player.bind("player:sharing:buttonChange", function (e, ss) { + $this.container + .find(".share-button") + .css({ display: ss ? "block" : "none" }); + }); }; return $this; diff --git a/src/sharing/sharing.js b/src/sharing/sharing.js index 3d7efe3d..ce991afd 100644 --- a/src/sharing/sharing.js +++ b/src/sharing/sharing.js @@ -11,9 +11,11 @@ - player:sharing: Whenever the sharing options are updated - player:sharing:shareengaged: Fires when sharing options are engaged (used by analytics) - player:sharing:embedengaged: Fires when embed is engaged (used by analytics) + - player:sharing:buttonChange: Fires when button should appear/disappear from the player Answers properties: - socialSharing [get/set] + - showSharing [get/set] - showDownload [get/set] - rssLink [get] - podcastLink [get] @@ -195,9 +197,7 @@ Player.provide('sharing', Player.setter("socialSharing", function (ss) { $this.socialSharing = ss; - $this.container - .find(".sharing-container") - .css({ display: $this.socialSharing ? "block" : "none" }); + Player.fire("player:sharing:buttonChange", ss); $this.render(); }); From 8fd010242f8d13708d32eb5d4032999bd02e96fd Mon Sep 17 00:00:00 2001 From: Ugne Adamo <120172293+uadamo@users.noreply.github.com> Date: Thu, 5 Mar 2026 11:53:41 +0100 Subject: [PATCH 12/12] feat: reinstate another binding --- src/share-button/share-button.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/share-button/share-button.js b/src/share-button/share-button.js index 5d3a568f..caa45312 100644 --- a/src/share-button/share-button.js +++ b/src/share-button/share-button.js @@ -26,10 +26,15 @@ Player.provide( ); }, 10); + Player.bind( + "player:settings player:video:loaded player:subtitlechange", + $this.toggleShareButton, + ); + Player.bind("player:sharing:buttonChange", function (e, ss) { - $this.container - .find(".share-button") - .css({ display: ss ? "block" : "none" }); + $this.container + .find(".share-button") + .css({ display: ss ? "block" : "none" }); }); };