~hristoast/mousikofidi

da4f01220bcc52cbd32872558f97c2ca76ccc3ea — Hristos N. Triantafillou a month ago 4c15df3
One way to set text, use it everywhere (#118)

This also allows videos to get the same "goto on click" effect with
the title.
1 files changed, 74 insertions(+), 54 deletions(-)

M mousikofidi/static/js/player.js
M mousikofidi/static/js/player.js => mousikofidi/static/js/player.js +74 -54
@@ 165,8 165,6 @@ function playVideo(targetArrow, dontPlay) {
        video.play();
    }
    videoNowPlayingNumDiv.setAttribute("data-nowplaying-num", thisTrackNum);
    // TODO: When you remove a playing track, this doesn't update
    videoPlayingTitleSpan.textContent = targetArrow.getAttribute("data-title");

    if (!dontPlay)
        video.scrollIntoView({block: "start", behavior: "smooth"});


@@ 215,6 213,40 @@ function setRandomOrder(trackType) {
    }
}

function setStatusTexts(mediaType, nowPlayingP, _playingTitleSpan, actionText,
                        nowPlayingNum, trackTitle, siteName, titleElement) {
    var arrows;

    if (mediaType === "audio") {
        arrows = playArrows;

    } else if (mediaType === "video") {
        arrows = videoArrows;
    }

    if (titleElement)
        titleElement.textContent = `${actionText} ${trackTitle} | ${siteName}`

    nowPlayingP.textContent = `${actionText} `;

    // The inner span gets wiped out when the outer p's text is set.  Recreate and set it.
    nowPlayingP.appendChild(document.createElement("span"));
    var playingTitleSpan = nowPlayingP.childNodes[1];

    playingTitleSpan.onclick = function() {
            var scrollTarget = document.getElementById(arrows[nowPlayingNum].id + "-target");
            scrollTarget.scrollIntoView({block: "start", behavior: "smooth"});
        };
    playingTitleSpan.classList.toggle("bold");

    updateNowPlayingTitle(
        playingTitleSpan,
        trackTitle,
        Number(nowPlayingNum) + 1,
        arrows.length
    );
}

function endedTrackListener(_, trackType) {
    if (trackType === "audio") {
        var arrows = playArrows;


@@ 604,45 636,31 @@ function paused(_, event, trackType) {
    }

    if (event === "playing") {
        if (trackType === "audio")
            pageTitle.textContent = "Now Playing: " + playingText + " | " + siteName;

        nowPlayingTextP.textContent = "Now Playing: ";

        // The inner span gets wiped out when the outer p's text is set.  Recreate and set it.
        nowPlayingTextP.appendChild(document.createElement("span"));
        nowPlayingTextP.childNodes[1].onclick = function() {
            var scrollTarget = document.getElementById(playArrows[nowPlayingTrackNum].id + "-target");
            scrollTarget.scrollIntoView({block: "start", behavior: "smooth"});
        };
        nowPlayingTextP.childNodes[1].style.fontWeight = "bold";

        updateNowPlayingTitle(
            nowPlayingTextP.childNodes[1],
        if (trackType === "video")
            pageTitle = null;
        setStatusTexts(
            trackType,
            nowPlayingTextP,
            playingTitleSpan,
            "Now Playing:",
            nowPlayingTrackNum,
            playingText,
            Number(nowPlayingTrackNum) + 1,
            totalTracks
            siteName,
            pageTitle
        );

    } else if (event === "paused") {
        if (trackType === "audio")
            pageTitle.textContent = "Paused: " + playingText + " | " + siteName;

        nowPlayingTextP.textContent = "Paused: ";

        // The inner span gets wiped out when the outer p's text is set.  Recreate and set it.
        nowPlayingTextP.appendChild(document.createElement("span"));
        nowPlayingTextP.childNodes[1].onclick = function() {
            var scrollTarget = document.getElementById(playArrows[nowPlayingTrackNum].id + "-target");
            scrollTarget.scrollIntoView({block: "start", behavior: "smooth"});
        };
        nowPlayingTextP.childNodes[1].style.fontWeight = "bold";

        updateNowPlayingTitle(
            nowPlayingTextP.childNodes[1],
        if (trackType === "video")
            pageTitle = null;
        setStatusTexts(
            trackType,
            nowPlayingTextP,
            playingTitleSpan,
            "Paused:",
            nowPlayingTrackNum,
            playingText,
            Number(nowPlayingTrackNum) + 1,
            totalTracks
            siteName,
            pageTitle
        );
    }
}


@@ 917,23 935,22 @@ function volumeCtl(mediaType, action, val) {
    saveVolume(vol);
}

function FidiAudioPlayerSetup(audioElement, currentTrackNum, trackServeUrl, playingText, playingTextTitle) {
function FidiAudioPlayerSetup(audioElement, currentTrackNum, trackServeUrl, playingText) {
    var siteName = pageTitle.getAttribute("data-sitename");
    // Load up the first track
    audioElement.src = trackServeUrl;
    // Wait for "canplay", for whatever reason this isn't needed for videos...
    audioElement.addEventListener("canplay", function() {
        playingTitleSpan.onclick = function() {
            var scrollTarget = document.getElementById(playArrows[currentTrackNum].id + "-target");
            scrollTarget.scrollIntoView({block: "start", behavior: "smooth"});
        };
        title.textContent = playingTextTitle;
        if (!queueHeaderDiv)
            updateNowPlayingTitle(
                playingTitleSpan,
                playingText,
                1,
                playArrows.length
            );
        setStatusTexts(
            "audio",
            audioNowPlayingTextP,
            playingTitleSpan,
            "Paused:",
            currentTrackNum,
            playingText,
            siteName,
            pageTitle
        );
    });

    // Finally, add the ended listener to continue playback


@@ 1011,12 1028,15 @@ function FidiPlayerSetUp() {
      MousikóFídi playlist player main entry point.
    */
    var currentTrack = 0;
    if (nowPlayingNumDiv)
        var nowPlayingTrackNum = nowPlayingNumDiv.getAttribute("data-nowplaying-num");
    var nowPlayingTrackNum;
    var playingText;
    var siteName = pageTitle.getAttribute("data-sitename");

    if (nowPlayingNumDiv)
        nowPlayingTrackNum = nowPlayingNumDiv.getAttribute("data-nowplaying-num");

    if (playArrows.length > 0) {
        var playingText = playArrows[0].getAttribute("data-title");
        var playingTextTitle = "Paused: " + playingText + " | " + siteName;
        playingText = playArrows[0].getAttribute("data-title");
    }

    if (tracks) {


@@ 1032,7 1052,7 @@ function FidiPlayerSetUp() {
        FidiAudioPlayerSetup(
            audio, currentTrack,
            playArrows[currentTrack].getAttribute("data-browse").replace("browse", "serve"),
            playingText, playingTextTitle
            playingText
        );

    } else if ((single) && (audioProgress)) {