ltgcgo/octavia

"use strict";
 
import {} from "../../libs/lightfelt@ltgcgo/main/cssClass.js";
import {$e, $a} from "../../libs/lightfelt@ltgcgo/main/quickPath.js";
import Cambiare from "../cambiare/index.mjs";
import {fileOpen} from "../../libs/browser-fs-access@GoogleChromeLabs/browser_fs_access.min.js";
import {
    getBridge
} from "../bridge/index.mjs";
import {SheetData} from "../basic/sheetLoad.js";
 
let demoBlobs = {};
let demoPerfs = {};
let demoInfo = {};
let demoModes = [];
demoModes[9] = "gm";
let currentPerformance;
let currentAnimation;
let useMidiBus = false;
 
// Standard switching
let stSwitch = $a("b.mode");
let stSwitchMode = [];
Similar blocks of code found in 4 locations. Consider refactoring.
stSwitch.to = function (i) {
    stSwitch.forEach(function (e) {
        e.classList.off("active");
    });
    if (i > -1) {
        stSwitch[i].classList.on("active");
    };
};
stSwitch.forEach(function (e, i, a) {
    stSwitchMode[i] = e.title;
    e.addEventListener("click", function () {
        visualizer.switchMode(e.title, true);
        stSwitch.to(i);
    });
});
 
// Standard demo switching
let demoPool = new SheetData();
let stList = $e("span#demo-list"), stDemo = [];
const srcPaths = ['../../midi-demo-data/collection/octavia/', './demo/'];
Identical blocks of code found in 3 locations. Consider refactoring.
let getBlobFrom = async function (filename) {
    let i = 0;
    while (i < srcPaths.length) {
        let e = srcPaths[i];
        let response = await fetch(`${e}${filename}`);
        if (response.status < 400) {
            return response;
        };
        i ++;
    };
    console.error(`Loading of data ${filename} failed.`);
};
getBlobFrom(`list.tsv`).then(async (response) => {
    await demoPool.load(await response.text());
    //console.info(demoPool.data);
Identical blocks of code found in 2 locations. Consider refactoring.
    demoPool.data.forEach((e, i) => {
        if (i) {
            let space = document.createElement("span");
            space.innerHTML = " ";
            stList.appendChild(space);
        } else {
            stList.innerText = "";
        };
        let demoChoice = document.createElement("b");
        demoChoice.innerText = e.text;
        demoChoice.title = e.file;
        demoChoice.classList.on("demo");
        stDemo.push(demoChoice);
        stList.appendChild(demoChoice);
    });
Similar blocks of code found in 4 locations. Consider refactoring.
    stDemo.to = function (i) {
        stDemo.forEach(function (e) {
            e.classList.off("active");
        });
        if (i > -1) {
            stDemo[i].classList.on("active");
        };
    };
    stDemo.forEach(function (e, i, a) {
        e.addEventListener("click", async function () {
            audioPlayer.pause();
            if (!demoBlobs[e.title]?.midi) {
                demoBlobs[e.title] = {};
                audioPlayer.src = "about:blank";
Similar blocks of code found in 4 locations. Consider refactoring.
                demoBlobs[e.title].midi = await (await getBlobFrom(`${e.title}.mid`)).blob();
Similar blocks of code found in 4 locations. Consider refactoring.
                demoBlobs[e.title].wave = await (await getBlobFrom(`${e.title}.opus`)).blob();
            };
            currentPerformance = demoPerfs[e.title];
            currentPerformance?.resetIndex();
            currentAnimation = demoInfo[e.title];
            audioPlayer.currentTime = 0;
            visualizer.reset();
            visualizer.loadFile(demoBlobs[e.title].midi);
            if (audioBlob) {
                URL.revokeObjectURL(audioBlob);
            };
            audioBlob = demoBlobs[e.title].wave;
            audioPlayer.src = URL.createObjectURL(audioBlob);
            if (demoModes[i]?.length > 0) {
                visualizer.switchMode(demoModes[i]);
            };
            stDemo.to(i);
        });
    });
});
 
// Open the files
let midwIndicator = $e("#openMidw");
let audioBlob;
const propsMid = JSON.parse('{"extensions":[".mid",".MID",".kar",".KAR",".syx",".SYX",".s7e",".S7E"],"startIn":"music","id":"midiOpener","description":"Open a MIDI file"}'),
propsAud = JSON.parse('{"mimeTypes":["audio/*"],"startIn":"music","id":"audioOpener","description":"Open an audio file"}');
$e("#openMidi").addEventListener("click", async function () {
    useMidiBus = false;
    midwIndicator.classList.off("active");
    let file = await fileOpen(propsMid);
    let fileSplit = file.name.lastIndexOf("."), ext = "";
    if (fileSplit > -1) {
        ext = file.name.slice(fileSplit + 1).toLowerCase();
    };
    switch (ext) {
Identical blocks of code found in 3 locations. Consider refactoring.
        case "syx": {
            // Load SysEx blobs
            visualizer.sendCmd({type: 15, track: 0, data: new Uint8Array(await file.arrayBuffer())});
            break;
        };
        case "s7e": {
            // Load sound banks
            visualizer.device.loadBank(ext, file);
            break;
        };
        default: {
            // Load MIDI files
            stDemo.to(-1);
            visualizer.reset();
            visualizer.loadFile(file);
            visualizer.device.initOnReset = false;
        };
    };
});
Identical blocks of code found in 2 locations. Consider refactoring.
$e("#openAudio").addEventListener("click", async function () {
    useMidiBus = false;
    midwIndicator.classList.off("active");
    if (audioBlob) {
        URL.revokeObjectURL(audioBlob);
    };
    audioBlob = await fileOpen(propsAud);
    audioPlayer.src = URL.createObjectURL(audioBlob);
});
midwIndicator.addEventListener("click", function () {
    stDemo.to(-1);
    if (audioBlob) {
        URL.revokeObjectURL(audioBlob);
    };
    audioBlob = null;
    audioPlayer.src = "";
    visualizer.reset();
    useMidiBus = true;
    midwIndicator.classList.on("active");
});
 
