view release on metacpan or  search on metacpan

share/public_html/static/music_worklet_inprogress/music_inc_module.js  view on Meta::CPAN

import {default as MHFSPlayer} from './player/mhfsplayer.js'

// times in seconds
const AQMaxDecodedTime = 20;    // maximum time decoded, but not queued
const DesiredChannels = 2;
const DesiredSampleRate = 44100;

let SBAR_UPDATING = 0;

(async function () {

Number.prototype.toHHMMSS = function () {
    var sec_num = Math.floor(this); //parseInt(this, 10); // don't forget the second param
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
    var str;
    if (hours > 0) {
        if (hours < 10) { hours = "0" + hours; }
        str = hours + ':'
    }
    else {
        str = '';
    }
    //if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) { seconds = "0" + seconds; }
    return str + minutes + ':' + seconds;
}

const SetCurtimeText = function(seconds) {   
    curtimetxt.value = seconds.toHHMMSS();
}

const SetEndtimeText = function(seconds) {   
    endtimetxt.value = seconds.toHHMMSS();
}

const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

const WindowManager = function() {
    const that = {};

    // adds a window to the window stack and updates Z
    const AddWindow = function(awindow) {
        let zindexToUse = 2;
        if(that.windowstack) {
            that.windowstack.domwindow.getElementsByClassName("movableWindowTitleBar")[0].style.backgroundColor = "#0095FF";
            zindexToUse = parseInt(that.windowstack.domwindow.style.zIndex)+1;
            awindow.prev = that.windowstack;
            that.windowstack.next = awindow;
        }
        that.windowstack = awindow;
        awindow.domwindow.getElementsByClassName("movableWindowTitleBar")[0].style.backgroundColor = "#0000FF";
        awindow.domwindow.style.zIndex = zindexToUse;
    };

     // removes a window to the window stack and updates Z
    const RemoveWindow = function(awindow) {
        let nextwindow = awindow.next;
        const prevwindow = awindow.prev;
        // remove awindow from the list
        if(prevwindow) {
            awindow.prev = undefined;
            prevwindow.next = nextwindow;
        }
        if(nextwindow) {
            awindow.next = undefined;
            nextwindow.prev = prevwindow;
        }
        else {
            that.windowstack = prevwindow;
        }
        // move the next windows down
        for(; nextwindow; nextwindow = nextwindow.next) {
            nextwindow.domwindow.style.zIndex--;
        }
    };

    // Creates Window, Adds to window stack, and shows
    that.CreateMovableWindow = function(titleText, contentElm) {
        const header = document.getElementsByClassName("header")[0];
        const footer = document.getElementsByClassName("footer")[0];
        let pointerX;
        let pointerY;
        const MovableWindowOnMouseDown = function(e) {
            e = e || window.event;
            e.preventDefault();
            pointerX = e.clientX;
            pointerY = e.clientY;
            document.onmouseup = MovableWindowRelease;
            document.onmousemove = MovableWindowMove;
        };

        const MovableWindowMove = function(e) {
            e = e || window.event;
            e.preventDefault();

            const realPointerX = e.clientX;
            const realPointerY = e.clientY;

            let xDelta = realPointerX - pointerX;
            let yDelta = realPointerY - pointerY;

            // set the element's new position:
            // pointerX and pointerY can only be valid positions for targeted window
            // clamp the delta to avoid moving the window offscreen
            if(xDelta !== 0) {
                // If the image was resized out of bounds, fix it
                const csswidthstr = movableWindow.style.width;
                if(csswidthstr) {
                    const csswidth = parseInt(csswidthstr);
                    const maxwidth = document.getElementsByTagName("body")[0].offsetWidth - movableWindow.offsetLeft;
                    if(csswidth > maxwidth) {

share/public_html/static/music_worklet_inprogress/music_inc_module.js  view on Meta::CPAN

                    const cssheight = parseInt(cssheightstr);
                    const maxheight = (footer.offsetTop - movableWindow.offsetTop);
                    if(cssheight > maxheight) {
                        movableWindow.style.height = maxheight;
                    }
                }

                const minYDelta = header.offsetHeight - movableWindow.offsetTop;
                const maxYDelta = footer.offsetTop - (movableWindow.offsetTop+movableWindow.offsetHeight);
                yDelta = clamp(yDelta, minYDelta, maxYDelta);
                const newtop = movableWindow.offsetTop + yDelta;
                movableWindow.style.top = newtop;
                movableWindow.style.maxHeight = (footer.offsetTop - newtop);
                movableWindowContent.style.maxHeight = (footer.offsetTop - newtop) - 20;
                pointerY += yDelta;
            }
        };

        const MovableWindowRelease = function(e) {
            document.onmouseup = null;
            document.onmousemove = null;
        };

        const closeButton = document.createElement("span");
        closeButton.setAttribute("class", "movableWindowCloseButton");
        closeButton.textContent = "×";

        const movableWindowTitleBar = document.createElement("div");
        movableWindowTitleBar.setAttribute("class", "movableWindowTitleBar");
        movableWindowTitleBar.onmousedown = MovableWindowOnMouseDown;
        const movableWindowTitleText = document.createElement("div");
        movableWindowTitleText.setAttribute("class", "movableWindowTitleText");
        movableWindowTitleText.textContent = titleText;

        movableWindowTitleBar.appendChild(movableWindowTitleText);
        movableWindowTitleBar.appendChild(closeButton);


        const movableWindowContent = document.createElement("div");
        movableWindowContent.setAttribute("class", "movableWindowContent");
        movableWindowContent.appendChild(contentElm);

        const movableWindow = document.createElement("div");
        movableWindow.setAttribute("class", "movableWindow");
        movableWindow.appendChild(movableWindowTitleBar);
        movableWindow.appendChild(movableWindowContent);

        const headerBottom = header.offsetHeight;
        movableWindow.style.top = headerBottom;
        movableWindow.style.maxHeight = (footer.offsetTop - headerBottom);
        movableWindow.style.maxWidth  = document.getElementsByTagName("body")[0].offsetWidth;
        movableWindowContent.style.maxHeight = (footer.offsetTop - headerBottom) - 20;

        const fullwindow = { 'domwindow' : movableWindow};

        // remove from dom and the window stack
        closeButton.addEventListener('click', function() {
            movableWindow.remove();
            RemoveWindow(fullwindow);
            if(that.windowstack) {
                that.windowstack.domwindow.getElementsByClassName("movableWindowTitleBar")[0].style.backgroundColor = "#0000FF";
            }
        });

        // on mouse down move window to topmost
        const makeTopMost = function() {
            const nextwindow = fullwindow.next;
            // already topmost if no next window
            if(!nextwindow) {
                return;
            }

            // remove from stack
            RemoveWindow(fullwindow);

            // place topmost
            AddWindow(fullwindow);
        };
        movableWindow.onmousedown = makeTopMost;

        // add to the window stack as topmost
        AddWindow(fullwindow);

        // finally show the window
        document.getElementsByTagName("body")[0].appendChild(movableWindow);
    };

    return that;
};
const WM = WindowManager();



const CreateImageViewer = function(title, imageURL) {
    const imgelm = document.createElement("img");
    imgelm.setAttribute("class", "artviewimg");
    imgelm.setAttribute("alt", "imageviewimage");
    imgelm.setAttribute('src', imageURL);
    WM.CreateMovableWindow("Image View - " + title, imgelm);
};

const TrackMetadata = function(track, isLoading){
    const metadiv = document.createElement("div");
    metadiv.setAttribute('class', 'trackmetadata');
    if(track) {
        const mmd = MHFSPLAYER.getmediametadata(track);
        const ttitle = (!isLoading) ? mmd.title : mmd.title + ' {LOADING}';
        const vdiv = document.createElement('div');
        vdiv.setAttribute('class', 'trackmetadatainner');

        if(mmd.artist && mmd.album) {
            const tspan = document.createElement('span');
            tspan.setAttribute('class', 'trackmetadatatrackname');
            tspan.textContent = ttitle;
            vdiv.appendChild(tspan);

            for( const item of [mmd.artist, mmd.album]) {
                const span = document.createElement('span');
                span.textContent = item;
                vdiv.appendChild(span);
            }