X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/8ce01151b83453d8ccaa142178745e847b44cdb5..3efaf2dda390ed91cdba771a490b7c81a9d292a2:/src/catalogue/static/player/2022_player.js diff --git a/src/catalogue/static/player/2022_player.js b/src/catalogue/static/player/2022_player.js index f6dc06965..dfac09615 100644 --- a/src/catalogue/static/player/2022_player.js +++ b/src/catalogue/static/player/2022_player.js @@ -1,18 +1,179 @@ (function($) { $(function() { + $(".book-right-column").remove(); + + if ($("#player-bar").length) { + $("h1").first().after($("
Możesz jednocześnie czytać i słuchać tej lektury!
")); + } + + $(".enable-player-bar").click(function() { + $('body').addClass('with-player-bar'); + $('.jp-play').click(); + return false; + }) + + + var smil = $("#smil").text(); + if (smil) { + smil = $.parseJSON(smil); + + $.each(smil, function(i, e) { + $('#' + e).addClass('syncable'); + }) + } + + + scrolling = false; + /*$(window).on('scroll', function() { + if (!scrolling) { + $("#locator").removeClass('snap'); + } + });*/ + + lastscroll = null; + + scrollTo = function() { + if (!scrolling && $('.playing-highlight').length && $('.playing-highlight')[0] != lastscroll) { + lastscroll = $('.playing-highlight')[0]; + scrolling = true; + $("html").animate({ + scrollTop: $('.playing-highlight').offset().top, + }, { + duration: 2000, + done: function() { + scrolling = false; + + }, + }); + } + } + + $.jPlayer.timeFormat.showHour = true; $(".jp-jplayer").each(function() { - console.log('starting player') var $self = $(this); + var $root = $self.parent(); var $currentMedia = null var currentDuration = 0; var speed = 1; var totalDurationLeft = 0; + var totalDurationBefore = 0; var lastUpdate = 0; + var player = null; + var doesUpdateSynchro = true; + + // TODO: will need class for attach + // may be added from sync data + $(".syncable").click(function() { + if (!$('body').hasClass('with-player-bar')) return; + let id = $(this).attr('id'); + if (!id) return; + for (let i=0; i { + d = parseFloat($(e).data('duration')); + if (time < d) { + setMedia($(e), time, cmd); + return false + } else { + time -= d; + } + }) + } + + var setMedia = function(elem, time=0, cmd='pause') { + var media = {} + + media['mp3'] = elem.attr('data-mp3'); + media['oga'] = elem.attr('data-ogg'); + media['id'] = elem.attr('data-media-id'); + + $(".c-player__head", $root).html( + $(".attribution", elem).html()) + ; + $(".c-player__info", $root).html( + $(".title", elem).html() + ); + $(".c-media__caption .content", $root).html($(".project-description", elem).html()); + $(".c-media__caption .license", $root).html($(".license", elem).html()); + $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html()); + + console.log('sm 1'); + doesUpdateSynchro = false; + if (!$currentMedia || $currentMedia[0] != elem[0]) { + console.log('set', player.jPlayer("setMedia", media)) + player.jPlayer("option", "playbackRate", speed); + } + doesUpdateSynchro = true; + player.jPlayer(cmd, time); + + $currentMedia = elem; + $(".play-next", $root).prop("disabled", !elem.next().length); + + let du = parseFloat(elem.data('duration')); + currentDuration = du; + elem.nextAll().each(function() { + du += parseFloat($(this).data('duration')); + }); + totalDurationLeft = du; + + let pdu = 0; + elem.prevAll().each(function() { + pdu += parseFloat($(this).data('duration')); + }); + totalDurationBefore = pdu; + console.log('sm 3', du, pdu); + return player; + }; + + + var updateSynchrotext = function(position) { + if (!doesUpdateSynchro) return; + + let curElemId = null; + for (let i=0; i maxy) { + locator.addClass('down'); + } + } + } + } + $self.jPlayer({ swfPath: "/static/js/contrib/jplayer/", solution: "html,flash", @@ -21,73 +182,59 @@ useStateClassSkin: true, ready: function() { - var player = $(this); - console.log(1); - - var setMedia = function(elem, time=0) { - console.log('setMedia', elem, time); - var media = {} - - media['mp3'] = elem.attr('data-mp3'); - media['oga'] = elem.attr('data-ogg'); - media['id'] = elem.attr('data-media-id'); - - $(".c-player__head", $root).html( - $(".attribution", elem).html()) - ; - $(".c-player__info", $root).html( - $(".title", elem).html() - ); - $(".c-media__caption .content", $root).html($(".project-description", elem).html()); - $(".c-media__caption .license", $root).html($(".license", elem).html()); - $(".c-media__caption .project-logo", $root).html($(".project-icon", elem).html()); - - player.jPlayer("setMedia", media); - $("audio")[0].playbackRate = speed; - player.jPlayer("pause", time); - - $currentMedia = elem; - $(".play-prev", $root).prop("disabled", !elem.prev().length); - $(".play-next", $root).prop("disabled", !elem.next().length); - - let du = elem.data('duration'); - currentDuration = du; - elem.nextAll().each(function() { - du += $(this).data('duration'); - }); - totalDurationLeft = du; - - return player; - }; + player = $(this); let selectItem = $('.c-select li'); selectItem.on('click', function() { let speedStr = $(this).data('speed'); speed = parseFloat(speedStr); - $("audio")[0].playbackRate = speed; + player.jPlayer("option", "playbackRate", speed); localStorage['audiobook-speed'] = speedStr; + _paq.push(['trackEvent', 'audiobook', 'speed', speedStr]); }); + $('.jp-play', $root).click(function() { + _paq.push(['trackEvent', 'audiobook', 'play']); + }); + $('.jp-seek-bar', $root).click(function() { + _paq.push(['trackEvent', 'audiobook', 'seek']); + }); + $('.jp-mute', $root).click(function() { + _paq.push(['trackEvent', 'audiobook', 'mute']); + }); + $('.jp-volume-bar', $root).click(function() { + _paq.push(['trackEvent', 'audiobook', 'volume']); + }); + $('.play-next', $root).click(function() { let p = $currentMedia.next(); if (p.length) { setMedia(p).jPlayer("play"); + _paq.push(['trackEvent', 'audiobook', 'next']); } }); $('.play-prev', $root).click(function() { let p = $currentMedia.prev(); if (p.length) { setMedia(p).jPlayer("play"); + _paq.push(['trackEvent', 'audiobook', 'prev']); + } else { + // If in first part, restart it. + setMedia($currentMedia).jPlayer("play"); + _paq.push(['trackEvent', 'audiobook', 'rewind']); } }); $('.jp-playlist li', $root).click(function() { setMedia($(this)).jPlayer("play"); $('.c-player__chapters').removeClass('is-active'); + _paq.push(['trackEvent', 'audiobook', 'chapter']); }); + console.log('READY 3!'); var initialElem = $('.jp-playlist li', $root).first(); var initialTime = 0; + console.log('READY 4!'); if (true || Modernizr.localstorage) { try { let speedStr = localStorage['audiobook-speed']; @@ -114,11 +261,17 @@ initialTime = last[2]; } } - setMedia(initialElem, initialTime); + console.log('READY 5!', initialElem, initialTime); + setMedia($(initialElem), initialTime); + console.log('READY 6!'); }, timeupdate: function(event) { t = event.jPlayer.status.currentTime; + + updateSynchrotext(totalDurationBefore + t); + + ttl = (totalDurationLeft - t) / speed; ttl = $.jPlayer.convertTime(ttl); $(".total-time-left").text('Czas do końca: ' + ttl); @@ -135,7 +288,6 @@ audiobooks = {}; } if (t && event.jPlayer.status.duration - t > 10) { - console.log('writer'); audiobooks[$root.attr("data-book-slug")] = [ Date.now(), event.jPlayer.status.media.id, @@ -149,11 +301,25 @@ localStorage["audiobook-history"] = JSON.stringify(audiobooks); lastUpdate = t; } + }, + + + ended: function(event) { + let p = $currentMedia.next(); + if (p.length) { + setMedia(p).jPlayer("play"); + } } }); }); + $('#locator').on('click', function() { + $(this).toggleClass('snap'); + lastscroll = null; + }); + + }); })(jQuery)