// Get canvas
let targetWidth, targetHeight;
let dispCanv = $e("#cambiare-stage");
let dispCtx = dispCanv.getContext("2d");
 
// Start the visualizers
self.visualizer = new Cambiare(dispCtx);
visualizer.addEventListener("reset", function (e) {
    console.info("Processor reset.");
});
 
// Listen to mode switches
visualizer.addEventListener("mode", function (ev) {
    stSwitch.to(stSwitchMode.indexOf(ev.data));
});
 
let canvFull = async function () {
    if (document.fullscreenElement) {
        document.exitFullscreen();
        visualizer.resizeCanvas(targetWidth, targetHeight);
    } else {
        dispCanv.requestFullscreen();
        visualizer.resizeCanvas(screen.width, screen.height);
    };
};
dispCanv.addEventListener("dblclick", canvFull);
dispCanv.addEventListener("contextmenu", (ev) => {
    if (document.fullscreenElement) {
        ev.preventDefault();
        ev.stopPropagation();
        canvFull();
    };
});
 
// Resize the canvas and calculate critical positioning
let winResize = function (ev) {
    let tabHeight = document.children[0].clientHeight,
    tabWidth = document.children[0].clientWidth;
    targetWidth = Math.floor(tabWidth / 10) * 10,
    targetHeight = Math.floor(tabHeight / 10) * 10;
    dispCanv.style.position = `absolute`;
    dispCanv.style.top = `180px`;
    visualizer.resizeCanvas(Math.max(targetWidth, 960), Math.max(540, Math.min(targetHeight, targetWidth)));
};
addEventListener("resize", winResize);
winResize();
 
document.addEventListener("keydown", function (ev) {
    let scamKey = (+ev.shiftKey << 3) + (+ev.ctrlKey << 2) + (+ev.altKey << 1) + +ev.metaKey;
    switch (scamKey) {
        case 0: {
            switch (ev.key) {
                case "Enter": {
                    // Enter or exit fullscreen
                    canvFull();
                    ev.preventDefault();
                    break;
                };
                case " ": {
                    // Play or pause
                    if (audioPlayer.paused) {
                        audioPlayer.play();
                    } else {
                        audioPlayer.pause();
                    };
                    ev.preventDefault();
                    break;
                };
                case "ArrowLeft": {
                    audioPlayer.currentTime -= 1;
                    break;
                };
                case "ArrowRight": {
                    audioPlayer.currentTime += 1;
                    break;
                };
                case "1":
                case "2":
                case "3":
                case "4":
                case "5":
                case "6":
                case "7":
                case "8": {
                    // Switch start port
                    visualizer.startPort = "12345678".indexOf(ev.key);
                    break;
                };
                case "j": {
                    visualizer.mode = 0;
                    break;
                };
                case "k": {
                    visualizer.mode = 1;
                    break;
                };
                case "l": {
                    visualizer.mode = 2;
                    break;
                };
            };
            break;
        };
    };
});
 
// Render frames
let audioPlayer = $e("#audioPlayer");
audioPlayer.onended = function () {
    visualizer.reset();
    audioPlayer.currentTime = 0;
};
(async function () {
    visualizer.reset();
    let midiBlob = await (await fetch("./demo/KANDI8.mid")).blob();
    demoBlobs.KANDI8 = {};
    demoBlobs.KANDI8.midi = midiBlob;
    visualizer.loadFile(midiBlob);
    if (audioBlob) {
        URL.revokeObjectURL(audioBlob);
    };
    audioBlob = await (await fetch("./demo/KANDI8.opus")).blob();
    demoBlobs.KANDI8.wave = audioBlob;
    audioPlayer.src = URL.createObjectURL(audioBlob);
})();
let lastTime = 0;
let renderThread = setInterval(function () {
    if (/*!audioPlayer.paused*/true) {
        let curTime = audioPlayer.currentTime - (self.audioDelay || 0);
        if (curTime < lastTime) {
        };
        visualizer.render(curTime);
        lastTime = curTime;
    };
}, 20);
 
getBridge().addEventListener("message", function (ev) {
    if (useMidiBus) {
        visualizer.sendCmd(ev.data);
    };
});