123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820 |
- /**
- * BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
- *
- * Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
- *
- * This program is free software; you can redistribute it and/or modify it under the
- * terms of the GNU Lesser General Public License as published by the Free Software
- * Foundation; either version 3.0 of the License, or (at your option) any later
- * version.
- *
- * BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
- * PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License along
- * with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
- *
- */
-
- //const defaultCopyright = '<p>Recorded with <a target="_blank" href="https://bigbluebutton.org/">BigBlueButton</a>.</p><p>Use <a target="_blank" href="http://mozilla.org/firefox">Mozilla Firefox</a> or <a target="_blank" href="http://google.com/chrome/">Google Chrome</a> to play this recording.</p>';
- const defaultCopyright = '<p>DigitalCSE</p>';
- const defaultLogo = 'logo.png';
-
- // Playback events
- var dataReady = false;
- var mediaReady = false;
- var contentReady = false;
-
- // Content events
- var DOMLoaded = false;
- var metadataLoaded = false;
- var mediasChecked = false;
-
- // Media control
- var hasVideo = false;
- var hasDeskshare = false;
- var mediaSyncing = false;
- var mediaSeeked = false;
- var primaryMedia;
- var secondaryMedias;
- var allMedias;
-
- function goToSlide(time) {
- var pop = Popcorn("#video");
- pop.currentTime(time);
- };
-
- /*
- * From: http://stackoverflow.com/questions/1634748/how-can-i-delete-a-query-string-parameter-in-javascript/4827730#4827730
- */
- function removeURLParameter(url, param) {
- var urlparts= url.split('?');
- if (urlparts.length>=2) {
- var prefix= encodeURIComponent(param)+'=';
- var pars= urlparts[1].split(/[&;]/g);
- for (var i=pars.length; i-- > 0;) {
- if (pars[i].indexOf(prefix, 0)==0)
- pars.splice(i, 1);
- }
- if (pars.length > 0) {
- return urlparts[0]+'?'+pars.join('&');
- } else {
- return urlparts[0];
- }
- } else {
- return url;
- }
- };
-
- function addURLParameter(url, param, value) {
- var s = encodeURIComponent(param) + '=' + encodeURIComponent(value);
- logger.info("==Adding URL parameter", s);
- if (url.indexOf('?') == -1) {
- return url + '?' + s;
- } else {
- return url + '&' + s;
- }
- };
-
- /*
- * Converts seconds to HH:MM:SS
- * From: http://stackoverflow.com/questions/6312993/javascript-seconds-to-time-with-format-hhmmss#6313008
- */
- function secondsToHHMMSS(secs) {
- var hours = Math.floor(secs / 3600);
- var minutes = Math.floor((secs - (hours * 3600)) / 60);
- var seconds = secs - (hours * 3600) - (minutes * 60);
-
- if (hours < 10) {hours = "0"+hours;}
- if (minutes < 10) {minutes = "0"+minutes;}
- if (seconds < 10) {seconds = "0"+seconds;}
- var time = hours+':'+minutes+':'+seconds;
- return time;
- };
-
- secondsToYouTubeFormat = function(secs) {
- var hours = Math.floor(secs / 3600);
- var minutes = Math.floor((secs - (hours * 3600)) / 60);
- var seconds = secs - (hours * 3600) - (minutes * 60);
-
- var time = "";
- if (hours > 0) {time += hours+"h";}
- if (minutes > 0) {time += minutes+"m";}
- if (seconds > 0) {time += seconds+"s";}
- if (secs == 0) {time = "0s";}
-
- return time;
- };
-
- /*
- * Full word version of the above function for screen readers
- */
- function secondsToHHMMSSText(secs) {
- var hours = Math.floor(secs / 3600);
- var minutes = Math.floor((secs - (hours * 3600)) / 60);
- var seconds = secs - (hours * 3600) - (minutes * 60);
-
- var time = "";
- if (hours > 1) {time += hours + " hours ";}
- else if (hours == 1) {time += hours + " hour ";}
- if (minutes > 1) {time += minutes + " minutes ";}
- else if (minutes == 1) {time += minutes + " minute ";}
- if (seconds > 1) {time += seconds + " seconds ";}
- else if (seconds == 1) {time += seconds + " second ";}
-
- return time;
- };
-
- function replaceTimeOnURL(secs) {
- var newUrl = addURLParameter(removeURLParameter(document.URL, 't'), 't', secondsToYouTubeFormat(secs));
- window.history.replaceState({}, "", newUrl);
- };
-
- /*
- * Sets the title attribute in a thumbnail.
- */
- function setTitleOnThumbnail($thumb) {
- var src = $thumb.attr("src");
- if (src !== undefined) {
- var num = "?";
- var name = "undefined";
- var match = src.match(/slide-(.*).png/);
- if (match) { num = match[1]; }
- match = src.match(/([^/]*)\/slide-.*\.png/);
- if (match) { name = match[1]; }
- $thumb.attr("title", name + " (" + num + ")");
- }
- };
-
- /*
- * Associates several events on a thumbnail, e.g. click to change slide,
- * mouse over/out functions, etc.
- */
- function setEventsOnThumbnail($thumb) {
- // Note: use ceil() so it jumps to a part of the video that actually is showing
- // this slide, while floor() would most likely jump to the previously slide
-
- // Popcorn event to mark a thumbnail when its slide is being shown
- var timeIn = $thumb.attr("data-in");
- var timeOut = $thumb.attr("data-out");
- var pop = Popcorn("#video");
- pop.code({
- start: timeIn,
- end: timeOut,
- onStart: function(options) {
- $parent = $(".thumbnail-wrapper").removeClass("active");
- $parent = $("#thumbnail-" + Math.ceil(options.start)).parent();
- $parent.addClass("active");
- animateToCurrentSlide();
- },
- onEnd: function(options) {
- $parent = $("#thumbnail-" + Math.ceil(options.start)).parent();
- $parent.removeClass("active");
- }
- });
-
- // Click on thumbnail changes the slide in popcorn
- $thumb.parent().on("click", function() {
- var time = Math.ceil($thumb.attr("data-in"));
- goToSlide(time);
- replaceTimeOnURL(time);
- });
-
- // Mouse over/out to show/hide the label over the thumbnail
- $wrapper = $thumb.parent();
- $wrapper.on("mouseover", function() {
- $(this).addClass("hovered");
- });
- $wrapper.on("mouseout", function() {
- $(this).removeClass("hovered");
- });
- };
-
- function animateToCurrentSlide() {
- var $container = $("#thumbnails").parents(".left-off-canvas-menu");
-
- var currentThumb = $(".thumbnail-wrapper.active");
- // Animate the scroll of thumbnails to center the current slide
- var thumbnailOffset = currentThumb.prop('offsetTop') - $container.prop('offsetTop') +
- (currentThumb.prop('offsetHeight') - $container.prop('offsetHeight')) / 2;
- $container.stop();
- $container.animate({scrollTop: thumbnailOffset}, 200);
- };
-
- /*
- * Generates the list of thumbnails using shapes.svg
- */
- function generateThumbnails() {
- logger.info("==Generating thumbnails");
- var elementsMap = {};
- var imagesList = new Array();
-
- xmlList = shapesSVGContent.getElementsByTagName("image");
- var slideCount = 0;
-
- logger.info("==Setting title on thumbnails");
- for (var i = 0; i < xmlList.length; i++) {
- var element = xmlList[i];
-
- if (!$(element).attr("xlink:href"))
- continue;
-
- var src = element.getAttribute("xlink:href");
- // If it's a full url, leave it as it is
- if (!src.match(/^http[s]?:\/\//)) {
- src = url + '/' + src;
- }
- if (src.match(/\/presentation\/.*slide-.*\.png/)) {
- var timeInList = xmlList[i].getAttribute("in").split(" ");
- var timeOutList = xmlList[i].getAttribute("out").split(" ");
- for (var j = 0; j < timeInList.length; j++) {
-
- var timeIn = Math.ceil(timeInList[j]);
- var timeOut = Math.ceil(timeOutList[j]);
-
- var img = $(document.createElement('img'));
- img.attr("src", src);
- img.attr("id", "thumbnail-" + timeIn);
- img.attr("data-in", timeIn);
- img.attr("data-out", timeOut);
- img.addClass("thumbnail");
- img.attr("alt", " ");
- // Doesn't need to be focusable for blind users
- img.attr("aria-hidden", "true");
-
- // A label with the time the slide starts
- var label = $(document.createElement('span'));
- label.addClass("thumbnail-label");
- // Doesn't need to be focusable for blind users
- label.attr("aria-hidden", "true");
- label.html(secondsToHHMMSS(timeIn));
-
- var hiddenDesc = $(document.createElement('span'));
- hiddenDesc.attr("id", img.attr("id") + "description");
- hiddenDesc.attr("class", "visually-hidden");
- hiddenDesc.html("Slide " + ++slideCount + " " + secondsToHHMMSSText(timeIn));
-
- // A wrapper around the img and label
- var div = $(document.createElement('div'));
- div.addClass("thumbnail-wrapper");
- // Tells accessibility software it can be clicked
- div.attr("role", "link");
- div.attr("aria-describedby", img.attr("id") + "description");
- div.append(img);
- div.append(label);
- div.append(hiddenDesc);
-
- if (parseFloat(timeIn) == 0) {
- div.addClass("active");
- }
-
- imagesList.push(timeIn);
- elementsMap[timeIn] = div;
-
- setEventsOnThumbnail(img);
- setTitleOnThumbnail(img);
- }
- }
- }
-
- imagesList.sort(function(a,b){return a - b});
- for (var i in imagesList) {
- $("#thumbnails").append(elementsMap[imagesList[i]]);
- }
- };
-
- function loadCaptions(video) {
- asyncRequest('GET', captionsJSON).then(function (response) {
- logger.info("==Processing captions.json");
- var captions = JSON.parse(response.responseText);
- const video = document.getElementById("video");
- captions.forEach(function(caption) {
- var track = document.createElement("track");
- track.setAttribute('kind', 'captions');
- track.setAttribute('label', caption['localeName']);
- track.setAttribute('srclang', caption['locale']);
- track.setAttribute('src', url + '/caption_' + caption['locale'] + '.vtt');
- video.appendChild(track);
- });
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'captions'}));
- }, function (response) {
- logger.info("==Video has no captions");
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'captions'}));
- });
- };
-
- function loadVideo() {
- logger.info("==Loading video");
- var video = document.createElement("video");
- video.setAttribute('id','video');
- video.setAttribute('class','webcam');
- video.setAttribute('preload','auto');
- video.setAttribute('playsinline',true);
- video.setAttribute('crossorigin','anonymous');
-
- let webmsource = document.createElement("source");
- webmsource.setAttribute('src', url + '/video/webcams.webm');
- webmsource.setAttribute('type','video/webm; codecs="vp8.0, vorbis"');
- video.appendChild(webmsource);
-
- let mp4source = document.createElement("source");
- mp4source.setAttribute('src', url + '/video/webcams.mp4');
- mp4source.setAttribute('type','video/mp4; codecs="avc1.42E01E"');
- video.appendChild(mp4source);
-
- video.setAttribute('data-timeline-sources', chatXML);
-
- document.getElementById("video-area").appendChild(video);
-
- loadCaptions();
-
- checkLoadedMedia();
- };
-
- function loadAudio() {
- logger.info("==Loading audio")
- var audio = document.createElement("audio") ;
- audio.setAttribute('id', 'video');
- audio.setAttribute('preload', 'auto');
-
- // The webm file will work in IE with WebM components installed,
- // and should load faster in Chrome too
- var webmsource = document.createElement("source");
- webmsource.setAttribute('src', url + '/audio/audio.webm');
- webmsource.setAttribute('type', 'audio/webm; codecs="vorbis"');
-
- // Need to keep the ogg source around for compat with old recordings
- var oggsource = document.createElement("source");
- oggsource.setAttribute('src', url + '/audio/audio.ogg');
- oggsource.setAttribute('type', 'audio/ogg; codecs="vorbis"');
-
- // Browser Bug Workaround: The ogg file should be preferred in Firefox,
- // since it can't seek in audio-only webm files.
- if (navigator.userAgent.indexOf("Firefox") != -1) {
- audio.appendChild(oggsource);
- audio.appendChild(webmsource);
- } else {
- audio.appendChild(webmsource);
- audio.appendChild(oggsource);
- }
-
- audio.setAttribute('data-timeline-sources', chatXML);
- // Audio.setAttribute('controls','');
- // Leave auto play turned off for accessiblity support
- // Audio.setAttribute('autoplay','autoplay');
- document.getElementById("audio-area").appendChild(audio);
-
- checkLoadedMedia();
- };
-
- function loadDeskshare() {
- logger.info("==Loading deskshare");
- var deskshareVideo = document.createElement("video");
- deskshareVideo.setAttribute('id','deskshare-video');
- deskshareVideo.setAttribute('preload','auto');
- deskshareVideo.setAttribute('playsinline',true);
-
- var webmsource = document.createElement("source");
- webmsource.setAttribute('src', url + '/deskshare/deskshare.webm');
- webmsource.setAttribute('type','video/webm; codecs="vp8.0, vorbis"');
- deskshareVideo.appendChild(webmsource);
-
- var mp4source = document.createElement("source");
- mp4source.setAttribute('src', url + '/deskshare/deskshare.mp4');
- mp4source.setAttribute('type','video/mp4; codecs="avc1.42E01E"');
- deskshareVideo.appendChild(mp4source);
-
- var presentationArea = document.getElementById("presentation-area");
- presentationArea.insertBefore(deskshareVideo,presentationArea.childNodes[0]);
-
- checkLoadedDeskshare();
- };
-
- function setMediaSync() {
- if (!hasDeskshare) {
- return;
- }
-
- // Master video
- primaryMedia = Popcorn("#video");
- // Slave videos
- secondaryMedias = [Popcorn("#deskshare-video")];
- allMedias = [primaryMedia].concat(secondaryMedias);
-
- // When we play the master video, we play all other videos as well...
- primaryMedia.on("play", function() {
- for (i = 0; i < secondaryMedias.length ; i++) {
- secondaryMedias[i].play();
- }
- });
-
- // When we pause the master video, we sync
- primaryMedia.on("pause", function() {
- sync();
- });
-
- primaryMedia.on("seeking", function() {
- if (primaryMedia.played().length != 0) {
- mediaSeeked = true;
- }
- });
-
- // When finished seeking, we sync all medias...
- primaryMedia.on("seeked", function() {
- if (primaryMedia.paused()) {
- sync();
- } else {
- primaryMedia.pause();
- }
- });
-
- for (i = 0; i < allMedias.length ; i++) {
- allMedias[i].on("waiting", function() {
- // If one of the medias is 'waiting', we must sync
- if (!primaryMedia.seeking() && !mediaSyncing) {
- mediaSyncing = true;
- // Pause the master video, causing to pause and sync all videos...
- logger.debug("==Syncing videos");
- primaryMedia.pause();
- }
- });
-
- allMedias[i].on("canplay", function() {
- if (mediaSyncing || mediaSeeked) {
- var allMediasAreReady = true;
- for (i = 0; i < allMedias.length ; i++) {
- allMediasAreReady &= (allMedias[i].media.readyState == 4);
- }
-
- if (allMediasAreReady) {
- mediaSyncing = false;
- mediaSeeked = false;
- // Play the master video, causing to play all videos...
- logger.debug("==Resuming");
- primaryMedia.play();
- }
- }
- });
- }
- };
-
- function sync() {
- for (var i = 0; i < secondaryMedias.length ; i++) {
- if (secondaryMedias[i].media.readyState > 1) {
- secondaryMedias[i].pause();
- // Set the current time will fire a "canplay" event to tell us that the video can be played...
- secondaryMedias[i].currentTime(primaryMedia.currentTime());
- }
- }
- };
-
- function setMediaListeners() {
- // Solo media
- primaryMedia = Popcorn("#video");
- primaryMedia.on("seeking", function() {
- if (primaryMedia.played().length != 0) {
- mediaSeeked = true;
- }
- });
-
- // When finished seeking
- primaryMedia.on("seeked", function() {
- if (!primaryMedia.paused()) {
- primaryMedia.pause();
- }
- });
-
- primaryMedia.on("canplay", function() {
- if (mediaSeeked) {
- mediaSeeked = false;
- logger.debug("==Resuming");
- primaryMedia.play();
- }
- });
- };
-
- // Hack for mobile devices that not load media unless they are visible
- function forceMediaEvents() {
- // When the medias were loaded
- if (mediaReady) return;
- if (hasVideo) {
- logger.debug("==Forcing video/captions ready event");
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'video'}));
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'captions'}));
- } else {
- logger.debug("==Forcing audio ready event");
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'audio'}));
- }
- if (hasDeskshare) {
- logger.debug("==Forcing deskshare ready event");
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'deskshare'}));
- }
- }
-
- document.addEventListener("DOMContentLoaded", function() {
- logger.info("==DOM content loaded");
- loadMetadata();
- checkMedias();
- document.dispatchEvent(new CustomEvent('content-ready', {'detail': 'dom'}));
- }, false);
-
- function loadPlayback() {
- logger.info("==Loading playback");
- var appName = navigator.appName;
- var appVersion = navigator.appVersion;
-
- // Hack to force mobile devices to show the playback when media do not load while hidden
- var isMobile = mobileAndTabletCheck();
- if (isMobile) {
- logger.info("==Device is mobile");
- setTimeout(forceMediaEvents, mobileTimeout);
- }
-
- startLoadingBar();
- loadData();
- loadBranding();
-
- if (hasVideo) {
- $("#audio-area").attr("style", "display:none;");
- loadVideo();
- } else {
- $("#video-area").attr("style", "display:none;");
- loadAudio();
- }
-
- // load up the acorn controls
- logger.info("==Loading acorn media player");
- $('#video').acornMediaPlayer({
- theme: 'bigbluebutton',
- volumeSlider: 'vertical'
- });
- $('#video').on("swap", function() {
- swapVideoPresentation();
- });
-
- if (hasDeskshare) {
- loadDeskshare();
- } else {
- setMediaListeners();
- logger.debug("==Recording has no deskshare");
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'deskshare'}));
- }
- };
-
- function isMediaReady(media) {
- if (media !== undefined && media !== null && media.readyState === 4) {
- return true;
- }
- return false;
- };
-
- function checkLoadedMedia() {
- // We use the video tag both for audio or video
- let media = $('#video')[0];
- if (isMediaReady(media)) {
- if (hasVideo) {
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'video'}));
- } else {
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'audio'}));
- }
- } else {
- setTimeout(checkLoadedMedia, mediaCheckInterval);
- }
- };
-
- function checkLoadedDeskshare() {
- let deskshare = $('#deskshare-video')[0];
- if (isMediaReady(deskshare)) {
- document.dispatchEvent(new CustomEvent('media-ready', {'detail': 'deskshare'}));
- } else {
- setTimeout(checkLoadedDeskshare, mediaCheckInterval);
- }
- };
-
- var secondsToWait = 0;
-
- function addTime(time){
- if (secondsToWait === 0) {
- Popcorn('#video').pause();
- window.setTimeout("Tick()", 1000);
- }
- secondsToWait += time;
- };
-
- function loadBranding() {
- let logo = undefined;
- let copyright = undefined;
- let metadata = metadataXMLContent.getElementsByTagName("meta");
-
- if (metadata.length > 0) {
- metadata = metadata[0];
-
- let logoCandidates = metadata.getElementsByTagName("playback-logo-url");
- if (logoCandidates.length > 0) {
- logo = logoCandidates[0].textContent;
- }
-
- let copyrightCandidates = metadata.getElementsByTagName("playback-copyright");
- if (copyrightCandidates.length > 0) {
- copyright = copyrightCandidates[0].textContent;
- }
- }
-
- loadLogo(logo);
- loadCopyright(copyright);
- };
-
- function loadLogo(logo) {
- let logoURL = typeof logo !== 'undefined' ? logo : defaultLogo;
- logger.info("==Loaded logo from", logoURL);
- $("#slide").css('background-image', 'url(' + logoURL + ')');
- document.getElementById("load-img").src = logoURL;
- }
-
- function loadCopyright(copyright) {
- let copyrightText = typeof copyright !== 'undefined' ? copyright : defaultCopyright;
- $("#copyright").html(copyrightText);
- };
-
- function Tick() {
- if (secondsToWait <= 0 || !($("#accEnabled").is(':checked'))) {
- secondsToWait = 0;
- Popcorn('#video').play();
- $('#countdown').html(""); // Remove the timer
- return;
- }
-
- secondsToWait -= 1;
- $('#countdown').html(secondsToWait);
- window.setTimeout("Tick()", 1000);
- };
-
- // Swap the position of the DOM elements `elm1` and `elm2`.
- function swapElements(elm1, elm2) {
- var parent1, next1,
- parent2, next2;
-
- parent1 = elm1.parentNode;
- next1 = elm1.nextSibling;
- parent2 = elm2.parentNode;
- next2 = elm2.nextSibling;
-
- parent1.insertBefore(elm2, next1);
- parent2.insertBefore(elm1, next2);
-
- resizeComponents();
- };
-
- // Swaps the positions of the presentation and the video
- function swapVideoPresentation() {
- var pop = Popcorn("#video");
- var wasPaused = pop.paused();
-
- var mainSectionChild = $("#main-section").children("[data-swap]");
- var sideSectionChild = $("#side-section").children("[data-swap]");
- swapElements(mainSectionChild[0], sideSectionChild[0]);
-
- if (!wasPaused) {
- pop.play();
- }
-
- // Hide the cursor so it doesn't appear in the wrong place (e.g. on top of the video)
- // if the cursor is currently being useful, he we'll be redrawn automatically soon
- showCursor(false);
-
- // Wait for the svg with the slides to be fully loaded, then restore slides state and resize them
- function checkSVGLoaded() {
- var done = false;
- var svg = document.getElementsByTagName("object")[0];
- if (svg !== undefined && svg !== null && currentImage && svg.getSVGDocument('svgfile')) {
- var img = svg.getSVGDocument('svgfile').getElementById(currentImage.getAttribute("id"));
- if (img !== undefined && img !== null) {
- restoreSlidesState(img);
- done = true;
- }
- }
- if (!done) {
- setTimeout(checkSVGLoaded, 50);
- }
- };
- checkSVGLoaded();
- };
-
- function restoreSlidesState(img) {
- logger.debug("==Restoring slide state");
- // Set the current image as visible
- img.style.visibility = "visible";
-
- resizeSlide();
- restoreCanvas();
-
- var isPaused = Popcorn("#video").paused();
- if (isPaused) {
- restoreViewBoxSize();
- restoreCursor(img);
- }
- };
-
- function restoreCanvas() {
- logger.debug("==Restoring canvas");
- var numCurrent = currentImageId.substr(5);
- var currentCanvas;
- currentCanvas = getSVGElementById("canvas" + numCurrent);
-
- if (currentCanvas !== null) {
- currentCanvas.setAttribute("display", "");
- }
- };
-
- function restoreViewBoxSize() {
- logger.debug("==Restoring view box");
- var t = Popcorn("#video").currentTime().toFixed(1);
- var vboxVal = getViewboxAtTime(t);
- if (vboxVal !== undefined) {
- setViewBox(vboxVal);
- }
- };
-
- function restoreCursor(img) {
- logger.debug("==Restoring cursor");
- var imageWidth = parseInt(img.getAttribute("width"), 10);
- var imageHeight = parseInt(img.getAttribute("height"), 10);
- showCursor(true);
- drawCursor(parseFloat(currentCursorVal[0]) / (imageWidth/2), parseFloat(currentCursorVal[1]) / (imageHeight/2));
- };
-
- // Manually resize some components we can't properly resize just using css.
- // Mostly the components in the side-section, that has more than one component that
- // need to fill 100% height.
- function resizeComponents() {
- logger.info("==Resizing components");
- let availableHeight = $("body").height();
- if (hasVideo) {
- availableHeight -= $("#video-area .acorn-controls").outerHeight(true);
- } else {
- availableHeight -= $("#audio-area .acorn-controls").outerHeight(true);
- }
- availableHeight -= $("#navbar").outerHeight(true);
-
- if (window.innerHeight > window.innerWidth) {
- logger.debug("==Portrait mode");
- let mainSectionHeight = availableHeight * 0.6; // 60% for top bar
- $("#main-section").outerHeight(mainSectionHeight);
- let sideSectionHeight = availableHeight - mainSectionHeight;
- $("#side-section").outerHeight(sideSectionHeight);
- $("#chat-area").innerHeight(sideSectionHeight);
- } else {
- logger.debug("==Landscape mode");
- $("#main-section").outerHeight(availableHeight);
- $("#side-section").outerHeight(availableHeight);
- logger.debug("==Data-swap children", $("#side-section").children("[data-swap]"));
- let chatHeight = availableHeight - $("#side-section").children("[data-swap]").outerHeight(true);
- $("#chat-area").innerHeight(chatHeight);
- }
- };
-
- document.addEventListener('content-ready', function(event) {
- logger.debug("==Content ready", event.detail);
- if (contentReady) return;
- switch(event.detail) {
- case 'dom':
- DOMLoaded = true;
- break;
- case 'metadata':
- metadataLoaded = true;
- break;
- case 'medias-checked':
- mediasChecked = true;
- break;
- default:
- logger.warn("==Unhandled content-ready event", event.detail);
- }
- if (DOMLoaded && metadataLoaded && mediasChecked) {
- loadPlayback();
- document.dispatchEvent(new CustomEvent('playback-ready', {'detail': 'content'}));
- }
- }, false);
-
- document.addEventListener('playback-ready', function(event) {
- logger.debug("==Playback ready", event.detail);
- switch(event.detail) {
- case 'data':
- dataReady = true;
- break;
- case 'media':
- mediaReady = true;
- break;
- case 'content':
- contentReady = true;
- break;
- default:
- logger.warn("==Unhandled playback-ready event", event.detail);
- }
- if (dataReady && mediaReady && contentReady) {
- runPopcorn();
- if (firstLoad) {
- initPopcorn();
- }
- }
- }, false);
|