X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/9fcf7be584a442a94cfb7c0d2b97b61ad52730e5..f546d1dd07dd4d86e1dcde26a1b02f0ffe783f7c:/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 180e2ab29..dfac09615 100644 --- a/src/catalogue/static/player/2022_player.js +++ b/src/catalogue/static/player/2022_player.js @@ -1,12 +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 $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", @@ -15,69 +182,69 @@ 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); - player.jPlayer("pause", time); - - $currentMedia = elem; - $(".play-prev", $root).prop("disabled", !elem.prev().length); - $(".play-next", $root).prop("disabled", !elem.next().length); - - return player; - }; + player = $(this); let selectItem = $('.c-select li'); selectItem.on('click', function() { - let speed = parseFloat(this.innerHTML); - console.log(speed); - console.log($('audio')); - $("audio")[0].playbackRate = speed; + let speedStr = $(this).data('speed'); + speed = parseFloat(speedStr); + 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() { - console.log(this); - setMedia($(this)); + setMedia($(this)).jPlayer("play"); + $('.c-player__chapters').removeClass('is-active'); + _paq.push(['trackEvent', 'audiobook', 'chapter']); }); - console.log(1); - + 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']; + if (speedStr) { + speed = parseFloat(speedStr); + $(".speed .is-active").removeClass("is-active"); + $(".speed [data-speed='" + speedStr + "']").addClass("is-active"); + } + } catch {} + try { audiobooks = JSON.parse(localStorage["audiobook-history"]); } catch { @@ -90,25 +257,36 @@ } if (last) { - initialElem = $('[data-media-id="' + last[1] + '"] .play', $root).first(); + initialElem = $('[data-media-id="' + last[1] + '"]', $root).first(); initialTime = last[2]; - $number.text($(".jp-playlist .play", $root).index(initialElem) + 1); } } - setMedia(initialElem, initialTime); + console.log('READY 5!', initialElem, initialTime); + setMedia($(initialElem), initialTime); + console.log('READY 6!'); }, timeupdate: function(event) { - //event.jPlayer.status.currentTime + 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); + + $(".time-left").text('– ' + $.jPlayer.convertTime( + currentDuration - t, + )); - if (true || (event.jPlayer.status.currentTime && Modernizr.localstorage)) { + if (Math.abs(t - lastUpdate) > 3) { try { audiobooks = JSON.parse(localStorage["audiobook-history"]); } catch { audiobooks = {}; } - t = event.jPlayer.status.currentTime; if (t && event.jPlayer.status.duration - t > 10) { audiobooks[$root.attr("data-book-slug")] = [ Date.now(), @@ -121,12 +299,27 @@ // Remove old book id, if present. delete audiobooks[$root.attr("data-book-id")]; 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)