diff --git a/.gitignore b/.gitignore index 0f2e5aa..27f553a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /webGLTest.iml /.idea/ +/build/node_modules/ \ No newline at end of file diff --git a/build/gulpfile.js b/build/gulpfile.js new file mode 100644 index 0000000..36d8cf9 --- /dev/null +++ b/build/gulpfile.js @@ -0,0 +1,23 @@ +const gulp = require('gulp'), + spriteBuild = require('./task/spriteBuilder').buildIconSprites, + scss = require('./task/scss').buildCSS, + js = require('./task/js').build, + gui = require('./task/jsonMinifier').build, + worker = require('./task/worker').build; + +gulp.task('scss', scss); +gulp.task('js', js); +gulp.task('sprite', spriteBuild); +gulp.task('gui', gui); +gulp.task('workerJS', worker); + +gulp.task('watchMe', () => { + gulp.watch('./../raw/javascript/**/*.js', gulp.series('js')); + gulp.watch('./../raw/worker/**/*.js', gulp.series('workerJS')); + gulp.watch('./../raw/scss/**/*.scss', gulp.series('scss')); + gulp.watch('./../raw/gui/**/*.json', gulp.series('gui')); +}); + +gulp.task('default', gulp.parallel('js', 'scss', 'sprite', 'gui', 'workerJS')); + +gulp.task('watch', gulp.parallel('js', 'scss', 'sprite', 'gui', 'workerJS', 'watchMe')); diff --git a/build/package.json b/build/package.json new file mode 100644 index 0000000..b7d731d --- /dev/null +++ b/build/package.json @@ -0,0 +1,36 @@ +{ + "name": "vtwebbuild", + "version": "1.0.0", + "description": "Buildprocess for VTWeb like babble, sass and other things", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://gitlab.com/versustune/vtweb.git" + }, + "author": "Maurice Grönwoldt", + "license": "ISC", + "bugs": { + "url": "https://gitlab.com/versustune/vtweb/issues" + }, + "homepage": "https://gitlab.com/versustune/vtweb#readme", + "dependencies": { + "@fortawesome/fontawesome-pro": "^5.5.0", + "@fortawesome/pro-light-svg-icons": "^5.5.0", + "@fortawesome/pro-regular-svg-icons": "^5.5.0", + "@fortawesome/pro-solid-svg-icons": "^5.5.0", + "fontawesome-svg-sprite-generator": "^1.0.0", + "gulp": "^4.0.0", + "gulp-clean-css": "^4.0.0", + "gulp-concat": "^2.6.1", + "gulp-rename": "^1.4.0", + "gulp-sass": "^4.0.2", + "gulp-terser": "^1.1.7", + "merge-stream": "^1.0.1", + "node-fs-extra": "^0.8.2", + "require-dir": "^1.0.0", + "svg-sprite": "^1.4.0" + } +} diff --git a/build/task/js.js b/build/task/js.js new file mode 100644 index 0000000..58439ba --- /dev/null +++ b/build/task/js.js @@ -0,0 +1,51 @@ +const terser = require('gulp-terser'), + concat = require('gulp-concat'), + rename = require('gulp-rename'), + gulp = require('gulp'); + +const basePath = __dirname + '/../../raw/javascript/'; +const visualPath = basePath + 'visuals/'; +const visuals = [ + visualPath + 'sphere.js', + visualPath + 'wave.js', + visualPath + 'wave2d.js', + visualPath + 'water.js', + //visualPath + 'experimental.js', +] +const config = { + src: [ + basePath + 'utils.js', + basePath + 'gl/glUtils.js', + basePath + 'gl/Camera.js', + basePath + 'template.js', + basePath + 'gl/handler.js', + basePath + 'audio.js', + basePath + 'FileHandler.js', + basePath + 'FetchHandler.js', + basePath + 'playerConfigHandler.js', + basePath + 'player.js', + basePath + 'gui.js', + basePath + 'visual.js', + basePath + 'imageUploader.js', + basePath + 'notification.js', + basePath + 'config.js', + ...visuals, + basePath + 'eventHandler.js', + basePath + 'select.js', + basePath + 'keys.js', + basePath + 'startup.js', + basePath + 'app.js' + ], + dest: __dirname + '/../../out/js' +}; + +function build() { + return gulp.src(config.src) + .pipe(concat('scripts.js')) + .pipe(gulp.dest(config.dest)) + .pipe(rename('scripts.min.js')) + .pipe(terser().on('error', console.error)) + .pipe(gulp.dest(config.dest)); +} + +module.exports.build = build; diff --git a/build/task/jsonMinifier.js b/build/task/jsonMinifier.js new file mode 100644 index 0000000..ef6795c --- /dev/null +++ b/build/task/jsonMinifier.js @@ -0,0 +1,26 @@ +const gulp = require('gulp'), + fs = require('fs') + + +const basePath = __dirname + '/../../raw/gui/'; + +const config = { + src: basePath + '*.json', + dest: __dirname + '/../../out/gui/' +} + +function build() { + fs.readdirSync(basePath).forEach(file => { + try { + if (fs.lstatSync(basePath + file).isDirectory()) + return + let content = fs.readFileSync(basePath + file).toString() + fs.writeFileSync(config.dest + file, JSON.stringify(JSON.parse(content))) + } catch (e) { + console.error(e) + } + }) + return gulp.src(config.src) +} + +module.exports.build = build; \ No newline at end of file diff --git a/build/task/scss.js b/build/task/scss.js new file mode 100644 index 0000000..a52931b --- /dev/null +++ b/build/task/scss.js @@ -0,0 +1,17 @@ +const sass = require('gulp-sass'), + clean = require('gulp-clean-css'), + gulp = require('gulp'); + +const config = { + src: __dirname + '/../../raw/scss/**/*.scss', + dest: __dirname + '/../../out/theme' +}; + +function buildCSS() { + return gulp.src(config.src) + .pipe(sass().on('error', sass.logError)) + .pipe(clean()) + .pipe(gulp.dest(config.dest)); +} + +module.exports.buildCSS = buildCSS; diff --git a/build/task/spriteBuilder.js b/build/task/spriteBuilder.js new file mode 100644 index 0000000..5da45df --- /dev/null +++ b/build/task/spriteBuilder.js @@ -0,0 +1,106 @@ +const faSvgSprite = require('fontawesome-svg-sprite-generator'), + SVGSpriter = require('svg-sprite'), + path = require('path'), + fs = require('fs'), + fal = require('@fortawesome/pro-light-svg-icons'), + far = require('@fortawesome/pro-regular-svg-icons'), + fas = require('@fortawesome/pro-solid-svg-icons'), + fsextra = require('node-fs-extra'), + gulp = require('gulp'); + +let toMergeData = []; + +function buildIconSprites() { + let config = { + src: __dirname + '/../../raw/icons', + dest: __dirname + '/../../out/icon-sprite.svg', + spriter: { + shape: { + id: { + generator: function (name) { + return "vt-" + name.replace('.svg', ''); + } + } + }, + "svg": { + "xmlDeclaration": false, + "doctypeDeclaration": false + }, + "mode": { + "symbol": true + } + } + }; + + let icons = { + fa: [ + fal.faPlay, + fal.faPause, + fal.faCaretRight, + fal.faCaretLeft, + fal.faRandom, + fal.faCogs, + fal.faFolderUpload, + fal.faListMusic, + fal.faFileImage, + fal.faQuestionCircle, + ], + vt: [] + }; + + builder.init(config, icons); + builder.generateFontAwesome(); + builder.generateFromIcons(); + return gulp.src(config.src); +} + +let builder = { + init: function (config, icons) { + this.config = config; + this.icons = icons; + }, + + generateFontAwesome: function () { + let sprite = faSvgSprite.generate(this.icons.fa, {license: '', xmlDeclaration: false}); + toMergeData.push(sprite.svg); + }, + + generateFromIcons: function () { + builder.merge(); + }, + + merge: function () { + if (toMergeData.length === 0) { + return; + } + let data = ''; + for (let item of toMergeData) { + data += item.replace('', '').replace(/(]*)/g, ''); + } + data += ''; + + let dirname = path.dirname(builder.config.dest); + if (!fs.existsSync(dirname)) { + fsextra.mkdirpSync(dirname); + } + fs.writeFileSync(builder.config.dest, data); + }, + + readFiles: function (dir, spriter, icons) { + let files = fs.readdirSync(dir); + for (let file of files) { + let split = file.split('.'); + let suffix = split[split.length - 1]; + if (suffix === 'svg' && icons.indexOf('vt-' + split[0]) !== -1) { + let filePath = path.resolve(dir, file); + spriter.add( + filePath, + file, + fs.readFileSync(filePath, {encoding: 'utf-8'}) + ); + } + } + } +}; + +module.exports.buildIconSprites = buildIconSprites; diff --git a/build/task/worker.js b/build/task/worker.js new file mode 100644 index 0000000..cbd2ba9 --- /dev/null +++ b/build/task/worker.js @@ -0,0 +1,26 @@ +const terser = require('gulp-terser'), + concat = require('gulp-concat'), + rename = require('gulp-rename'), + gulp = require('gulp'); + +const basePath = __dirname + '/../../raw/worker/'; +const config = { + src: [ + basePath + 'eventHandler.js', + basePath + 'database.js', + basePath + 'id3.js', + basePath + 'app.js', + ], + dest: __dirname + '/../../out/js' +}; + +function build() { + return gulp.src(config.src) + .pipe(concat('worker.js')) + .pipe(gulp.dest(config.dest)) + .pipe(rename('worker.min.js')) + .pipe(terser()) + .pipe(gulp.dest(config.dest)); +} + +module.exports.build = build; diff --git a/empty.txt b/empty.txt new file mode 100644 index 0000000..e69de29 diff --git a/favicon.ico b/favicon.ico new file mode 100755 index 0000000..07f434f Binary files /dev/null and b/favicon.ico differ diff --git a/favicon/android-chrome-192x192.png b/favicon/android-chrome-192x192.png new file mode 100755 index 0000000..e4bdf6a Binary files /dev/null and b/favicon/android-chrome-192x192.png differ diff --git a/favicon/android-chrome-512x512.png b/favicon/android-chrome-512x512.png new file mode 100755 index 0000000..ffd7250 Binary files /dev/null and b/favicon/android-chrome-512x512.png differ diff --git a/favicon/apple-touch-icon.png b/favicon/apple-touch-icon.png new file mode 100755 index 0000000..aea74d1 Binary files /dev/null and b/favicon/apple-touch-icon.png differ diff --git a/favicon/favicon-16x16.png b/favicon/favicon-16x16.png new file mode 100755 index 0000000..66f2fc6 Binary files /dev/null and b/favicon/favicon-16x16.png differ diff --git a/favicon/favicon-32x32.png b/favicon/favicon-32x32.png new file mode 100755 index 0000000..eef4bd3 Binary files /dev/null and b/favicon/favicon-32x32.png differ diff --git a/favicon/mstile-150x150.png b/favicon/mstile-150x150.png new file mode 100755 index 0000000..15642f9 Binary files /dev/null and b/favicon/mstile-150x150.png differ diff --git a/favicon/safari-pinned-tab.svg b/favicon/safari-pinned-tab.svg new file mode 100755 index 0000000..7ed8f16 --- /dev/null +++ b/favicon/safari-pinned-tab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 4e1c80a..af4f46a 100644 --- a/index.html +++ b/index.html @@ -2,33 +2,109 @@ - WEBGL Test - + + + + + + + + + + + VIS3D + - -
- - Rotation - - - Transform - - - Color - - - World - - - Draw - +
+ + + Loading
-
☰
- - - - - +
+
+
+ + + +
+
+ + + +
+
+ + +
+
+ + + +
+
+ + + +
+
+
+ + + + +
+
+ + +
+ +
+
+ +
+ diff --git a/js/handler.js b/js/handler.js index b68f701..884a547 100644 --- a/js/handler.js +++ b/js/handler.js @@ -80,4 +80,13 @@ class Shaders { getProgram(name) { return this.programs[name]; } + + async loadArray(list, path) { + let self = this; + for (const e of list) { + await self.loadShader(e, path) + } + await self.createProgramForEach(list) + return true; + } } \ No newline at end of file diff --git a/js/index.js b/js/index.js index 2be60e4..95b4392 100644 --- a/js/index.js +++ b/js/index.js @@ -1,22 +1,35 @@ -let shaderHandler, gl, c, actx, analyser, peak; -let positionData = []; -let positionSize = 8192 * 2 * 2; +let shaderHandler, gl, c, actx, analyser, peak, isInit = false; -function createAudioContextStream(stream) { +function createAudioContextStream(audio) { let AudioContext = window.AudioContext || window.webkitAudioContext; if (actx) { actx.close(); } actx = new AudioContext(); analyser = actx.createAnalyser(); + let MEDIA_ELEMENT_NODES = new WeakMap(); let Source; analyser.fftSize = 4096; analyser.maxDecibels = 0; analyser.smoothingTimeConstant = .4; - Source = actx.createMediaStreamSource(stream); + if (audio) { + if (MEDIA_ELEMENT_NODES.has(audio)) { + Source = MEDIA_ELEMENT_NODES.get(audio); + } else { + Source = actx.createMediaElementSource(audio); + MEDIA_ELEMENT_NODES.set(audio, Source); + } - Source.connect(analyser); + Source.connect(analyser); + analyser.connect(actx.destination); + audio.oncanplay = () => { + actx.resume(); + }; + audio.onended = function () { + actx.pause(); + }; + } return null; } @@ -28,26 +41,38 @@ async function init() { return false; } shaderHandler = new Shaders(gl); - await shaderHandler.loadShader("test", "shaders/"); + await shaderHandler.loadShader("wave", "shaders/"); //sphere shader await shaderHandler.loadShader("sphere", "shaders/", gl.VERTEX_SHADER); - return shaderHandler.createProgramForEach(["test", "sphere"]); + return shaderHandler.createProgramForEach(["wave", "sphere"]); } -(function () { - navigator.mediaDevices.getUserMedia({audio: true, video: false}) - .then(createAudioContextStream).then(e => { - generateRotationSliders(); - generateColorSliders(); - generateWorldSliders(); - generateDrawSliders(); - generateTranslateSliders(); +function createView() { + if (!isInit) { + createAudioContextStream(audioFile); init().then(b => { if (b) { - sphereObject.drawMode = gl.POINTS; + loadConfig(); draw(); } }) - }); -})(); \ No newline at end of file + isInit = true; + } +} + +function initGUI() { + generateRotationSliders(); + generateColorSliders(); + generateWorldSliders(); + generateDrawSliders(); + generateTranslateSliders(); +} + +(function () { + if (document.readyState === "complete" || document.readyState === "interactive") { + initGUI() + } else { + document.addEventListener('DOMContentLoaded', initGUI); + } +})() \ No newline at end of file diff --git a/js/old.js b/js/old.js deleted file mode 100644 index ac3b912..0000000 --- a/js/old.js +++ /dev/null @@ -1,88 +0,0 @@ -function readData() { - let items = analyser.fftSize; - let dataArray = new Float32Array(items); - analyser.getFloatTimeDomainData(dataArray); - let space = 255 / (items + 2); - let pos = [0, 127.5]; - let x = space; - peak = 0; - for (let i = 0; i < items; i++) { - let data = (dataArray[i] * 125) + 127.5 - if (Math.abs(data) > peak) { - peak = data; - } - pos.push(x); - pos.push(data); - x += space; - } - pos.push(255, 127.5); - positions = pos; -} - -let positions = [ - Math.random(), Math.random(), - Math.random(), Math.random(), - Math.random(), Math.random(), -]; - -/*function draw() { - readData(); - let program = shaderHandler.getProgram("test"); - let positionAttributeLocation = gl.getAttribLocation(program, "a_position"); - var colorLocation = gl.getUniformLocation(program, "u_color"); - let positionBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW); - let vao = gl.createVertexArray(); - gl.bindVertexArray(vao); - gl.enableVertexAttribArray(positionAttributeLocation); - gl.vertexAttribPointer( - positionAttributeLocation, 2, gl.FLOAT, false, 0, 0); - gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); - - gl.clearColor(0, 0, 0, 1); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.useProgram(program); - gl.uniform4f(colorLocation, peak / 255, (255 - peak) / 255, .2, 1); - gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2); - - let positionBuffer2 = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer2); - gl.uniform4f(colorLocation, 0, 0, 1, .3); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.DYNAMIC_DRAW); - gl.drawArrays(gl.POINTS, 0, positions.length / 2); - - requestAnimationFrame(draw); -}*/ - -function setupSphere() { - sphereData = []; - let data = readData(), - radData = data[0]; - let sin = Math.sin, - cos = Math.cos, - total = sphereObject.total || 50, - cTotal = (total + 1) * (total + 1), - r = sphereObject.radius || 1000, - rx = r / c.width, - ry = r / c.height, - counter = 0; - for (let i = 1; i <= total; i++) { - let lat = VTUtils.map(i, 0, total, 0, Math.PI, false); - for (let j = 1; j <= total; j++) { - let lon = VTUtils.map(j, 0, total, 0, Math.TWO_PI, false); - let map = VTUtils.map(counter, 0, cTotal, 0, radData.length - 1, false); - map = Math.floor(map); - let realRX = rx + radData[map]; - let realRY = ry + radData[map]; - let x = rx * sin(lon) * cos(lat); - let y = rx * sin(lon) * sin(lat); - let z = ry * cos(lon); - sphereData.push(x); - sphereData.push(y); - sphereData.push(z); - counter++; - } - } - return [VTUtils.hsvToRgb(data[1], 1, 1), data[1]]; -} diff --git a/js/sphere.js b/js/sphere.js index b83985e..a27d272 100644 --- a/js/sphere.js +++ b/js/sphere.js @@ -7,20 +7,21 @@ let sphereObject = { rotation: [0, 0, 0], //radians rotateInc: [0.0, 0.0, 0.0], //degreesInc rotateByBeat: true, - translate: [1, 1, 1], + translate: [0, 0, 0], total: 50, radius: 500, color: {r: 0, g: 0, b: 0}, colorByBeat: true, - drawMode: 0, + drawMode: 5, sphereMode: 0, lightPos: [0, 0, 0], pointSize: 2, steps: 512, - dirtyMode: false + dirtyMode: false, + light: 0.3 } -function readData() { +function readDataBar() { let items = sphereObject.steps; let dataArray = new Uint8Array(items); analyser.getByteFrequencyData(dataArray); @@ -36,6 +37,7 @@ function readData() { let sphereDataVectors = [], lastTotal = 0; +// avoid garbage collection each run function prepareData() { let total = sphereObject.total; if (lastTotal !== total) { @@ -52,7 +54,7 @@ function prepareData() { function setupSphere() { sphereData = []; - let data = readData(), + let data = readDataBar(), radData = data[0], map = VTUtils.map, total = sphereObject.total, @@ -94,14 +96,21 @@ function setupSphere() { function getAddRad(counter, data, total) { let mapping, rAdd, map = VTUtils.map; + let h = total / 2; if (sphereObject.sphereMode === 3) { - let h = total / 2; if (counter > h) { mapping = map(counter, h, total, data.length - 1, 0); } else { mapping = map(counter, 0, h, 0, data.length - 1); } rAdd = data[Math.round(mapping)] || 0; + } else if (sphereObject.sphereMode === 4) { + if (counter > h) { + mapping = map(counter, h, total, 0, data.length - 1); + } else { + mapping = map(counter, 0, h, data.length - 1, 0); + } + rAdd = data[Math.round(mapping)] || 0; } else { mapping = map(counter, 0, total, 0, data.length - 1); rAdd = data[Math.round(mapping)] || 0; @@ -109,18 +118,16 @@ function getAddRad(counter, data, total) { return rAdd; } -let position, world, color, rotate, light, lightPos, lightAngle = 90; +let position, color, rotate, light, lightPos; function prepare(program) { position = gl.getAttribLocation(program, "a_position"); - world = gl.getUniformLocation(program, 'u_world'); color = gl.getUniformLocation(program, "u_color"); light = gl.getUniformLocation(program, "u_light"); rotate = gl.getUniformLocation(program, "u_matrix"); lightPos = gl.getUniformLocation(program, "u_lightPos"); let pointSize = gl.getUniformLocation(program, "u_pointSize"); - gl.uniformMatrix4fv(world, false, TDUtils.yRotation(TDUtils.degToRad(lightAngle))); - gl.uniform3fv(light, [0.95, 0.62, 0.094]); + gl.uniform3fv(light, [sphereObject.light, 0, 0]); gl.uniform3fv(lightPos, sphereObject.lightPos); gl.uniform1f(pointSize, sphereObject.pointSize); } @@ -135,16 +142,15 @@ function draw() { gl.useProgram(program); prepare(program); let matrix = [ - sphereObject.translate[0] / aspect, 0, 0, 0, - 0, sphereObject.translate[1], 0, 0, - 0, 0, sphereObject.translate[2], 0, - 0, 0, 0, 1 + 1 / aspect, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + sphereObject.translate[0], sphereObject.translate[1], sphereObject.translate[2], 1 ] matrix = TDUtils.multiply(matrix, TDUtils.xRotation(sphereObject.rotation[0])); matrix = TDUtils.multiply(matrix, TDUtils.yRotation(sphereObject.rotation[1])); matrix = TDUtils.multiply(matrix, TDUtils.zRotation(sphereObject.rotation[2])); gl.uniformMatrix4fv(rotate, false, matrix); - let positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(sphereData), gl.DYNAMIC_DRAW); @@ -152,7 +158,6 @@ function draw() { gl.bindVertexArray(vao); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); - gl.clearColor(0, 0, 0, 1); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); @@ -186,12 +191,6 @@ function sphereMode(lat, lon, i, counter, rx, ry) { sin = Math.sin, cos = Math.cos; switch (sphereObject.sphereMode) { - case 0: - case 3: - x = rx * sin(lat) * cos(lon); - y = ry * sin(lat) * sin(lon); - z = ry * cos(lat); - break; case 1: x = rx * sin(lon) * cos(lat); y = ry * sin(lon) * sin(lat); @@ -202,6 +201,11 @@ function sphereMode(lat, lon, i, counter, rx, ry) { y = ry * sin(lat) * sin(lat); z = ry * cos(lon); break; + default: + x = rx * sin(lat) * cos(lon); + y = ry * sin(lat) * sin(lon); + z = ry * cos(lat); + break; } return {x: x, y: y, z: z}; } \ No newline at end of file diff --git a/js/utils.js b/js/utils.js index 68e1886..e5aa86e 100644 --- a/js/utils.js +++ b/js/utils.js @@ -131,7 +131,7 @@ class VTVector { this.z += z; } - setXYZ(x,y,z) { + setXYZ(x, y, z) { this.x = x || 0; this.y = y || 0; this.z = z || 0; @@ -196,9 +196,10 @@ class TDUtils { return dst; } - static xRotation(angleInRadians) { - let c = Math.cos(angleInRadians); - let s = Math.sin(angleInRadians); + static xRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); return [ 1, 0, 0, 0, @@ -208,9 +209,10 @@ class TDUtils { ]; } - static yRotation(angleInRadians) { - let c = Math.cos(angleInRadians); - let s = Math.sin(angleInRadians); + static yRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); return [ c, 0, -s, 0, @@ -220,9 +222,10 @@ class TDUtils { ]; } - static zRotation(angleInRadians) { - let c = Math.cos(angleInRadians); - let s = Math.sin(angleInRadians); + static zRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); return [ c, s, 0, 0, @@ -236,3 +239,40 @@ class TDUtils { return d * Math.PI / 180; } } + +function $(sel, s) { + return $$(sel, s)[0]; +} + +function $$(sel, s) { + s = s || document; + return s.querySelectorAll(sel); +} + +Node.prototype.addDelegatedEventListener = function (type, aim, cb) { + this.addEventListener(type, (event) => { + let target = event.target; + if (target.matches(aim)) { + cb(event, target); + } else { + let parent = target.closest(aim); + if (parent) { + cb(event, parent); + } + } + }) +}; + +function create(name, content) { + let d = document.createElement(name); + if (content) { + d.innerHTML = content; + } + return d; +} + +function append(to, array) { + for (let item in array) { + to.appendChild(array[item]); + } +} \ No newline at end of file diff --git a/js/gui.js b/js/visualGUI.js similarity index 72% rename from js/gui.js rename to js/visualGUI.js index a16a30e..a98be8b 100644 --- a/js/gui.js +++ b/js/visualGUI.js @@ -1,40 +1,3 @@ -function $(sel, s) { - return $$(sel, s)[0]; -} - -function $$(sel, s) { - s = s || document; - return s.querySelectorAll(sel); -} - -Node.prototype.addDelegatedEventListener = function (type, aim, cb) { - this.addEventListener(type, (event) => { - let target = event.target; - if (target.matches(aim)) { - cb(event, target); - } else { - let parent = target.closest(aim); - if (parent) { - cb(event, parent); - } - } - }) -}; - -function create(name, content) { - let d = document.createElement(name); - if (content) { - d.innerHTML = content; - } - return d; -} - -function append(to, array) { - for (let item in array) { - to.appendChild(array[item]); - } -} - function generateRotationSliders() { let group = $('#rotate'); generateSlider(["X", "Y", "Z", "X-Inc", "Y-Inc", "Z-Inc"], 0, 360, 0, group, "rotate"); @@ -43,7 +6,7 @@ function generateRotationSliders() { function generateTranslateSliders() { let group = $('#translate'); - generateSlider(["X", "Y", "Z"], -1, 1, 1, group, "translate"); + generateSlider(["X", "Y", "Z"], -1, 1, 0, group, "translate"); } function generateColorSliders() { @@ -54,20 +17,20 @@ function generateColorSliders() { function generateWorldSliders() { let group = $('#world'); - generateSlider(["LightPos-X", "LightPos-Y", "LightPos-Z"], -1, 1, 1, group, "light"); - generateSlider(["LightAngle"], 0, 360, 90, group, "light"); + generateSlider(["LightPos-X", "LightPos-Y", "LightPos-Z"], -100, 100, 0, group, "light"); + generateSlider(["Light"], 0, 1, 0.3, group, "light"); } function generateDrawSliders() { let group = $('#draw'), g = "drawMode" generateSlider(["DrawMode"], 0, 6, 0, group, g); - generateSlider(["Form"], 0, 3, 0, group, g); + generateSlider(["Form"], 0, 4, 0, group, g); generateSlider(["Radius"], 20, 1500, 500, group, g); - generateSlider(["Total"], 0, 200, 50, group, g); + generateSlider(["Total"], 20, 250, 50, group, g); generateSlider(["PointSize"], 1, 10, 2, group, g, .2); - generateSlider(["Smoothing"], 0, 1, 0.8, group, g, .05); - generateSlider(["Steps"], 512, analyser.fftSize / 2, 512, group, g, 256); + generateSlider(["Smoothing"], 0, 100, 80, group, g, 1); + generateSlider(["Steps"], 256, 2048, 512, group, g, 16); generateCheckBox(["Dirty"], false, group, g) } @@ -102,11 +65,10 @@ function setColors() { function setWorld() { let group = $('#world'); - sphereObject.lightPos[0] = getValue($('#LightPos-X', group)) * 0.2; - sphereObject.lightPos[1] = getValue($('#LightPos-Y', group)) * 0.2; - sphereObject.lightPos[2] = getValue($('#LightPos-Z', group)) * 0.2; - - lightAngle = getValue($('#LightAngle', group)) + sphereObject.lightPos[0] = getValue($('#LightPos-X', group)); + sphereObject.lightPos[1] = getValue($('#LightPos-Y', group)); + sphereObject.lightPos[2] = getValue($('#LightPos-Z', group)); + sphereObject.light = getValue($('#Light', group)); } function setDraw() { @@ -118,7 +80,7 @@ function setDraw() { sphereObject.pointSize = getValue($('#PointSize', group)); sphereObject.steps = getValue($('#Steps', group)); sphereObject.dirtyMode = $('#drawModeDirty', group).checked; - analyser.smoothingTimeConstant = getValue($('#Smoothing', group)); + analyser.smoothingTimeConstant = getValue($('#Smoothing', group)) / 100; } function setTranslate() { @@ -183,6 +145,7 @@ function changeHandler(el) { } else if (d === "drawMode") { setDraw(); } + saveConfig(); } document.body.addDelegatedEventListener('input', 'group-input input', (ev, el) => { @@ -205,4 +168,60 @@ function getValue(slider) { $('.settings-icon').addEventListener('click', function () { $('.off-can').classList.toggle("closed"); + $('.settings-icon').classList.toggle("open"); +}) + +window.addEventListener('keyup', e => { + if (e.key === 'F11') { + c.requestFullscreen(); + return; + } + if (e.key === 'Escape') { + if (document.fullscreenElement) { + document.exitFullscreen().then(console.log); + } + } + if (e.key === 'p') { + audioFile.play(); + } + if (e.key === 's') { + audioFile.pause(); + } +}); + +function saveConfig() { + localStorage.setItem('config-sphere', JSON.stringify(sphereObject)); +} + +function loadConfig() { + let item = localStorage.getItem('config-sphere'); + if (item && item !== "") { + sphereObject = JSON.parse(item); + } +} + +let uploadField = $('#upload'); +let audioFile = new Audio(); +let lastSong = null; +uploadField.addEventListener('change', e => { + let file = uploadField.files[0]; + if (file && file.type.indexOf('audio') !== -1 && file.name.match(".m3u") === null && file.name.match(".wma") === null) { + if (lastSong) { + URL.revokeObjectURL(lastSong); + } + audioFile.src = URL.createObjectURL(file); + document.title = file.name; + lastSong = audioFile.src; + createView(); + } +}) + +$('#play').addEventListener('click', e => { + if (audioFile.src !== "") { + c.requestFullscreen().then(r => { + setTimeout(x => { + audioFile.play(); + }, 1000) + }); + } }) \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100755 index 0000000..b66eddf --- /dev/null +++ b/manifest.json @@ -0,0 +1,21 @@ +{ + "name": "VIS3D by VersusTuneZ", + "short_name": "VIS3D", + "icons": [ + { + "src": "/favicon/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/favicon/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#3949ab", + "background_color": "#212121", + "display": "standalone", + "start_url": "/index.html", + "orientation": "landscape-primary" +} diff --git a/out/gui/.gitkeep b/out/gui/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/out/gui/base.json b/out/gui/base.json new file mode 100644 index 0000000..179f195 --- /dev/null +++ b/out/gui/base.json @@ -0,0 +1 @@ +[{"group":"","name":"showSeekbar","showName":"Show Seekbar","type":"checkbox","value":true,"tooltip":"Showing SeekBar at the Bottom of the Screen"},{"group":"","name":"showPlaying","showName":"Show Playing","type":"checkbox","value":true,"tooltip":"Showing \"Now Playing\" Notification"},{"group":"","name":"showPlayingTime","showName":"Now Playing Display Time","type":"slider","value":1000,"max":5000,"min":500,"tooltip":"How long should the Now Playing Notification shown","stepSize":100,"dataType":"int"},{"group":"","name":"seekColor","showName":"SeekBar Color","type":"color","value":"#ffffff","dataType":"rgb","tooltip":"SeekBar Color!"}] \ No newline at end of file diff --git a/out/gui/sphere.json b/out/gui/sphere.json new file mode 100644 index 0000000..3f41f2e --- /dev/null +++ b/out/gui/sphere.json @@ -0,0 +1 @@ +[{"group":"rotation","name":["X","Y","Z"],"props":[0,1,2],"type":"slider","max":360,"min":0},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":[0,1,2],"type":"slider","max":1,"min":0,"stepSize":0.01},{"group":"rotation","name":"by-Beat","type":"checkbox","value":true,"tooltip":"Rotate the Sphere based by Beat
Low-Freq = Y, Mid-Freq = Z, High-Freq = X"},{"group":"color","name":["R","G","B"],"props":["r","g","b"],"type":"slider","max":255,"min":0,"value":255},{"group":"light","name":["X","Y","Z"],"props":[0,1,2],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.1},{"group":"light","name":"Light","type":"slider","max":1,"min":0,"stepSize":0.05},{"group":"color","name":"by-Beat","type":"checkbox","value":true,"tooltip":"Draw The Color Strength based on the Low-Freq"},{"group":"draw","name":"DrawMode","type":"slider","max":6,"min":0},{"group":"draw","name":"Form","type":"slider","max":4,"min":0},{"group":"draw","name":"Radius","type":"slider","max":1500,"min":20},{"group":"draw","name":"Total","type":"slider","max":200,"min":20},{"group":"draw","name":"PointSize","type":"slider","max":10,"min":1,"stepSize":0.2},{"group":"draw","name":"Dirty","type":"checkbox","value":false,"tooltip":"Full Draw or with less Points"}] \ No newline at end of file diff --git a/out/gui/wave.json b/out/gui/wave.json new file mode 100644 index 0000000..970e15b --- /dev/null +++ b/out/gui/wave.json @@ -0,0 +1 @@ +[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384],"value":4096,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"light","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":100,"min":-100,"value":0,"dataType":"int"},{"group":"light","name":"light-strength","showName":"Light Brightness","type":"slider","value":0.3,"max":1,"min":0,"stepSize":0.05,"tooltip":"brightness of light-point","dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}] \ No newline at end of file diff --git a/out/gui/wave2d.json b/out/gui/wave2d.json new file mode 100644 index 0000000..3727c67 --- /dev/null +++ b/out/gui/wave2d.json @@ -0,0 +1 @@ +[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384,32768],"value":16384,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"translate","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"","name":"fudgeFactor","showName":"Fudge Factor","type":"slider","value":1,"max":2,"min":0,"tooltip":"z to w Fudge","stepSize":0.1,"dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}] \ No newline at end of file diff --git a/out/icon-sprite.svg b/out/icon-sprite.svg new file mode 100644 index 0000000..cac5044 --- /dev/null +++ b/out/icon-sprite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/out/js/jsmediatags.min.js b/out/js/jsmediatags.min.js new file mode 100755 index 0000000..03dc4c8 --- /dev/null +++ b/out/js/jsmediatags.min.js @@ -0,0 +1,85 @@ +(function(y){"object"===typeof exports&&"undefined"!==typeof module?module.exports=y():"function"===typeof define&&define.amd?define([],y):("undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:this).jsmediatags=y()})(function(){return function f(p,q,m){function l(c,a){if(!q[c]){if(!p[c]){var b="function"==typeof require&&require;if(!a&&b)return b(c,!0);if(e)return e(c,!0);a=Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a;}a=q[c]= +{exports:{}};p[c][0].call(a.exports,function(a){var b=p[c][1][a];return l(b?b:a)},a,a.exports,f,p,q,m)}return q[c].exports}for(var e="function"==typeof require&&require,d=0;d=this._array.length)throw Error("Offset "+c+" hasn't been loaded yet.");return this._array[c]}}],[{key:"canReadFile",value:function(c){return Array.isArray(c)|| +"function"===typeof Buffer&&Buffer.isBuffer(c)}}]);return d}(f("./MediaFileReader"));p.exports=f},{"./MediaFileReader":11}],4:[function(f,p,q){function m(d,c){if("function"!==typeof c&&null!==c)throw new TypeError("Super expression must either be null or a function, not "+typeof c);d.prototype=Object.create(c&&c.prototype,{constructor:{value:d,enumerable:!1,writable:!0,configurable:!0}});c&&(Object.setPrototypeOf?Object.setPrototypeOf(d,c):d.__proto__=c)}var l=function(){function d(c,a){for(var b= +0;bb.offset&&(e=this._sliceData(b.data,0,e-b.offset),h.data=this._concatData(e,d));c&&(e=this._sliceData(h.data,0,g.offset-h.offset),h.data=this._concatData(e,g.data));this._fileData.splice(a.startIx,a.endIx-a.startIx+1,h)}}},{key:"_concatData",value:function(e,d){if("undefined"!==typeof ArrayBuffer&&ArrayBuffer.isView&&ArrayBuffer.isView(e)){var c=new e.constructor(e.length+d.length);c.set(e,0);c.set(d,e.length);return c}return e.concat(d)}},{key:"_sliceData", +value:function(e,d,c){return e.slice?e.slice(d,c):e.subarray(d,c)}},{key:"_getChunkRange",value:function(e,d){for(var c,a,b=-1,g=-1,h=0,k=0;k=a-1){b=k;break}}if(-1===b)return{startIx:-1,endIx:-1,insertIx:h};for(k=b;k=a-1&&(g=k),d<=c+1);k++);-1===g&&(g=b);return{startIx:b,endIx:g}}},{key:"hasDataRange", +value:function(e,d){for(var c=0;c=a.offset&&d=a&&e<=b){d=this._fileData[c];break}}if(d)return d.data[e-d.offset];throw Error("Offset "+e+" hasn't been loaded yet.");}}]);return f}();p.exports=f},{}],6:[function(f,p,q){function m(a, +b){if("function"!==typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function, not "+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}});b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var l=function(){function a(a,c){for(var b=0;ba?e[a]:""}};b&&(a.tags.track=b);return a}}],[{key:"getTagIdentifierByteRange",value:function(){return{offset:-128,length:128}}},{key:"canReadTagFormat",value:function(a){return"TAG"===String.fromCharCode.apply(String,a.slice(0,3))}}]);return c}(q);var e="Blues;Classic Rock;Country;Dance;Disco;Funk;Grunge;Hip-Hop;Jazz;Metal;New Age;Oldies;Other;Pop;R&B;Rap;Reggae;Rock;Techno;Industrial;Alternative;Ska;Death Metal;Pranks;Soundtrack;Euro-Techno;Ambient;Trip-Hop;Vocal;Jazz+Funk;Fusion;Trance;Classical;Instrumental;Acid;House;Game;Sound Clip;Gospel;Noise;AlternRock;Bass;Soul;Punk;Space;Meditative;Instrumental Pop;Instrumental Rock;Ethnic;Gothic;Darkwave;Techno-Industrial;Electronic;Pop-Folk;Eurodance;Dream;Southern Rock;Comedy;Cult;Gangsta;Top 40;Christian Rap;Pop/Funk;Jungle;Native American;Cabaret;New Wave;Psychadelic;Rave;Showtunes;Trailer;Lo-Fi;Tribal;Acid Punk;Acid Jazz;Polka;Retro;Musical;Rock & Roll;Hard Rock;Folk;Folk-Rock;National Folk;Swing;Fast Fusion;Bebob;Latin;Revival;Celtic;Bluegrass;Avantgarde;Gothic Rock;Progressive Rock;Psychedelic Rock;Symphonic Rock;Slow Rock;Big Band;Chorus;Easy Listening;Acoustic;Humour;Speech;Chanson;Opera;Chamber Music;Sonata;Symphony;Booty Bass;Primus;Porn Groove;Satire;Slow Jam;Club;Tango;Samba;Folklore;Ballad;Power Ballad;Rhythmic Soul;Freestyle;Duet;Punk Rock;Drum Solo;Acapella;Euro-House;Dance Hall".split(";"); +p.exports=f},{"./MediaFileReader":11,"./MediaTagReader":12}],8:[function(f,p,q){function m(a){switch(a){case 0:a="iso-8859-1";break;case 1:a="utf-16";break;case 2:a="utf-16be";break;case 3:a="utf-8";break;default:a="iso-8859-1"}return a}function l(a,b,d,c){c=d.getStringWithCharsetAt(a+1,b-1,c);a=d.getStringWithCharsetAt(a+1+c.bytesReadCount,b-1-c.bytesReadCount);return{user_description:c.toString(),data:a.toString()}}var e=function(){function a(a,b){for(var d=0;d2.4",tags:{}};var l=a.getByteAt(g+4),m=a.isBitSetAt(g+5,7),n=a.isBitSetAt(g+5,6),x=a.isBitSetAt(g+5,5),p=a.getSynchsafeInteger32At(g+6);g+=10;if(n)if(4===f){var t=a.getSynchsafeInteger32At(g); +g+=t}else t=a.getLongAt(g,!0),g+=t+4;t={type:"ID3",version:"2."+f+"."+l,major:f,revision:l,flags:{unsynchronisation:m,extended_header:n,experimental_indicator:x,footer_present:!1},size:p,tags:{}};c&&(b=this._expandShortcutTags(c));c=p+10;t.flags.unsynchronisation&&(a=e.getUnsyncFileReader(a,g,p),g=0,c=a.getSize());a=e.readFrames(g,c,a,t,b);for(var q in d)d.hasOwnProperty(q)&&(b=this._getFrameData(a,d[q]))&&(t.tags[q]=b);for(var z in a)a.hasOwnProperty(z)&&(t.tags[z]=a[z]);return t}},{key:"_getFrameData", +value:function(a,c){for(var b=0,d;d=c[b];b++)if(d in a)return a=a[d]instanceof Array?a[d][0]:a[d],a.data}},{key:"getShortcuts",value:function(){return d}}],[{key:"getTagIdentifierByteRange",value:function(){return{offset:0,length:10}}},{key:"canReadTagFormat",value:function(a){return"ID3"===String.fromCharCode.apply(String,a.slice(0,3))}}]);return a}(q);var d={title:["TIT2","TT2"],artist:["TPE1","TP1"],album:["TALB","TAL"],year:["TYER","TYE"],comment:["COMM","COM"],track:["TRCK","TRK"],genre:["TCON", +"TCO"],picture:["APIC","PIC"],lyrics:["USLT","ULT"]};p.exports=f},{"./ID3v2FrameReader":8,"./MediaFileReader":11,"./MediaTagReader":12}],10:[function(f,p,q){function m(a,b){if("function"!==typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function, not "+typeof b);a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}});b&&(Object.setPrototypeOf?Object.setPrototypeOf(a,b):a.__proto__=b)}var l=function(){function a(a, +c){for(var b=0;b=a.getSize())d.onSuccess();else{var g=this,e=a.getLongAt(b,!0);if(0==e||isNaN(e))d.onSuccess();else{var h=a.getStringAt(b+4,4);if(this._isContainerAtom(h)){"meta"==h&&(b+=4);var f=(c?c+".":"")+h;"moov.udta.meta.ilst"===f?a.loadRange([b,b+e],d):a.loadRange([b+ +8,b+8+8],{onSuccess:function(){g._loadAtom(a,b+8,f,d)},onError:d.onError})}else a.loadRange([b+e,b+e+8],{onSuccess:function(){g._loadAtom(a,b+e,c,d)},onError:d.onError})}}}},{key:"_isContainerAtom",value:function(a){return 0<=["moov","udta","meta","ilst"].indexOf(a)}},{key:"_canReadAtom",value:function(a){return"----"!==a}},{key:"_parseData",value:function(a,b){var d={};b=this._expandShortcutTags(b);this._readAtom(d,a,0,a.getSize(),b);for(var e in c)c.hasOwnProperty(e)&&(b=d[c[e]])&&(d[e]="track"=== +e?b.data.track:b.data);return{type:"MP4",ftyp:a.getStringAt(8,4),version:a.getLongAt(12,!0),tags:d}}},{key:"_readAtom",value:function(a,b,d,c,e,f,n){n=void 0===n?"":n+" ";for(var g=d;gd&&(d+= +65536);return d}},{key:"getSShortAt",value:function(d,c){d=this.getShortAt(d,c);return 32767c&&(c+=4294967296);return c}},{key:"getSLongAt",value:function(d,c){d=this.getLongAt(d,c);return 2147483647c&&(c+=16777216);return c}},{key:"getStringAt",value:function(d,c){for(var a=[],b=d,e=0;bf||224<=f?d[h]=String.fromCharCode(m):(f=(e[a+b]<<8)+e[a+g],a+=2,d[h]=String.fromCharCode(m,f))}return new l(d.join(""),a)},readUTF8String:function(e,d){var c=0;d=Math.min(d||e.length,e.length);239==e[0]&&187==e[1]&&191==e[2]&&(c=3);for(var a=[],b=0;cg)a[b]=String.fromCharCode(g);else if(194<=g&&224>g){var h=e[c++];a[b]=String.fromCharCode(((g&31)<<6)+(h&63))}else if(224<=g&&240>g){h=e[c++];var f=e[c++];a[b]=String.fromCharCode(((g& +255)<<12)+((h&63)<<6)+(f&63))}else if(240<=g&&245>g){h=e[c++];f=e[c++];var m=e[c++];f=((g&7)<<18)+((h&63)<<12)+((f&63)<<6)+(m&63)-65536;a[b]=String.fromCharCode((f>>10)+55296,(f&1023)+56320)}}return new l(a.join(""),c)},readNullTerminatedString:function(e,d){var c=[];d=d||e.length;for(var a=0;ac._config.disallowedXhrHeaders.indexOf(b.toLowerCase())&&a.setRequestHeader(b,d)}},{key:"_hasResponseHeader",value:function(a,b){a=a.getAllResponseHeaders();if(!a)return!1;a=a.split("\r\n");for(var c=[],d=0;da.offset&&(-a.offset>b||0=b||c)}var e=function(){function a(a,b){for(var c=0;cg.offset&&g.offset<-e/2?c.push(r[f]):d.push(r[f]))}var h=!1;f={onSuccess:function(){if(h){for(var c=0;c max) { + let tmp = min; + min = max; + max = tmp; + } + return rand * (max - min) + min; + } + }; + + static randomInt(min, max) { + return Math.floor(VTUtils.random(min, max)); + } + + static normalize(val, max, min) { + return (val - min) / (max - min); + }; + + static distance(x, y, x2, y2) { + let a = x - x2; + let b = y - y2; + + return Math.sqrt(a * a + b * b); + } + + static map(n, start1, stop1, start2, stop2, withinBounds) { + let newVal = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; + if (!withinBounds) { + return newVal; + } + if (start2 < stop2) { + return this.constrain(newVal, start2, stop2); + } else { + return this.constrain(newVal, stop2, start2); + } + }; + + static constrain(n, low, high) { + return Math.max(Math.min(n, high), low); + } + + static hsvToRgb(h, s, v) { + let r, g, b, + i = Math.floor(h * 6), + f = h * 6 - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i % 6) { + case 0: + r = v, g = t, b = p; + break; + case 1: + r = q, g = v, b = p; + break; + case 2: + r = p, g = v, b = t; + break; + case 3: + r = p, g = q, b = v; + break; + case 4: + r = t, g = p, b = v; + break; + case 5: + r = v, g = p, b = q; + break; + } + + return {r: r, g: g, b: b}; + } + + static peakRGB(peak) { + return { + r: peak, + g: 1 - peak, + b: 0 + }; + } +} + +class VTVector { + constructor(x, y, z) { + this.x = x || 0; + this.y = y || 0; + this.z = z || 0; + } + + //helper + static createRandom(x, y, z) { + x = x || 1; + y = y || 1; + z = z || 0; + return new VTVector(VTUtils.random(-x, x), VTUtils.random(-y, y), VTUtils.random(-z, z)); + } + + mult(times) { + this.x *= times; + this.y *= times; + this.z *= times; + } + + set(vector) { + this.x = vector.x; + this.y = vector.y; + this.z = vector.z; + } + + add(vector) { + this.x = this.x + vector.x; + this.y = this.y + vector.y; + this.z = this.z + vector.z; + } + + addXYZ(x, y, z) { + this.x += x; + this.y += y; + this.z += z; + } + + setXYZ(x, y, z) { + this.x = x || 0; + this.y = y || 0; + this.z = z || 0; + } + + clone() { + return new VTVector(this.x, this.y, this.z); + } +} + +function $(sel, s) { + s = s || document; + return s.querySelector(sel); +} + +function $$(sel, s) { + s = s || document; + return s.querySelectorAll(sel); +} + +Node.prototype.addDelegatedEventListener = function (type, aim, cb) { + this.addEventListener(type, (event) => { + let target = event.target; + if (target.matches(aim)) { + cb(event, target); + } else { + let parent = target.closest(aim); + if (parent) { + try { + cb(event, parent); + } catch (e) { + NotificationHandler.createNotification("FATAL ERROR WITHIN HANDLER!", "error", 1000); + //nothing! + } + } + } + }) +}; + +Node.prototype.hasClass = function (className) { + let items = className.split(','), + has = null; + for (let item of items) { + if (has === false) { + break; + } + has = this.classList.contains(item.trim()); + } + return has === true; +} +Node.prototype.addClass = function (className) { + let items = className.split(','); + for (let item of items) { + this.classList.add(item.trim()); + } + return this; +} +Node.prototype.removeClass = function (className) { + let items = className.split(','); + for (let item of items) { + this.classList.remove(item.trim()); + } + return this; +} +Node.prototype.toggleClass = function (className, force) { + let items = className.split(','); + for (let item of items) { + this.classList.toggle(item.trim(), force); + } +} +Node.prototype.switchClass = function (clOne, clTwo, twoOne) { + let cl = this.classList; + if (twoOne) { + cl.remove(clOne); + cl.add(clTwo) + } else { + cl.remove(clTwo) + cl.add(clOne) + } +} +Node.prototype.toggleCheck = function (className, force) { + let cl = this.classList; + let items = className.split(','); + for (let item of items) { + let clOne = item.trim(); + if (force) { + cl.add(clOne); + } else { + cl.remove(clOne) + } + } +} + +String.prototype.firstUpper = function () { + return this.charAt(0).toUpperCase() + this.slice(1); +} + +File.prototype.toBase64 = function (cb) { + const reader = new FileReader(); + reader.onloadend = cb; + reader.readAsDataURL(this); +} + +function b64toBlob(b64Data, type) { + const byteCharacters = atob(b64Data); + const byteNumbers = new Array(byteCharacters.length); + for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); + } + const byteArray = new Uint8Array(byteNumbers); + return new Blob([byteArray], {type: type}); +} + +function create(name, content) { + let d = document.createElement(name); + if (content) { + d.innerHTML = content; + } + return d; +} + +function append(to, array) { + for (let item of array) { + to.appendChild(item); + } +} + +function hexToRgb(hex) { + hex = hex.replace("#", ""); + let bigint = parseInt(hex, 16), + r = (bigint >> 16) & 255, + g = (bigint >> 8) & 255, + b = bigint & 255; + + return [r / 255, g / 255, b / 255]; +} +// most of the functions are from https://webglfundamentals.org/webgl/resources/m4.js! but i doesnt want to use them all and make some adjustment to them! +class TDUtils { + static lastMatrix = {m: null}; + + static multiply(a, b) { + let b00 = b[0]; + let b01 = b[1]; + let b02 = b[2]; + let b03 = b[3]; + let b10 = b[4]; + let b11 = b[5]; + let b12 = b[6]; + let b13 = b[7]; + let b20 = b[8]; + let b21 = b[9]; + let b22 = b[10]; + let b23 = b[11]; + let b30 = b[12]; + let b31 = b[13]; + let b32 = b[14]; + let b33 = b[15]; + let a00 = a[0]; + let a01 = a[1]; + let a02 = a[2]; + let a03 = a[3]; + let a10 = a[4]; + let a11 = a[5]; + let a12 = a[6]; + let a13 = a[7]; + let a20 = a[8]; + let a21 = a[9]; + let a22 = a[10]; + let a23 = a[11]; + let a30 = a[12]; + let a31 = a[13]; + let a32 = a[14]; + let a33 = a[15]; + return [ + b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30, + b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31, + b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32, + b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33, + b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30, + b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31, + b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32, + b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33, + b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30, + b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31, + b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32, + b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33, + b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30, + b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31, + b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32, + b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33 + ]; + } + + static translate(m, tx, ty, tz, dst) { + dst = dst || new Float32Array(16); + + let m00 = m[0], + m01 = m[1], + m02 = m[2], + m03 = m[3], + m10 = m[4], + m11 = m[5], + m12 = m[6], + m13 = m[7], + m20 = m[8], + m21 = m[9], + m22 = m[10], + m23 = m[11], + m30 = m[12], + m31 = m[13], + m32 = m[14], + m33 = m[15]; + dst[0] = m00; + dst[1] = m01; + dst[2] = m02; + dst[3] = m03; + dst[4] = m10; + dst[5] = m11; + dst[6] = m12; + dst[7] = m13; + dst[8] = m20; + dst[9] = m21; + dst[10] = m22; + dst[11] = m23; + + dst[12] = m00 * tx + m10 * ty + m20 * tz + m30; + dst[13] = m01 * tx + m11 * ty + m21 * tz + m31; + dst[14] = m02 * tx + m12 * ty + m22 * tz + m32; + dst[15] = m03 * tx + m13 * ty + m23 * tz + m33; + + return dst; + } + + static xRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + 1, 0, 0, 0, + 0, c, s, 0, + 0, -s, c, 0, + 0, 0, 0, 1, + ]; + } + + static yRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + c, 0, -s, 0, + 0, 1, 0, 0, + s, 0, c, 0, + 0, 0, 0, 1, + ]; + } + + static zRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + c, s, 0, 0, + -s, c, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1, + ]; + } + + static degToRad(d) { + return d * Math.PI / 180; + } + + static scale(sx, sy, sz, dst) { + dst = dst || new Float32Array(16); + dst[0] = sx; + dst[5] = sy; + dst[10] = sz; + return dst; + } + + static lookAt(cameraPosition, target, up, dst) { + dst = dst || new Float32Array(16); + let zAxis = TDUtils.normalize( + TDUtils.subtractVectors(cameraPosition, target)); + let xAxis = TDUtils.normalize(TDUtils.cross(up, zAxis)); + let yAxis = TDUtils.normalize(TDUtils.cross(zAxis, xAxis)); + + dst[0] = xAxis[0]; + dst[1] = xAxis[1]; + dst[2] = xAxis[2]; + dst[4] = yAxis[0]; + dst[5] = yAxis[1]; + dst[6] = yAxis[2]; + dst[8] = zAxis[0]; + dst[9] = zAxis[1]; + dst[10] = zAxis[2]; + dst[12] = cameraPosition[0]; + dst[13] = cameraPosition[1]; + dst[14] = cameraPosition[2]; + dst[15] = 1; + + return dst; + } + + static cross(a, b, dst) { + dst = dst || new Float32Array(3); + dst[0] = a[1] * b[2] - a[2] * b[1]; + dst[1] = a[2] * b[0] - a[0] * b[2]; + dst[2] = a[0] * b[1] - a[1] * b[0]; + return dst; + } + + static normalize(v, dst) { + dst = dst || new Float32Array(3); + let length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); + if (length > 0.00001) { + dst[0] = v[0] / length; + dst[1] = v[1] / length; + dst[2] = v[2] / length; + } + return dst; + } + + static subtractVectors(a, b, dst) { + dst = dst || new Float32Array(3); + dst[0] = a[0] - b[0]; + dst[1] = a[1] - b[1]; + dst[2] = a[2] - b[2]; + return dst; + } + + static perspective(fieldOfViewInRadians, aspect, near, far, dst) { + dst = dst || new Float32Array(16); + let f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians), + rangeInv = 1.0 / (near - far); + + dst[0] = f / aspect; + dst[5] = f; + dst[10] = (near + far) * rangeInv; + dst[11] = -1; + dst[14] = near * far * rangeInv * 2; + return dst; + } + + static projection(width, height, depth) { + return [ + 2 / width, 0, 0, 0, + 0, -2 / height, 0, 0, + 0, 0, 2 / depth, 0, + -1, 1, 0, 1, + ]; + } + + static inverse(m, dst) { + dst = dst || new Float32Array(16); + let m00 = m[0], + m01 = m[1], + m02 = m[2], + m03 = m[3], + m10 = m[4], + m11 = m[5], + m12 = m[6], + m13 = m[7], + m20 = m[8], + m21 = m[9], + m22 = m[10], + m23 = m[11], + m30 = m[12], + m31 = m[13], + m32 = m[14], + m33 = m[15], + tmp_0 = m22 * m33, + tmp_1 = m32 * m23, + tmp_2 = m12 * m33, + tmp_3 = m32 * m13, + tmp_4 = m12 * m23, + tmp_5 = m22 * m13, + tmp_6 = m02 * m33, + tmp_7 = m32 * m03, + tmp_8 = m02 * m23, + tmp_9 = m22 * m03, + tmp_10 = m02 * m13, + tmp_11 = m12 * m03, + tmp_12 = m20 * m31, + tmp_13 = m30 * m21, + tmp_14 = m10 * m31, + tmp_15 = m30 * m11, + tmp_16 = m10 * m21, + tmp_17 = m20 * m11, + tmp_18 = m00 * m31, + tmp_19 = m30 * m01, + tmp_20 = m00 * m21, + tmp_21 = m20 * m01, + tmp_22 = m00 * m11, + tmp_23 = m10 * m01, + + t0 = (tmp_0 * m11 + tmp_3 * m21 + tmp_4 * m31) - + (tmp_1 * m11 + tmp_2 * m21 + tmp_5 * m31), + t1 = (tmp_1 * m01 + tmp_6 * m21 + tmp_9 * m31) - + (tmp_0 * m01 + tmp_7 * m21 + tmp_8 * m31), + t2 = (tmp_2 * m01 + tmp_7 * m11 + tmp_10 * m31) - + (tmp_3 * m01 + tmp_6 * m11 + tmp_11 * m31), + t3 = (tmp_5 * m01 + tmp_8 * m11 + tmp_11 * m21) - + (tmp_4 * m01 + tmp_9 * m11 + tmp_10 * m21), + + d = 1.0 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3); + + dst[0] = d * t0; + dst[1] = d * t1; + dst[2] = d * t2; + dst[3] = d * t3; + dst[4] = d * ((tmp_1 * m10 + tmp_2 * m20 + tmp_5 * m30) - + (tmp_0 * m10 + tmp_3 * m20 + tmp_4 * m30)); + dst[5] = d * ((tmp_0 * m00 + tmp_7 * m20 + tmp_8 * m30) - + (tmp_1 * m00 + tmp_6 * m20 + tmp_9 * m30)); + dst[6] = d * ((tmp_3 * m00 + tmp_6 * m10 + tmp_11 * m30) - + (tmp_2 * m00 + tmp_7 * m10 + tmp_10 * m30)); + dst[7] = d * ((tmp_4 * m00 + tmp_9 * m10 + tmp_10 * m20) - + (tmp_5 * m00 + tmp_8 * m10 + tmp_11 * m20)); + dst[8] = d * ((tmp_12 * m13 + tmp_15 * m23 + tmp_16 * m33) - + (tmp_13 * m13 + tmp_14 * m23 + tmp_17 * m33)); + dst[9] = d * ((tmp_13 * m03 + tmp_18 * m23 + tmp_21 * m33) - + (tmp_12 * m03 + tmp_19 * m23 + tmp_20 * m33)); + dst[10] = d * ((tmp_14 * m03 + tmp_19 * m13 + tmp_22 * m33) - + (tmp_15 * m03 + tmp_18 * m13 + tmp_23 * m33)); + dst[11] = d * ((tmp_17 * m03 + tmp_20 * m13 + tmp_23 * m23) - + (tmp_16 * m03 + tmp_21 * m13 + tmp_22 * m23)); + dst[12] = d * ((tmp_14 * m22 + tmp_17 * m32 + tmp_13 * m12) - + (tmp_16 * m32 + tmp_12 * m12 + tmp_15 * m22)); + dst[13] = d * ((tmp_20 * m32 + tmp_12 * m02 + tmp_19 * m22) - + (tmp_18 * m22 + tmp_21 * m32 + tmp_13 * m02)); + dst[14] = d * ((tmp_18 * m12 + tmp_23 * m32 + tmp_15 * m02) - + (tmp_22 * m32 + tmp_14 * m02 + tmp_19 * m12)); + dst[15] = d * ((tmp_22 * m22 + tmp_16 * m02 + tmp_21 * m12) - + (tmp_20 * m12 + tmp_23 * m22 + tmp_17 * m02)); + + return dst; + } + + static aspectView(aspect) { + return [ + 1 / aspect, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ] + } + + static updateRotate(rotation, def) { + let value = vConf.get(rotation, def) + vConf.get(rotation + '-inc', 0) + if (value > 360) { + value -= 360; + } else if (value < -360) { + value += 360; + } + vConf.set(rotation, value); + } + + static makeZToWMatrix(fudgeFactor) { + return [ + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, fudgeFactor, + 0, 0, 0, 1, + ]; + } +} + +class GLHelper { + constructor(program) { + this.matrix = new Float32Array(16); + this.program = program; + } + + static uniform4fv(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform4fv(uniform, data); + } + + static uniform3fv(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform3fv(uniform, data); + } + + static uniform1f(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform1f(uniform, data); + } + + rotateX(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.xRotation(deg)); + } + + rotateY(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.yRotation(deg)); + } + + rotateZ(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.zRotation(deg)); + } + + scale(scaling) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.scale(scaling[0], scaling[1], scaling[2])) + } + + project(depth) { + depth = depth || (c.width > c.height) ? c.width : c.height; + this.matrix = TDUtils.projection(c.width, c.height, depth) + } + + translate(t) { + this.matrix = TDUtils.translate(this.matrix, t[0] || 0, t[1] || 0, t[2] || 0); + } + + addFudgeFactor(fudgeFactor) { + this.matrix = TDUtils.multiply(TDUtils.makeZToWMatrix(fudgeFactor), this.matrix); + } + + applyMatrix() { + let matrix = gl.getUniformLocation(this.program, "u_matrix"); + gl.uniformMatrix4fv(matrix, false, this.matrix); + } +} +class Camera { + constructor() { + this.mouse; + this.rotation = { + x: 0, + y: 0 + } + this.lastMouse; + this.mousePressed = false; + this.translate = { + x: 0, + y: 0, + z: 0 + } + } + + async init() { + this.mouse = { + x: 0, + y: 0 + } + window.addEventListener('mousedown', this.mouseDown.bind(this)); + window.addEventListener('mouseup', this.mouseUp.bind(this)); + window.addEventListener('mousemove', this.mouseMove.bind(this), {passive: true}); + eventHandler.addEvent('keys-ArrowUp, keys-ArrowDown, keys-ArrowLeft, keys-ArrowRight, keys-KeyQ, keys-KeyE', this.keyPressed.bind(this)); + } + + mouseDown() { + this.mousePressed = true; + this.lastMouse = null; + } + + mouseUp() { + this.mousePressed = false; + this.lastMouse = null; + } + + mouseMove(event) { + if (!this.mousePressed || gui.modal.open) { + return; + } + if (this.lastMouse) { + let mouse = this.mouse, + rotate = this.rotation; + mouse.x += (this.lastMouse.x - event.clientX) * 0.2; + mouse.y += (this.lastMouse.y - event.clientY) * 0.2; + rotate.x = VTUtils.map(mouse.x, -c.width, c.width, 180, -180, false); + rotate.y = VTUtils.map(mouse.y, -c.height, c.height, 180, -180, false); + } + this.lastMouse = { + x: event.clientX, + y: event.clientY + } + } + + keyPressed(data) { + switch (data) { + case 'keys-ArrowUp': + this.translate.z += 10; + break; + case 'keys-ArrowDown': + this.translate.z -= 10; + break; + case 'keys-ArrowLeft': + this.translate.x -= 10; + break; + case 'keys-ArrowRight': + this.translate.x += 10; + break; + case 'keys-KeyQ': + this.translate.y += 10; + break; + case 'keys-KeyE': + this.translate.y -= 10; + break; + } + } +} +class Template { + constructor() { + this.tpl = {}; + } + + async loadTemplate(name) { + let self = this; + if (!this.tpl[name]) { + self.tpl[name] = await FetchHandler.loadFile(templateDir + name + '.tpl', false) + } + } + + async loadArray(names) { + for (let name of names) { + await this.loadTemplate(name); + } + } + + parseTemplate(name, data) { + if (!this.tpl[name]) { + return "" + } + let m, d = this.tpl[name]; + while ((m = templateEx.exec(d)) !== null) { + if (m.index === templateEx.lastIndex) { + templateEx.lastIndex++; + } + let key = m[0]; + let value = data[m[1]]; + if (value === undefined || value === null) { + value = ""; + } + d = d.replace(key, value) + } + return d; + } +} + +const templateEx = /\$(.*?)\$/gm; +const templateDir = "/out/tpl/" +class ShaderHandler { + constructor(gl) { + this.gl = gl; + this.shaderNames = []; + this.shaders = {}; + this.programs = {}; + } + + setGL(gl) { + this.gl = gl; + } + + async loadShader(name, path) { + this.shaderNames.push(name); + await this.load(name, path + name + ".vert", this.gl.VERTEX_SHADER); + await this.load(name, path + name + ".frag", this.gl.FRAGMENT_SHADER); + } + + async load(name, url, type) { + let realName = name + "_" + type; + if (!this.shaders[realName]) { + let data = await FetchHandler.loadFile(url, false); + let shader = this.createShader(data, type); + if (shader) { + this.shaders[realName] = shader; + } + } + return !!this.shaders[realName]; + } + + getShader(name, type) { + let realName = name + "_" + type; + return this.shaders[realName]; + } + + getAllShaders() { + return this.shaderNames; + } + + async createProgramForEach(arr) { + arr = arr || this.shaderNames; + for (let i = 0; i < arr.length; i++) { + let shader = arr[i]; + let v = await shaderHandler.createProgram(shader, [shader]) + if (!v) { + return false; + } + } + return true; + } + + createShader(source, type) { + let gl = this.gl; + let shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + return shader; + } + console.error(gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + return null; + } + + createProgram(name, shaders) { + let gl = this.gl; + let pro = gl.createProgram(); + for (let i = 0; i < shaders.length; i++) { + gl.attachShader(pro, this.getShader(shaders[i], gl.VERTEX_SHADER)); + gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER)); + } + gl.linkProgram(pro); + if (gl.getProgramParameter(pro, gl.LINK_STATUS)) { + this.programs[name] = pro; + return pro; + } + + console.log(gl.getProgramInfoLog(pro)); + gl.deleteProgram(pro); + return null; + } + + getProgram(name) { + return this.programs[name]; + } + + use(name) { + let pro = this.programs[name]; + this.gl.useProgram(pro); + return pro; + } + + async loadArray(list, path) { + let self = this; + for (const e of list) { + await self.loadShader(e, path) + } + await self.createProgramForEach(list) + } +} +const AudioContext = window.AudioContext || window.webkitAudioContext; + +class AudioHandler { + async init() { + let self = this; + self.isStarted = false; + self.audioFile = new Audio(); + self.actx = new AudioContext(); + self.analyser = self.actx.createAnalyser(); + self.analyser.fftSize = 4096; + self.lastSong = null; + await self.connectAll(); + } + + async connectAll() { + let self = this; + self.source = self.actx.createMediaElementSource(self.audioFile); + self.source.connect(self.analyser); + self.analyser.connect(self.actx.destination); + self.audioFile.addEventListener('ended', player.nextSong.bind(player)); + } + + async start() { + if (this.audioFile.src === '') { + return; + } + if (!this.isStarted) { + this.isStarted = true; + await this.actx.resume(); + } + } + + async stop() { + if (this.isStarted) { + this.isStarted = false; + await this.actx.suspend(); + } + } + + fftSize(size) { + this.analyser.fftSize = size; + } + + smoothing(float) { + this.analyser.smoothingTimeConstant = float; + } + + loadSong(file) { + if (!file) { + NotificationHandler.createNotification("Sorry!
Currently no Song is uploaded!", "error", 2000); + return false; + } + let self = this, + src = file.file; + if (self.lastSong) { + URL.revokeObjectURL(self.lastSong); + } + self.lastSong = this.audioFile.src = URL.createObjectURL(src); + if (!this.isStarted) { + this.start().catch(alert); + } + this.audioFile.play().then(e => { + if (pConf.get("showPlaying", "true")) { + NotificationHandler.createNotification("Now Playing:" + file.getAudioName(), "info", pConf.get("showPlayingTime", 1000)); + } + window.dispatchEvent(new CustomEvent('playSong')); + }).catch(e => { + NotificationHandler.createNotification(e.message, "error", 1000); + player.nextSong(); + }); + } + + getIntArray(steps) { + let dataArray = new Uint8Array(steps); + this.analyser.getByteFrequencyData(dataArray); + return dataArray; + } + + getFloatArray() { + let dataArray = new Float32Array(this.analyser.fftSize); + this.analyser.getFloatTimeDomainData(dataArray); + return dataArray; + } +} +// Handler around the Playlist file to keep track on the ID3 and more! +class AudioPlayerFile { + constructor(file, index) { + this.file = file; + this.name = this.getName(); + this.id3 = null; + this.index = index; + } + + getName() { + let name = this.file.name.split("."); + name.pop(); + name = name.join("."); + return name; + } + + getID3Tag(force) { + if (!force && this.id3 !== null) { + return this.id3; + } + eventHandler.sendData('getData', { + file: this.file, + name: this.name, + index: this.index, + force: force === true + }); + return { + title: this.name, + artist: 'VA', + } + } + + getAudioName() { + let tag = this.getID3Tag(); + return template.parseTemplate('audio-information', tag); + } +} +class FetchHandler { + static files = {}; + + static async loadFiles(array, isJSON) { + let content = []; + for (let i = 0; i < array; i++) { + content.push(await FetchHandler.loadFile(array[i], isJSON)); + } + return content; + } + + static async loadFile(filename, isJSON) { + filename += '?v=' + version; + let files = FetchHandler.files; + if (files[filename]) { + return files[filename]; + } + let data = await FetchHandler.tryFromCache(filename); + if (isJSON) { + data = JSON.parse(data); + } + files[filename] = data; + return data; + } + + static async tryFromCache(filename) { + if (caches) { + let cache = await caches.open('vis3d-pwa-1'); + let data = await cache.match(filename); + if (!data) { + data = await fetch(filename); + } + return await data.text(); + } + } +} +class PlayerConfigHandler { + async init() { + await template.loadArray([ + 'config/nav', + 'config/content', + 'config/visualitem' + ]); + this.last = 'base'; + $('.settings-icon').addEventListener('click', this.open.bind(this)); + $('modal-content').addDelegatedEventListener('click', '.config-nav .item', this.navHandler.bind(this)); + } + + open() { + if (this.content === undefined) { + let content = template.parseTemplate('config/nav', {}); + content += template.parseTemplate('config/content', {content: ""}); + this.content = content; + } + gui.modal.renderModal('Settings', this.content, "by VersusTuneZ"); + this.handleById(); + gui.modal.showModal(); + } + + navHandler(e, el) { + this.last = el.dataset.id; + this.handleById(); + } + + handleById() { + let id = this.last; + new VisualConfig(id === 'visual', id === 'base'); + let active = $('.config-nav .item.active'), + current = $('.config-nav .item[data-id="' + id + '"]'); + if (active) { + active.removeClass('active'); + } + if (current) { + current.addClass('active'); + } + } +} + +class VisualConfig { + static visualTemplates = {}; + + constructor(showVisual, renderBase) { + this.content = $('modal-content .config-content'); + if (showVisual) { + this.renderVisualConfig(visual.c); + } else { + if (renderBase) { + this.renderBase(); + } else { + this.renderVisuals(); + } + } + } + + renderVisuals() { + let keys = Object.keys(visual.visuals), + content = '
'; + for (let i = 0; i < keys.length; i++) { + content += template.parseTemplate('config/visualitem', { + title: visual.visuals[keys[i]].name, + id: keys[i], + active: keys[i] === visual.c ? 'active' : '' + }) + } + content += '
'; + this.content.innerHTML = content; + } + + async renderBase() { + let data = await this.loadVisualConfig('base'), + div = create('section'); + div.addClass('base'); + div.innerHTML = GUIHelper.fromJSON(data, pConf); + this.content.innerHTML = div.outerHTML; + } + + // the name loads the json and handle it! + async renderVisualConfig(name) { + let data = await this.loadVisualConfig(name, vConf), + div = create('section'); + div.addClass('visual'); + div.innerHTML = GUIHelper.fromJSON(data, vConf); + div.innerHTML += GUIHelper.createButton({ + action: "resetVConf", + name: "Reset Visual Config" + }); + div.innerHTML += GUIHelper.createButton({ + action: "makeModalTransparent", + name: "toggle Modal Opacity" + }) + this.content.innerHTML = div.outerHTML; + } + + async loadVisualConfig(name) { + let tem = VisualConfig.visualTemplates; + if (!tem[name]) { + //load config and save it + tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true); + } + return tem[name]; + } +} + +class Player { + async init() { + this.playlist = new Playlist(); + } + + nextSong() { + let next = this.playlist.getNext(); + audioHandler.loadSong(next); + } + + prevSong() { + let next = this.playlist.getPrevious(); + audioHandler.loadSong(next); + } + + playStop() { + if (!audioHandler.lastSong) { + let next = this.playlist.getCurrent(); + audioHandler.loadSong(next); + return; + } + let audioFile = audioHandler.audioFile; + if (audioFile.paused) { + audioFile.play(); + } else { + audioFile.pause(); + } + window.dispatchEvent(new CustomEvent('playSong')); + } + + stop() { + if (!audioHandler.lastSong) { + return; + } + let audioFile = audioHandler.audioFile; + audioFile.pause(); + audioFile.currentTime = 0; + window.dispatchEvent(new CustomEvent('playSong')); + } + + playByID(number) { + this.playlist.index = number; + let next = this.playlist.getCurrent(); + audioHandler.loadSong(next); + } +} + +const PAGINATIONLIMIT = 50; + +class Playlist { + constructor() { + this.list = []; + this.shuffled = []; + this.index = 0; + this.page = 0; + this.isShuffle = pConf.get("shuffle", false); + $('body').addDelegatedEventListener('change', 'input[type="file"]', this.changeFiles.bind(this)); + $('body').addDelegatedEventListener('click', '.pagination .item', this.handlePagination.bind(this)); + eventHandler.addEvent('id3-request', this.handle.bind(this)); + eventHandler.addEvent('id3-request-force', this.forceID3.bind(this)); + } + + shuffle() { + // only shuffle if more then 2 elements are in + let len = this.list.length; + if (len < 3) { + this.shuffled = [0, 1, 2]; + return; + } + // the current-list need to be shuffled... + for (let i = 0; i < len; i++) { + let random = VTUtils.randomInt(0, len - 1); + this.swap(i, random); + } + } + + swap(a, b) { + this.shuffled[a] = b; + this.shuffled[b] = a; + } + + getNext() { + let items = this.list, + len = items.length - 1, + next = this.index + 1; + if (next > len) { + next = 0; + } + this.index = next; + return items[this.getRealIndex()]; + } + + getPrevious() { + let items = this.list, + len = items.length - 1, + next = this.index - 1; + if (next < 0) { + next = len; + } + this.index = next; + return items[this.getRealIndex()]; + } + + getCurrent() { + return this.list[this.getRealIndex()]; + } + + // on new upload... this has to be an array! + setPlaylist(files) { + this.index = 0; + this.forceData = undefined; + this.list = files; + this.shuffle(); + } + + handlePagination(event, el) { + if (el.hasClass('inactive')) { + return; + } + if (el.hasClass('next-site')) { + this.renderPagination(this.page + 1); + } else { + this.renderPagination(this.page - 1); + } + } + + renderPagination(page) { + if (page === undefined) { + page = this.page; + } + let length = this.list.length, + maxSite = Math.ceil(length / PAGINATIONLIMIT) - 1; + if (page < 0) { + page = 0; + } + if (page > maxSite) { + page = maxSite; + } + let s = page * PAGINATIONLIMIT, + e = s + PAGINATIONLIMIT, + data = ""; + this.page = page; + if (e >= length) { + e = length; + } + if (length > 0) { + let items = this.list; + for (let i = s; i < e; i++) { + let obj = { + index: i.toString(), + nr: i + 1, + title: items[this.getRealIndex(i)].getAudioName(), + active: !audioHandler.audioFile.paused && i === this.index ? 'active' : '' + } + data += template.parseTemplate("playlist-item", obj); + } + } else { + data = "

No Songs uploaded!

"; + } + let hasNext = maxSite > 1 && page < maxSite; + gui.modal.renderModal( + "Playlist", + template.parseTemplate("playlist", { + content: data, + }), + template.parseTemplate('playlist-footer', { + prevActive: page > 0 ? 'active' : 'inactive', + nextActive: hasNext ? 'active' : 'inactive', + page: (page + 1) + ' / ' + parseInt(maxSite + 1), + }) + ); + } + + //playlist handler for file input! + changeFiles(e, el) { + + if (el.id !== 'upload-dir') { + return; + } + let files = []; + let i = 0; + for (let file of el.files) { + if (file && file.type.indexOf('audio') !== -1 && file.name.match(".m3u") === null) { + let audioFile = new AudioPlayerFile(file, i++); + files.push(audioFile); + } + } + this.setPlaylist(files); + if (files.length > 0) { + NotificationHandler.createNotification("Songs added successfully!
Songs: " + files.length, "success", 3000); + this.renderPagination(0); + } else { + NotificationHandler.createNotification("File Upload failed!", "error", 3000); + } + } + + getRealIndex(index) { + if (index === undefined) { + index = this.index; + } + if (this.isShuffle) { + return this.shuffled[index]; + } + return index; + } + + handle(data) { + let index = data.index; + if (data.status === "waiting") { + return; + } + this.list[index].id3 = data; + if (this.timeout) { + window.clearTimeout(this.timeout); + } + this.timeout = setTimeout(this.renderPagination.bind(this), 100); + } + + forceID3(data) { + let self = this; + if (!self.forceData) { + self.forceData = {}; + self.forceNotification = NotificationHandler.createNotification("TagReader -> 0 / " + self.list.length, "info", -1); + } + let index = data.index; + if (data.status === "waiting") { + return; + } + self.list[index].id3 = data; + self.forceData[index] = true; + let leng = Object.keys(self.forceData).length; + this.forceNotification.updateMessageOnly("TagReader -> " + leng + " / " + self.list.length); + if (leng === self.list.length) { + self.forceNotification.remove() + } + } +} +class GUI { + async init() { + this.data = {}; + this.modal = new Modal(); + // load first vis window! + await template.loadArray([ + 'playlist-item', + 'playlist', + 'playlist-footer', + 'audio-information', + 'inputs/color', + 'inputs/input', + 'inputs/slider', + 'inputs/switch', + 'inputs/select', + 'inputs/option', + 'help', + ]); + this.initDropZone(); + } + + openHelp() { + gui.modal.renderModal("Help", template.parseTemplate('help', {})); + gui.modal.showModal(); + } + + initDropZone() { + let items = 'drag dragstart dragend dragover dragenter dragleave drop'.split(' '); + items.forEach(el => { + window.addEventListener(el, async e => { + e.preventDefault(); + e.stopPropagation(); + if (e.type === 'drop') { + if (e.dataTransfer.files.length > 0) { + e.dataTransfer.id = 'upload-dir'; + player.playlist.changeFiles(e, e.dataTransfer); + } else { + alert("Sorry you need to upload files!"); + } + } + }); + }); + }; +} + +// create config Inputs from JSON +//@todo add support for gui grouping! +class GUIHelper { + static fromJSON(json, conf) { + let data = []; + for (let item of json) { + switch (item.type) { + case 'slider': + data.push(GUIHelper.createSliders(item, conf)); + break; + case 'color': + data.push(GUIHelper.createColorPicker(item, conf)); + break; + case 'checkbox': + data.push(GUIHelper.createCheckbox(item, conf)); + break; + case 'input': + data.push(GUIHelper.createInputField(item, conf)); + break; + case 'select': + data.push(GUIHelper.createSelect(item, conf)); + break; + case 'button': + data.push(GUIHelper.createButton(item, conf)); + break; + default: + console.error(`Unknown Type: ${item.type}`); + } + } + return data.join(" "); + } + + static createSliders(data, conf) { + let content = ""; + if (typeof data.name === "object") { + for (let i = 0; i < data.name.length; i++) { + let newData = {}; + Object.assign(newData, data); + newData.showName = GUIHelper.richShowName(data, data.name[i].firstUpper()); + newData.name = GUIHelper.richName(data, data.props[i]); + content += GUIHelper.createSlider(newData, conf); + } + } else { + content = GUIHelper.createSlider(data, conf); + } + return content; + } + + static createSlider(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/slider', newData) + } + + static createColorPicker(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/color', newData) + } + + static createCheckbox(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value) ? 'checked' : ''; + return template.parseTemplate('inputs/switch', newData) + } + + static createInputField(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/input', newData) + } + + static createSelect(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + let options = ''; + for (let i = 0; i < newData.options.length; i++) { + options += template.parseTemplate('inputs/option', { + value: newData.options[i] + }) + } + newData.options = options; + newData.event = 'visualConf'; + newData.conf = conf.type; + return template.parseTemplate('inputs/select', newData) + } + + static richName(data, name) { + if (data.group !== "") { + return data.group + "-" + name + } + return name; + } + + static richShowName(data, name) { + if (data.group !== "") { + return data.group.firstUpper() + ' ' + name + } + return name; + } + + static createButton(item, conf) { + return `
${item.name}
` + } +} + +class Modal { + constructor() { + let self = this; + self.currentModal = ''; + self.modal = $('#modal'); + self.open = false; + self.parent = self.modal.parentNode; + self.modal.addDelegatedEventListener('click', 'header .close', this.closeModal.bind(this)); + } + + resetModal() { + this.renderModal('', '', ''); + } + + renderModal(title, content, footer) { + $('#modal').removeClass('lightMode') + this.currentModal = title; + this.renderHeader(title); + this.renderContent(content); + this.renderFooter(footer); + } + + renderHeader(header) { + let h = $('header .headline', this.modal); + h.innerHTML = header; + } + + renderContent(content) { + let con = $('modal-content', this.modal); + con.innerHTML = content; + } + + renderFooter(footer) { + let con = $('modal-footer .inner', this.modal); + con.innerHTML = footer || "by VersusTuneZ"; + } + + closeModal() { + this.parent.addClass("hide") + this.open = false; + } + + isCurrent(title) { + return title === this.currentModal; + } + + showModal() { + this.parent.removeClass("hide") + this.open = true; + } +} +class Visual { + constructor() { + this.data = []; //for drawing + this.dataArray = []; + this.name = "Default"; + } + + updateData() { + } + + updateFFT(fftSize) { + } + + draw() { + } + + setup() { + } +} + +class VisualDrawer { + constructor() { + this.visuals = { + //"sphere": new Sphere(), + "wave": new Wave(), + "wave2d": new Wave2D(), + //"water": new Water() + } + this.lastMainColor = { + base: '#-1', + color: [0, 0, 0] + }; + this.lastSecondColor = { + base: '#-1', + color: [0, 0, 0] + } + } + + init() { + this.switch(pConf.get("visual", "wave2d")); + this.updateLoop(); + } + + switch(visual) { + if (this.visuals[visual] != null) { + this.c = visual; + vConf.loadConfigByName(this.c); + this.visuals[this.c].setup(); + pConf.set("visual", this.c); + pConf.save(); + } + } + + updateLoop() { + let self = this; + let vis = self.visuals[self.c]; + let pro = shaderHandler.use(self.c); + this.updateSeekbar(); + this.prepare(pro); + vis.updateData(); + vis.draw(pro); + requestAnimationFrame(self.updateLoop.bind(self)) + } + + updateSeekbar() { + cInfo.width = window.innerWidth; + cInfo.height = window.innerHeight; + let audioFile = audioHandler.audioFile; + ctx.clearRect(0, 0, cInfo.width, cInfo.height); + if (!audioFile.paused && pConf.get("showSeekbar", true)) { + //show seekbar + let dur = audioFile.duration, + cur = audioFile.currentTime, + percent = cur / dur * cInfo.width; + ctx.fillStyle = pConf.get("seekColor", '#fff'); + ctx.fillRect(0, c.height - 10, percent, c.height); + } + } + + prepare(pro) { + c.width = window.innerWidth; + c.height = window.innerHeight; + gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); + gl.clearColor(0, 0, 0, parseFloat(pConf.get("alphaValue", 0))); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LEQUAL); + gl.enable(gl.CULL_FACE); + + // u_baseColor || u_maxColor + this.setColor(pro); + } + + setColor(program) { + let baseColor = gl.getUniformLocation(program, "u_baseColor"), + maxColor = gl.getUniformLocation(program, "u_maxColor"), + self = this, + mainColor = self.lastMainColor, + secondColor = self.lastSecondColor; + this.updateColor('lastMainColor', 'baseColor'); + this.updateColor('lastSecondColor', 'gradientToColor'); + gl.uniform3fv(baseColor, mainColor.color); + gl.uniform3fv(maxColor, secondColor.color); + } + + updateColor(index, col) { + let color = this[index], + value = vConf.get(col, '#ffffff') + if(value !== color.base) { + color.color = hexToRgb(value); + color.base = value; + } + } +} +class ImageUploader { + async init() { + this.image = pConf.get("bgURL", ""); + this.color = pConf.get("bgColour", "#000000"); + this.alpha = pConf.get("alphaValue", 0.5); + this.getRealImage(); + this.applyValues(); + $('#modal').addDelegatedEventListener('change', '#image-upload input:not([type="color"])', this.changeHandler.bind(this)); + $('#modal').addDelegatedEventListener('input', '#image-upload input#color', this.changeHandler.bind(this)); + } + + async renderModal() { + await template.loadTemplate("image"); + gui.modal.resetModal(); + gui.modal.renderModal("Background-Image", + template.parseTemplate("image", { + value: this.image, + bgValue: this.color, + alphaValue: this.alpha + }), ""); + gui.modal.showModal(); + } + + changeHandler(e, el) { + if (el.id === 'color') { + this.color = el.value; + } else if (el.id === "alphaValue") { + this.alpha = el.value; + } else { + pConf.set('bgMode', el.id); + if (el.id === 'image') { + el.files[0].toBase64((e, b) => { + if (b) { + alert("Error converting image!"); + return; + } + pConf.set('bgURL', e.currentTarget.result); + pConf.save(); + }) + this.image = URL.createObjectURL(el.files[0]); + } else { + this.image = el.value; + pConf.set('bgURL', this.image); + } + } + pConf.set('bgColour', this.color); + pConf.set('alphaValue', this.alpha); + this.applyValues(); + pConf.save(); + } + + applyValues() { + let body = $('body'); + body.style.backgroundImage = 'url(' + this.image + ')'; + body.style.backgroundColor = this.color; + } + + getRealImage() { + let mode = pConf.get('bgMode'), + value = pConf.get("bgURL", ""); + if (mode === 'image') { + if (value !== '' && value.startsWith('data:image')) { + let split = value.split(";"), + type = split.shift(), + message = split.join(";").replace("base64,", ""); + this.image = URL.createObjectURL(b64toBlob(message, type)); + } + } else { + this.image = value; + } + } +} + +const imageUploader = new ImageUploader(); +class NotificationHandler { + static instance = new NotificationHandler(); + + constructor() { + this.outer = $('.notification'); + this.notifications = []; + } + + async init() { + await template.loadTemplate('notification'); + } + + static createNotification(message, type, time) { + time = parseInt(time || "3000"); + let handler = NotificationHandler.instance, + not = new Notification(message, type, time); + handler.notifications.push(not); + not.show(); + return not; + } +} + +class Notification { + constructor(message, type, time) { + this.outer = NotificationHandler.instance.outer; + this.message = message; + this.type = type; + this.time = time; + this.isRemoved = false; + } + + async show() { + let self = this, + endless = self.time === -1; + + self.item = create('div'); + self.item.addClass('notification-item, ' + self.type); + if (endless) { + self.type += ' endless'; + } + self.updateContent(self.message); + this.outer.prepend(self.item); + if (!endless) { + setTimeout(this.remove.bind(this), self.time) + } + } + + async remove() { + if (this.isRemoved) { + return; + } + this.isRemoved = true; + this.outer.removeChild(this.item); + let not = NotificationHandler.instance.notifications, + index = not.indexOf(this); + not.splice(index, 1); + delete this; + } + + updateContent(message) { + let self = this, + isEndless = self.time === -1, + data = { + message: message, + time: isEndless ? 1000 : self.time + 1, + type: self.type, + } + this.item.innerHTML = template.parseTemplate('notification', data); + } + + updateMessageOnly(message) { + let item = $('.message', this.item); + if (item) { + item.innerHTML = message; + } + } +} +class Config { + static allConfigs = {}; + + constructor(type) { + this.config = {}; + this.name = '' + this.type = type; + Config.allConfigs[type] = this; + } + + loadConfigByName(name) { + this.save(); + this.name = 'config-' + name; + let item = localStorage.getItem(this.name); + if (item) { + this.config = JSON.parse(item); + } + } + + save() { + if (this.name !== '') { + localStorage.setItem(this.name, JSON.stringify(this.config)); + } + } + + set(name, value) { + this.config[name] = value; + } + + remove(name) { + delete this.config[name]; + } + + get(name, def) { + let value = this.config[name]; + if (value === undefined || value === null) { + this.config[name] = def; + value = def; + } + return value; + } + + reset() { + NotificationHandler.createNotification(`CONFIG REQUEST SUCCESS FOR ${this.type}`, "success", 2000); + this.config = {}; + this.save(); + } +} +class Sphere extends Visual { + constructor() { + super(); + this.name = "Sphere"; + } + + draw() { + } + + setup() { + } +} +// 3D Audio-Waves -> maybe also 2D? +class Wave extends Visual { + constructor() { + super(); + this.name = "3D Wave"; + } + + updateData() { + let data = audioHandler.getFloatArray(); + let add = 2 / data.length, + x = -1; + let outerLoop = 0; + for (let i = 0; i < data.length; i++) { + //first + this.data[outerLoop] = x; + this.data[outerLoop + 1] = data[i]; + this.data[outerLoop + 2] = 0; + //second + this.data[outerLoop + 3] = x; + //third + this.data[outerLoop + 6] = x; + this.data[outerLoop + 8] = data[i + 1] || 0; + outerLoop += 9; + x += add; + } + } + + draw(program) { + this.prepare(program); + let position = this.position, + positionBuffer = gl.createBuffer(); + this.rotate(program); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.data), gl.DYNAMIC_DRAW); + let vao = gl.createVertexArray(); + gl.bindVertexArray(vao); + gl.enableVertexAttribArray(position); + gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); + gl.drawArrays(vConf.get("waveForm", gl.TRIANGLES), 0, this.data.length / 3); + this.afterDraw(); + } + + rotate(program) { + let aspect = c.width / c.height, + matrix = [ + 1 / aspect, 0, 0, 0, + 0, 0.6, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ] + matrix = TDUtils.multiply(matrix, TDUtils.xRotation(vConf.get("rotation-x", 10))); + matrix = TDUtils.multiply(matrix, TDUtils.yRotation(vConf.get("rotation-y", 50))); + matrix = TDUtils.multiply(matrix, TDUtils.zRotation(vConf.get("rotation-z", -30))); + let rotate = gl.getUniformLocation(program, "u_matrix"); + gl.uniformMatrix4fv(rotate, false, matrix); + } + + setup() { + this.updateFFT(vConf.get('fftSize', 4096)); + vConf.get("rotation-z", -30); + vConf.get("rotation-y", 50); + vConf.get("rotation-x", 10); + } + + updateFFT(fftSize) { + audioHandler.fftSize(fftSize); + this.data = new Float32Array(fftSize * 9); + } + + prepare(program) { + this.position = gl.getAttribLocation(program, "a_position"); + this.color = gl.getUniformLocation(program, "u_color"); + let lightPos = gl.getUniformLocation(program, "u_lightPos"), + light = gl.getUniformLocation(program, "u_light"); + gl.uniform3fv(lightPos, [ + vConf.get("light-x", 0), + vConf.get("light-y", 5), + vConf.get("light-z", -56) + ]); + gl.uniform1f(light, parseFloat(vConf.get("light-strength", 0.3))); + } + + afterDraw() { + TDUtils.updateRotate('rotation-x', 10); + TDUtils.updateRotate('rotation-y', 50); + TDUtils.updateRotate('rotation-z', -30); + vConf.save(); + } +} +class Wave2D extends Visual { + constructor() { + super(); + this.name = "2D Wave"; + } + + updateData() { + let data = audioHandler.getFloatArray(); + let add = c.width / data.length, + x = 0, + y = c.height / 2, + goTrough = y / 2; + let outerLoop = 0; + for (let i = 0; i < data.length; i++) { + //first + this.data[outerLoop] = x; + this.data[outerLoop + 1] = y + (data[i] * goTrough); + this.data[outerLoop + 2] = data[i]; + outerLoop += 3; + x += add; + } + } + + draw(program) { + this.prepare(program); + let position = this.position, + positionBuffer = gl.createBuffer(); + this.rotate(program); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.data), gl.DYNAMIC_DRAW); + let vao = gl.createVertexArray(); + gl.bindVertexArray(vao); + gl.enableVertexAttribArray(position); + gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); + gl.drawArrays(vConf.get("waveForm", gl.LINE_STRIP), 0, this.data.length / 3); + this.afterDraw(); + } + + rotate(program) { + let glHelper = new GLHelper(program); + glHelper.project(); + glHelper.addFudgeFactor(vConf.get("fudgeFactor", 1)); + glHelper.translate([ + camera.translate.x, + camera.translate.y, + camera.translate.z + ]); + glHelper.rotateX(camera.mouse.x); + glHelper.rotateY(camera.mouse.y); + glHelper.rotateZ(vConf.get("rotation-z", 0)); + glHelper.applyMatrix(); + } + + setup() { + this.updateFFT(vConf.get('fftSize', 16384)); + } + + updateFFT(fftSize) { + audioHandler.fftSize(fftSize); + this.data = new Float32Array(fftSize * 3); + } + + prepare(program) { + this.position = gl.getAttribLocation(program, "a_position"); + //GLHelper.uniform1f(program, "u_fudgeFactor", vConf.get("fudgeFactor", 1)); + GLHelper.uniform3fv(program, "u_lightPos", vConf.get("light", [0, 5, -56])); + } + + afterDraw() { + TDUtils.updateRotate('rotation-x', 0); + TDUtils.updateRotate('rotation-y', 0); + TDUtils.updateRotate('rotation-z', 0); + vConf.save(); + } +} +//animate Water the way like the Audio is Coming... 256FFT-Size max! +class Water extends Visual { + constructor() { + super(); + this.name = "Water"; + } + + draw() { + } + + setup() { + audioHandler.fftSize(256) + } + +} +class EventHandler { + constructor() { + this.events = {}; + } + + addEvent(events, cb) { + let names = events.split(","); + for (let name of names) { + this.events[name.trim()] = cb; + } + } + + sendData(name, data) { + worker.postMessage({ + cmd: name, + data: data + }); + } + + handleEvent(event) { + let data = event.data; + if (!data.cmd) { + return false; + } + + if (this.events[data.cmd]) { + try { + this.events[data.cmd](data.data); + } catch (e) { + console.error('[EventHandler] > ' + e.message); + } + return true; + } + return false; + } +} + +async function initHandler() { + let body = $('body'); + $('.playlist.menu-icon').addEventListener('click', e => { + player.playlist.renderPagination(player.playlist.page); + gui.modal.showModal(); + }); + + body.addDelegatedEventListener('click', '.playlist-item', (e, el) => { + let number = el.dataset.index; + player.playByID(parseInt(number)); + togglePlayButton('pause'); + }); + + body.addDelegatedEventListener('click', '.controls button', (e, el) => { + switch (el.id) { + case 'previous': + player.prevSong(); + break; + case 'next': + player.nextSong() + break; + case 'play': + player.playStop(); + break; + case 'shuffle': + toggleShuffle(); + break; + } + }); + window.addEventListener('playSong', setActiveOnPlaylist); + window.addEventListener('playSong', e => { + togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause'); + }); + $('.upload-image').addEventListener('click', imageUploader.renderModal.bind(imageUploader)); + body.addDelegatedEventListener('click', '.readAll', forceAllRead); + + body.addDelegatedEventListener('input', '.input-range input[type="range"]', (e, el) => { + let current = $('.current', el.parentNode); + current.innerText = el.value; + }); + + body.addDelegatedEventListener('input', 'input[type="color"]', (e, el) => { + let parent = el.parentNode; + $('.colorBlob', parent).style.backgroundColor = el.value; + }) + + body.addDelegatedEventListener('click', '.visual-item', (e, el) => { + visual.switch(el.dataset.id || 'wave'); + $('modal-content .visuals .active').removeClass('active'); + el.addClass('active'); + }) + + body.addDelegatedEventListener('input', 'section.base input', (e, el) => { + if (el.type === 'checkbox') { + pConf.set(el.name, el.checked); + } else { + setValue(el.name, el.value, pConf, el.dataset.type); + } + pConf.save(); + }) + body.addDelegatedEventListener('input', 'section.visual input', (e, el) => { + if (el.type === 'checkbox') { + vConf.set(el.name, el.checked); + } else { + setValue(el.name, el.value, vConf, el.dataset.type); + } + vConf.save(); + }) + + body.addDelegatedEventListener('click', '.button[data-action]', (e, el) => { + switch (el.dataset.action) { + case 'resetVConf': + vConf.reset(); + setTimeout(e => { + playerConf.handleById(); + }, 30); + break; + case 'makeModalTransparent': + $('#modal').toggleClass('lightMode') + break; + } + }) + + $('.help.menu-icon').addEventListener('click', gui.openHelp); + + document.onfullscreenchange = e => { + if (body.hasClass('fullscreen')) { + body.removeClass('fullscreen') + } else { + body.addClass('fullscreen') + } + } +} + +function forceAllRead() { + let playlist = player.playlist.list; + for (let i = 0; i < playlist.length; i++) { + playlist[i].getID3Tag(true); + } +} + + +function setValue(name, value, conf, type) { + switch (type) { + case 'float': + value = parseFloat(value); + break; + case 'int': + value = parseInt(value); + break; + } + conf.set(name, value); +} + +function setActiveOnPlaylist(e) { + let item = $('.playlist-item[data-index="' + player.playlist.index + '"]'), + active = $('.playlist-item.active'); + if (active) { + active.removeClass('active'); + } + if (item) { + item.addClass('active'); + } +} + +function toggleShuffle(updateGUI) { + let active = player.playlist.isShuffle; + if (updateGUI !== false) { + active = !active; + let status = active ? 'enabled' : 'disabled'; + NotificationHandler.createNotification("Shuffle: " + status, "info", 500); + pConf.set("shuffle", active); + pConf.save(); + player.playlist.isShuffle = active; + } + $('#shuffle').toggleCheck('active', active); +} + +function togglePlayButton(status) { + let icons = $$('#play .icon'); + icons.forEach(el => { + if (el.dataset.name === status) { + el.removeClass('hide'); + } else { + el.addClass('hide'); + } + }) +} +(function () { + const body = $('body'); + body.addDelegatedEventListener('click', 'custom-select .label', (e, el) => { + let parent = el.parentNode; + let options = $$('custom-option', parent), + optionsDiv = $('custom-options', parent); + if (parent.hasClass('open')) { + optionsDiv.style.maxHeight = ''; + parent.removeClass('open'); + } else { + let sum = 0; + options.forEach(function (element) { + sum += element.offsetHeight; + }); + optionsDiv.style.maxHeight = sum + 'px'; + parent.addClass('open'); + } + }) + body.addDelegatedEventListener('click', 'custom-select custom-option', (e, el) => { + let select = el.closest('custom-select'), + input = $('input', select); + $$('custom-option.active').forEach(activeEl => { + activeEl.removeClass('active'); + }) + el.addClass('active'); + if (input) { + input.value = el.dataset.value || el.innerText; + $('.label', select).innerText = el.innerText; + select.removeClass('open'); + el.parentNode.style.maxHeight = ''; + window.dispatchEvent(new CustomEvent('selectChanged', { + detail: { + select: select, + event: select.dataset.event, + value: input.value, + name: input.name + } + })); + } + }) + + window.addEventListener('selectChanged', (e) => { + if (e.detail.event === 'visualConf') { + e.preventDefault(); + e.stopPropagation(); + handleVisualConf(e.detail); + } + }) + + function handleVisualConf(e) { + try { + let value = e.value, + config = Config.allConfigs[e.select.dataset.conf]; + if (e.name === 'fftSize') { + value = parseInt(e.value); + visual.visuals[visual.c].updateFFT(value); + } + config.set(e.name, value); + config.save(); + } catch (e) { + console.error(e); + } + } +})() + +class KeyHandler { + async init() { + await this.mediaKeys(); + await this.addKeyHandler(); + window.addEventListener('keydown', this.keyHandler.bind(this)); + } + + async mediaKeys() { + if ('mediaSession' in navigator) { + let media = navigator.mediaSession; + media.setActionHandler('play', player.playStop.bind(player)); + media.setActionHandler('pause', player.playStop.bind(player)); + media.setActionHandler('previoustrack', player.prevSong.bind(player)); + media.setActionHandler('nexttrack', player.nextSong.bind(player)); + media.setActionHandler('stop', player.stop.bind(player)); + } + } + + async addKeyHandler() { + eventHandler.addEvent('keys-Space', player.playStop.bind(player)); + eventHandler.addEvent('keys-KeyN', player.nextSong.bind(player)); + eventHandler.addEvent('keys-KeyV', player.prevSong.bind(player)); + eventHandler.addEvent('keys-KeyS', playerConf.open.bind(playerConf)); + eventHandler.addEvent('keys-KeyS-shift', toggleShuffle); + eventHandler.addEvent('keys-KeyB', imageUploader.renderModal.bind(imageUploader)); + eventHandler.addEvent('keys-KeyF-shift', forceAllRead); + eventHandler.addEvent('keys-KeyH', gui.openHelp); + eventHandler.addEvent('keys-KeyP', e => { + player.playlist.renderPagination(player.playlist.page); + gui.modal.showModal(); + }); + eventHandler.addEvent('keys-Escape, keys-KeyC-shift', e => { + gui.modal.resetModal(); + gui.modal.closeModal(); + }) + eventHandler.addEvent('keys-F11', e => { + if (document.fullscreenElement) { + document.exitFullscreen().catch(console.error); + } else { + document.body.requestFullscreen().catch(console.error); + } + }); + } + + async keyHandler(event) { + let key = event.code, + shift = event.shiftKey ? '-shift' : '', + ctrl = event.ctrlKey ? '-ctrl' : '', + name = 'keys-' + key + shift + ctrl; + + if (eventHandler.handleEvent({ + data: { + cmd: name, + data: name + } + })) { + event.preventDefault(); + event.stopPropagation(); + } + } +} +class Startup { + constructor() { + this.modules = { + 'startup': false, + 'id3-ready': false + }; + } + + moduleLoaded(name) { + this.modules[name] = true + this.allModulesLoaded(); + } + + allModulesLoaded() { + for (let module in this.modules) { + if (!this.modules[module]) { + return false; + } + } + window.dispatchEvent(new CustomEvent('startupFin')); + return true; + } +} +const shaderHandler = new ShaderHandler(null), + audioHandler = new AudioHandler(), + gui = new GUI(), + visual = new VisualDrawer(), + template = new Template(), + player = new Player(), + vConf = new Config("visual"), + pConf = new Config("player"), + worker = new Worker('/out/js/worker.min.js'), + startup = new Startup(), + eventHandler = new EventHandler(), + playerConf = new PlayerConfigHandler(), + keyHandler = new KeyHandler(), + version = 1, + camera = new Camera(); + +let c, gl, cInfo, ctx, sw; + +worker.addEventListener('message', e => { + if (e.data.status === 'startup') { + startup.moduleLoaded(e.data.cmd); + return; + } + eventHandler.handleEvent(e); +}); + +window.addEventListener('startupFin', e => { + setTimeout(e => { + $('.loading-screen').remove(); + }, 100) +}) + +async function startUP() { + if ('serviceWorker' in navigator) { + sw = await navigator.serviceWorker.register('/sw.js'); + } + pConf.loadConfigByName('default'); + c = $('#c'), + gl = c.getContext("webgl2"), + cInfo = $('#cInfo'), + ctx = cInfo.getContext('2d'); + if (!gl) { + alert("SORRY THE BROWSER DOESN'T SUPPORT WEBGL2"); + return false; + } + shaderHandler.setGL(gl) + await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], '/shaders/'); + await NotificationHandler.instance.init(); + await audioHandler.init(); + await player.init(); + await camera.init(); + await visual.init(); + await gui.init(); + await imageUploader.init(); + await playerConf.init(); + await keyHandler.init(); + await initHandler(); + toggleShuffle(false); +} + +startUP().then(r => { + startup.moduleLoaded('startup'); +}); \ No newline at end of file diff --git a/out/js/scripts.min.js b/out/js/scripts.min.js new file mode 100644 index 0000000..9e8f3cd --- /dev/null +++ b/out/js/scripts.min.js @@ -0,0 +1 @@ +class VTUtils{static random(e,t){let a=Math.random();if(void 0===e)return a;if(void 0===t)return e instanceof Array?e[Math.floor(a*e.length)]:a*e;if(e>t){let a=e;e=t,t=a}return a*(t-e)+e}static randomInt(e,t){return Math.floor(VTUtils.random(e,t))}static normalize(e,t,a){return(e-a)/(t-a)}static distance(e,t,a,i){let s=e-a,n=t-i;return Math.sqrt(s*s+n*n)}static map(e,t,a,i,s,n){let r=(e-t)/(a-t)*(s-i)+i;return n?i>16&255)/255,(t>>8&255)/255,(255&t)/255]}Node.prototype.addDelegatedEventListener=function(e,t,a){this.addEventListener(e,e=>{let i=e.target;if(i.matches(t))a(e,i);else{let s=i.closest(t);if(s)try{a(e,s)}catch(e){NotificationHandler.createNotification("FATAL ERROR WITHIN HANDLER!","error",1e3)}}})},Node.prototype.hasClass=function(e){let t=e.split(","),a=null;for(let e of t){if(!1===a)break;a=this.classList.contains(e.trim())}return!0===a},Node.prototype.addClass=function(e){let t=e.split(",");for(let e of t)this.classList.add(e.trim());return this},Node.prototype.removeClass=function(e){let t=e.split(",");for(let e of t)this.classList.remove(e.trim());return this},Node.prototype.toggleClass=function(e,t){let a=e.split(",");for(let e of a)this.classList.toggle(e.trim(),t)},Node.prototype.switchClass=function(e,t,a){let i=this.classList;a?(i.remove(e),i.add(t)):(i.remove(t),i.add(e))},Node.prototype.toggleCheck=function(e,t){let a=this.classList,i=e.split(",");for(let e of i){let i=e.trim();t?a.add(i):a.remove(i)}},String.prototype.firstUpper=function(){return this.charAt(0).toUpperCase()+this.slice(1)},File.prototype.toBase64=function(e){const t=new FileReader;t.onloadend=e,t.readAsDataURL(this)};class TDUtils{static lastMatrix={m:null};static multiply(e,t){let a=t[0],i=t[1],s=t[2],n=t[3],r=t[4],l=t[5],o=t[6],d=t[7],c=t[8],h=t[9],u=t[10],p=t[11],g=t[12],f=t[13],m=t[14],y=t[15],v=e[0],w=e[1],C=e[2],T=e[3],x=e[4],H=e[5],b=e[6],S=e[7],U=e[8],A=e[9],E=e[10],L=e[11],D=e[12],k=e[13],F=e[14],M=e[15];return[a*v+i*x+s*U+n*D,a*w+i*H+s*A+n*k,a*C+i*b+s*E+n*F,a*T+i*S+s*L+n*M,r*v+l*x+o*U+d*D,r*w+l*H+o*A+d*k,r*C+l*b+o*E+d*F,r*T+l*S+o*L+d*M,c*v+h*x+u*U+p*D,c*w+h*H+u*A+p*k,c*C+h*b+u*E+p*F,c*T+h*S+u*L+p*M,g*v+f*x+m*U+y*D,g*w+f*H+m*A+y*k,g*C+f*b+m*E+y*F,g*T+f*S+m*L+y*M]}static translate(e,t,a,i,s){s=s||new Float32Array(16);let n=e[0],r=e[1],l=e[2],o=e[3],d=e[4],c=e[5],h=e[6],u=e[7],p=e[8],g=e[9],f=e[10],m=e[11],y=e[12],v=e[13],w=e[14],C=e[15];return s[0]=n,s[1]=r,s[2]=l,s[3]=o,s[4]=d,s[5]=c,s[6]=h,s[7]=u,s[8]=p,s[9]=g,s[10]=f,s[11]=m,s[12]=n*t+d*a+p*i+y,s[13]=r*t+c*a+g*i+v,s[14]=l*t+h*a+f*i+w,s[15]=o*t+u*a+m*i+C,s}static xRotation(e){e=TDUtils.degToRad(e);let t=Math.cos(e),a=Math.sin(e);return[1,0,0,0,0,t,a,0,0,-a,t,0,0,0,0,1]}static yRotation(e){e=TDUtils.degToRad(e);let t=Math.cos(e),a=Math.sin(e);return[t,0,-a,0,0,1,0,0,a,0,t,0,0,0,0,1]}static zRotation(e){e=TDUtils.degToRad(e);let t=Math.cos(e),a=Math.sin(e);return[t,a,0,0,-a,t,0,0,0,0,1,0,0,0,0,1]}static degToRad(e){return e*Math.PI/180}static scale(e,t,a,i){return(i=i||new Float32Array(16))[0]=e,i[5]=t,i[10]=a,i}static lookAt(e,t,a,i){i=i||new Float32Array(16);let s=TDUtils.normalize(TDUtils.subtractVectors(e,t)),n=TDUtils.normalize(TDUtils.cross(a,s)),r=TDUtils.normalize(TDUtils.cross(s,n));return i[0]=n[0],i[1]=n[1],i[2]=n[2],i[4]=r[0],i[5]=r[1],i[6]=r[2],i[8]=s[0],i[9]=s[1],i[10]=s[2],i[12]=e[0],i[13]=e[1],i[14]=e[2],i[15]=1,i}static cross(e,t,a){return(a=a||new Float32Array(3))[0]=e[1]*t[2]-e[2]*t[1],a[1]=e[2]*t[0]-e[0]*t[2],a[2]=e[0]*t[1]-e[1]*t[0],a}static normalize(e,t){t=t||new Float32Array(3);let a=Math.sqrt(e[0]*e[0]+e[1]*e[1]+e[2]*e[2]);return a>1e-5&&(t[0]=e[0]/a,t[1]=e[1]/a,t[2]=e[2]/a),t}static subtractVectors(e,t,a){return(a=a||new Float32Array(3))[0]=e[0]-t[0],a[1]=e[1]-t[1],a[2]=e[2]-t[2],a}static perspective(e,t,a,i,s){s=s||new Float32Array(16);let n=Math.tan(.5*Math.PI-.5*e),r=1/(a-i);return s[0]=n/t,s[5]=n,s[10]=(a+i)*r,s[11]=-1,s[14]=a*i*r*2,s}static projection(e,t,a){return[2/e,0,0,0,0,-2/t,0,0,0,0,2/a,0,-1,1,0,1]}static inverse(e,t){t=t||new Float32Array(16);let a=e[0],i=e[1],s=e[2],n=e[3],r=e[4],l=e[5],o=e[6],d=e[7],c=e[8],h=e[9],u=e[10],p=e[11],g=e[12],f=e[13],m=e[14],y=e[15],v=u*y,w=m*p,C=o*y,T=m*d,x=o*p,H=u*d,b=s*y,S=m*n,U=s*p,A=u*n,E=s*d,L=o*n,D=c*f,k=g*h,F=r*f,M=g*l,R=r*h,I=c*l,N=a*f,P=g*i,V=a*h,$=c*i,B=a*l,z=r*i,O=v*l+T*h+x*f-(w*l+C*h+H*f),_=w*i+b*h+A*f-(v*i+S*h+U*f),G=C*i+S*l+E*f-(T*i+b*l+L*f),j=H*i+U*l+L*h-(x*i+A*l+E*h),K=1/(a*O+r*_+c*G+g*j);return t[0]=K*O,t[1]=K*_,t[2]=K*G,t[3]=K*j,t[4]=K*(w*r+C*c+H*g-(v*r+T*c+x*g)),t[5]=K*(v*a+S*c+U*g-(w*a+b*c+A*g)),t[6]=K*(T*a+b*r+L*g-(C*a+S*r+E*g)),t[7]=K*(x*a+A*r+E*c-(H*a+U*r+L*c)),t[8]=K*(D*d+M*p+R*y-(k*d+F*p+I*y)),t[9]=K*(k*n+N*p+$*y-(D*n+P*p+V*y)),t[10]=K*(F*n+P*d+B*y-(M*n+N*d+z*y)),t[11]=K*(I*n+V*d+z*p-(R*n+$*d+B*p)),t[12]=K*(F*u+I*m+k*o-(R*m+D*o+M*u)),t[13]=K*(V*m+D*s+P*u-(N*u+$*m+k*s)),t[14]=K*(N*o+z*m+M*s-(B*m+F*s+P*o)),t[15]=K*(B*u+R*s+$*o-(V*o+z*u+I*s)),t}static aspectView(e){return[1/e,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}static updateRotate(e,t){let a=vConf.get(e,t)+vConf.get(e+"-inc",0);a>360?a-=360:a<-360&&(a+=360),vConf.set(e,a)}static makeZToWMatrix(e){return[1,0,0,0,0,1,0,0,0,0,1,e,0,0,0,1]}}class GLHelper{constructor(e){this.matrix=new Float32Array(16),this.program=e}static uniform4fv(e,t,a){let i=gl.getUniformLocation(e,t);gl.uniform4fv(i,a)}static uniform3fv(e,t,a){let i=gl.getUniformLocation(e,t);gl.uniform3fv(i,a)}static uniform1f(e,t,a){let i=gl.getUniformLocation(e,t);gl.uniform1f(i,a)}rotateX(e){this.matrix=TDUtils.multiply(this.matrix,TDUtils.xRotation(e))}rotateY(e){this.matrix=TDUtils.multiply(this.matrix,TDUtils.yRotation(e))}rotateZ(e){this.matrix=TDUtils.multiply(this.matrix,TDUtils.zRotation(e))}scale(e){this.matrix=TDUtils.multiply(this.matrix,TDUtils.scale(e[0],e[1],e[2]))}project(e){e=e||c.width>c.height?c.width:c.height,this.matrix=TDUtils.projection(c.width,c.height,e)}translate(e){this.matrix=TDUtils.translate(this.matrix,e[0]||0,e[1]||0,e[2]||0)}addFudgeFactor(e){this.matrix=TDUtils.multiply(TDUtils.makeZToWMatrix(e),this.matrix)}applyMatrix(){let e=gl.getUniformLocation(this.program,"u_matrix");gl.uniformMatrix4fv(e,!1,this.matrix)}}class Camera{constructor(){this.mouse,this.rotation={x:0,y:0},this.lastMouse,this.mousePressed=!1,this.translate={x:0,y:0,z:0}}async init(){this.mouse={x:0,y:0},window.addEventListener("mousedown",this.mouseDown.bind(this)),window.addEventListener("mouseup",this.mouseUp.bind(this)),window.addEventListener("mousemove",this.mouseMove.bind(this),{passive:!0}),eventHandler.addEvent("keys-ArrowUp, keys-ArrowDown, keys-ArrowLeft, keys-ArrowRight, keys-KeyQ, keys-KeyE",this.keyPressed.bind(this))}mouseDown(){this.mousePressed=!0,this.lastMouse=null}mouseUp(){this.mousePressed=!1,this.lastMouse=null}mouseMove(e){if(this.mousePressed&&!gui.modal.open){if(this.lastMouse){let t=this.mouse,a=this.rotation;t.x+=.2*(this.lastMouse.x-e.clientX),t.y+=.2*(this.lastMouse.y-e.clientY),a.x=VTUtils.map(t.x,-c.width,c.width,180,-180,!1),a.y=VTUtils.map(t.y,-c.height,c.height,180,-180,!1)}this.lastMouse={x:e.clientX,y:e.clientY}}}keyPressed(e){switch(e){case"keys-ArrowUp":this.translate.z+=10;break;case"keys-ArrowDown":this.translate.z-=10;break;case"keys-ArrowLeft":this.translate.x-=10;break;case"keys-ArrowRight":this.translate.x+=10;break;case"keys-KeyQ":this.translate.y+=10;break;case"keys-KeyE":this.translate.y-=10}}}class Template{constructor(){this.tpl={}}async loadTemplate(e){let t=this;this.tpl[e]||(t.tpl[e]=await FetchHandler.loadFile(templateDir+e+".tpl",!1))}async loadArray(e){for(let t of e)await this.loadTemplate(t)}parseTemplate(e,t){if(!this.tpl[e])return"";let a,i=this.tpl[e];for(;null!==(a=templateEx.exec(i));){a.index===templateEx.lastIndex&&templateEx.lastIndex++;let e=a[0],s=t[a[1]];null==s&&(s=""),i=i.replace(e,s)}return i}}const templateEx=/\$(.*?)\$/gm,templateDir="/out/tpl/";class ShaderHandler{constructor(e){this.gl=e,this.shaderNames=[],this.shaders={},this.programs={}}setGL(e){this.gl=e}async loadShader(e,t){this.shaderNames.push(e),await this.load(e,t+e+".vert",this.gl.VERTEX_SHADER),await this.load(e,t+e+".frag",this.gl.FRAGMENT_SHADER)}async load(e,t,a){let i=e+"_"+a;if(!this.shaders[i]){let e=await FetchHandler.loadFile(t,!1),s=this.createShader(e,a);s&&(this.shaders[i]=s)}return!!this.shaders[i]}getShader(e,t){let a=e+"_"+t;return this.shaders[a]}getAllShaders(){return this.shaderNames}async createProgramForEach(e){e=e||this.shaderNames;for(let t=0;t Currently no Song is uploaded!","error",2e3),!1;let t=this,a=e.file;t.lastSong&&URL.revokeObjectURL(t.lastSong),t.lastSong=this.audioFile.src=URL.createObjectURL(a),this.isStarted||this.start().catch(alert),this.audioFile.play().then(t=>{pConf.get("showPlaying","true")&&NotificationHandler.createNotification("Now Playing:"+e.getAudioName(),"info",pConf.get("showPlayingTime",1e3)),window.dispatchEvent(new CustomEvent("playSong"))}).catch(e=>{NotificationHandler.createNotification(e.message,"error",1e3),player.nextSong()})}getIntArray(e){let t=new Uint8Array(e);return this.analyser.getByteFrequencyData(t),t}getFloatArray(){let e=new Float32Array(this.analyser.fftSize);return this.analyser.getFloatTimeDomainData(e),e}}class AudioPlayerFile{constructor(e,t){this.file=e,this.name=this.getName(),this.id3=null,this.index=t}getName(){let e=this.file.name.split(".");return e.pop(),e=e.join("."),e}getID3Tag(e){return e||null===this.id3?(eventHandler.sendData("getData",{file:this.file,name:this.name,index:this.index,force:!0===e}),{title:this.name,artist:"VA"}):this.id3}getAudioName(){let e=this.getID3Tag();return template.parseTemplate("audio-information",e)}}class FetchHandler{static files={};static async loadFiles(e,t){let a=[];for(let i=0;i';for(let a=0;a",this.content.innerHTML=t}async renderBase(){let e=await this.loadVisualConfig("base"),t=create("section");t.addClass("base"),t.innerHTML=GUIHelper.fromJSON(e,pConf),this.content.innerHTML=t.outerHTML}async renderVisualConfig(e){let t=await this.loadVisualConfig(e,vConf),a=create("section");a.addClass("visual"),a.innerHTML=GUIHelper.fromJSON(t,vConf),a.innerHTML+=GUIHelper.createButton({action:"resetVConf",name:"Reset Visual Config"}),a.innerHTML+=GUIHelper.createButton({action:"makeModalTransparent",name:"toggle Modal Opacity"}),this.content.innerHTML=a.outerHTML}async loadVisualConfig(e){let t=VisualConfig.visualTemplates;return t[e]||(t[e]=await FetchHandler.loadFile("/out/gui/"+e+".json",!0)),t[e]}}class Player{async init(){this.playlist=new Playlist}nextSong(){let e=this.playlist.getNext();audioHandler.loadSong(e)}prevSong(){let e=this.playlist.getPrevious();audioHandler.loadSong(e)}playStop(){if(!audioHandler.lastSong){let e=this.playlist.getCurrent();return void audioHandler.loadSong(e)}let e=audioHandler.audioFile;e.paused?e.play():e.pause(),window.dispatchEvent(new CustomEvent("playSong"))}stop(){if(!audioHandler.lastSong)return;let e=audioHandler.audioFile;e.pause(),e.currentTime=0,window.dispatchEvent(new CustomEvent("playSong"))}playByID(e){this.playlist.index=e;let t=this.playlist.getCurrent();audioHandler.loadSong(t)}}const PAGINATIONLIMIT=50;class Playlist{constructor(){this.list=[],this.shuffled=[],this.index=0,this.page=0,this.isShuffle=pConf.get("shuffle",!1),$("body").addDelegatedEventListener("change",'input[type="file"]',this.changeFiles.bind(this)),$("body").addDelegatedEventListener("click",".pagination .item",this.handlePagination.bind(this)),eventHandler.addEvent("id3-request",this.handle.bind(this)),eventHandler.addEvent("id3-request-force",this.forceID3.bind(this))}shuffle(){let e=this.list.length;if(e<3)this.shuffled=[0,1,2];else for(let t=0;tt&&(a=0),this.index=a,e[this.getRealIndex()]}getPrevious(){let e=this.list,t=e.length-1,a=this.index-1;return a<0&&(a=t),this.index=a,e[this.getRealIndex()]}getCurrent(){return this.list[this.getRealIndex()]}setPlaylist(e){this.index=0,this.forceData=void 0,this.list=e,this.shuffle()}handlePagination(e,t){t.hasClass("inactive")||(t.hasClass("next-site")?this.renderPagination(this.page+1):this.renderPagination(this.page-1))}renderPagination(e){void 0===e&&(e=this.page);let t=this.list.length,a=Math.ceil(t/50)-1;e<0&&(e=0),e>a&&(e=a);let i=50*e,s=i+50,n="";if(this.page=e,s>=t&&(s=t),t>0){let e=this.list;for(let t=i;t1&&e0?"active":"inactive",nextActive:r?"active":"inactive",page:e+1+" / "+parseInt(a+1)}))}changeFiles(e,t){if("upload-dir"!==t.id)return;let a=[],i=0;for(let e of t.files)if(e&&-1!==e.type.indexOf("audio")&&null===e.name.match(".m3u")){let t=new AudioPlayerFile(e,i++);a.push(t)}this.setPlaylist(a),a.length>0?(NotificationHandler.createNotification("Songs added successfully!
Songs: "+a.length,"success",3e3),this.renderPagination(0)):NotificationHandler.createNotification("File Upload failed!","error",3e3)}getRealIndex(e){return void 0===e&&(e=this.index),this.isShuffle?this.shuffled[e]:e}handle(e){let t=e.index;"waiting"!==e.status&&(this.list[t].id3=e,this.timeout&&window.clearTimeout(this.timeout),this.timeout=setTimeout(this.renderPagination.bind(this),100))}forceID3(e){let t=this;t.forceData||(t.forceData={},t.forceNotification=NotificationHandler.createNotification("TagReader -> 0 / "+t.list.length,"info",-1));let a=e.index;if("waiting"===e.status)return;t.list[a].id3=e,t.forceData[a]=!0;let i=Object.keys(t.forceData).length;this.forceNotification.updateMessageOnly("TagReader -> "+i+" / "+t.list.length),i===t.list.length&&t.forceNotification.remove()}}class GUI{async init(){this.data={},this.modal=new Modal,await template.loadArray(["playlist-item","playlist","playlist-footer","audio-information","inputs/color","inputs/input","inputs/slider","inputs/switch","inputs/select","inputs/option","help"]),this.initDropZone()}openHelp(){gui.modal.renderModal("Help",template.parseTemplate("help",{})),gui.modal.showModal()}initDropZone(){"drag dragstart dragend dragover dragenter dragleave drop".split(" ").forEach(e=>{window.addEventListener(e,async e=>{e.preventDefault(),e.stopPropagation(),"drop"===e.type&&(e.dataTransfer.files.length>0?(e.dataTransfer.id="upload-dir",player.playlist.changeFiles(e,e.dataTransfer)):alert("Sorry you need to upload files!"))})})}}class GUIHelper{static fromJSON(e,t){let a=[];for(let i of e)switch(i.type){case"slider":a.push(GUIHelper.createSliders(i,t));break;case"color":a.push(GUIHelper.createColorPicker(i,t));break;case"checkbox":a.push(GUIHelper.createCheckbox(i,t));break;case"input":a.push(GUIHelper.createInputField(i,t));break;case"select":a.push(GUIHelper.createSelect(i,t));break;case"button":a.push(GUIHelper.createButton(i,t));break;default:console.error("Unknown Type: "+i.type)}return a.join(" ")}static createSliders(e,t){let a="";if("object"==typeof e.name)for(let i=0;i${e.name}`}}class Modal{constructor(){this.currentModal="",this.modal=$("#modal"),this.open=!1,this.parent=this.modal.parentNode,this.modal.addDelegatedEventListener("click","header .close",this.closeModal.bind(this))}resetModal(){this.renderModal("","","")}renderModal(e,t,a){$("#modal").removeClass("lightMode"),this.currentModal=e,this.renderHeader(e),this.renderContent(t),this.renderFooter(a)}renderHeader(e){$("header .headline",this.modal).innerHTML=e}renderContent(e){$("modal-content",this.modal).innerHTML=e}renderFooter(e){$("modal-footer .inner",this.modal).innerHTML=e||"by VersusTuneZ"}closeModal(){this.parent.addClass("hide"),this.open=!1}isCurrent(e){return e===this.currentModal}showModal(){this.parent.removeClass("hide"),this.open=!0}}class Visual{constructor(){this.data=[],this.dataArray=[],this.name="Default"}updateData(){}updateFFT(e){}draw(){}setup(){}}class VisualDrawer{constructor(){this.visuals={wave:new Wave,wave2d:new Wave2D},this.lastMainColor={base:"#-1",color:[0,0,0]},this.lastSecondColor={base:"#-1",color:[0,0,0]}}init(){this.switch(pConf.get("visual","wave2d")),this.updateLoop()}switch(e){null!=this.visuals[e]&&(this.c=e,vConf.loadConfigByName(this.c),this.visuals[this.c].setup(),pConf.set("visual",this.c),pConf.save())}updateLoop(){let e=this.visuals[this.c],t=shaderHandler.use(this.c);this.updateSeekbar(),this.prepare(t),e.updateData(),e.draw(t),requestAnimationFrame(this.updateLoop.bind(this))}updateSeekbar(){cInfo.width=window.innerWidth,cInfo.height=window.innerHeight;let e=audioHandler.audioFile;if(ctx.clearRect(0,0,cInfo.width,cInfo.height),!e.paused&&pConf.get("showSeekbar",!0)){let t=e.duration,a=e.currentTime/t*cInfo.width;ctx.fillStyle=pConf.get("seekColor","#fff"),ctx.fillRect(0,c.height-10,a,c.height)}}prepare(e){c.width=window.innerWidth,c.height=window.innerHeight,gl.viewport(0,0,gl.canvas.width,gl.canvas.height),gl.clearColor(0,0,0,parseFloat(pConf.get("alphaValue",0))),gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT),gl.enable(gl.DEPTH_TEST),gl.depthFunc(gl.LEQUAL),gl.enable(gl.CULL_FACE),this.setColor(e)}setColor(e){let t=gl.getUniformLocation(e,"u_baseColor"),a=gl.getUniformLocation(e,"u_maxColor"),i=this.lastMainColor,s=this.lastSecondColor;this.updateColor("lastMainColor","baseColor"),this.updateColor("lastSecondColor","gradientToColor"),gl.uniform3fv(t,i.color),gl.uniform3fv(a,s.color)}updateColor(e,t){let a=this[e],i=vConf.get(t,"#ffffff");i!==a.base&&(a.color=hexToRgb(i),a.base=i)}}class ImageUploader{async init(){this.image=pConf.get("bgURL",""),this.color=pConf.get("bgColour","#000000"),this.alpha=pConf.get("alphaValue",.5),this.getRealImage(),this.applyValues(),$("#modal").addDelegatedEventListener("change",'#image-upload input:not([type="color"])',this.changeHandler.bind(this)),$("#modal").addDelegatedEventListener("input","#image-upload input#color",this.changeHandler.bind(this))}async renderModal(){await template.loadTemplate("image"),gui.modal.resetModal(),gui.modal.renderModal("Background-Image",template.parseTemplate("image",{value:this.image,bgValue:this.color,alphaValue:this.alpha}),""),gui.modal.showModal()}changeHandler(e,t){"color"===t.id?this.color=t.value:"alphaValue"===t.id?this.alpha=t.value:(pConf.set("bgMode",t.id),"image"===t.id?(t.files[0].toBase64((e,t)=>{t?alert("Error converting image!"):(pConf.set("bgURL",e.currentTarget.result),pConf.save())}),this.image=URL.createObjectURL(t.files[0])):(this.image=t.value,pConf.set("bgURL",this.image))),pConf.set("bgColour",this.color),pConf.set("alphaValue",this.alpha),this.applyValues(),pConf.save()}applyValues(){let e=$("body");e.style.backgroundImage="url("+this.image+")",e.style.backgroundColor=this.color}getRealImage(){let e=pConf.get("bgMode"),t=pConf.get("bgURL","");if("image"===e){if(""!==t&&t.startsWith("data:image")){let e=t.split(";"),a=e.shift(),i=e.join(";").replace("base64,","");this.image=URL.createObjectURL(b64toBlob(i,a))}}else this.image=t}}const imageUploader=new ImageUploader;class NotificationHandler{static instance=new NotificationHandler;constructor(){this.outer=$(".notification"),this.notifications=[]}async init(){await template.loadTemplate("notification")}static createNotification(e,t,a){a=parseInt(a||"3000");let i=NotificationHandler.instance,s=new Notification(e,t,a);return i.notifications.push(s),s.show(),s}}class Notification{constructor(e,t,a){this.outer=NotificationHandler.instance.outer,this.message=e,this.type=t,this.time=a,this.isRemoved=!1}async show(){let e=this,t=-1===e.time;e.item=create("div"),e.item.addClass("notification-item, "+e.type),t&&(e.type+=" endless"),e.updateContent(e.message),this.outer.prepend(e.item),t||setTimeout(this.remove.bind(this),e.time)}async remove(){if(this.isRemoved)return;this.isRemoved=!0,this.outer.removeChild(this.item);let e=NotificationHandler.instance.notifications,t=e.indexOf(this);e.splice(t,1)}updateContent(e){let t={message:e,time:-1===this.time?1e3:this.time+1,type:this.type};this.item.innerHTML=template.parseTemplate("notification",t)}updateMessageOnly(e){let t=$(".message",this.item);t&&(t.innerHTML=e)}}class Config{static allConfigs={};constructor(e){this.config={},this.name="",this.type=e,Config.allConfigs[e]=this}loadConfigByName(e){this.save(),this.name="config-"+e;let t=localStorage.getItem(this.name);t&&(this.config=JSON.parse(t))}save(){""!==this.name&&localStorage.setItem(this.name,JSON.stringify(this.config))}set(e,t){this.config[e]=t}remove(e){delete this.config[e]}get(e,t){let a=this.config[e];return null==a&&(this.config[e]=t,a=t),a}reset(){NotificationHandler.createNotification("CONFIG REQUEST SUCCESS FOR "+this.type,"success",2e3),this.config={},this.save()}}class Sphere extends Visual{constructor(){super(),this.name="Sphere"}draw(){}setup(){}}class Wave extends Visual{constructor(){super(),this.name="3D Wave"}updateData(){let e=audioHandler.getFloatArray(),t=2/e.length,a=-1,i=0;for(let s=0;s "+e.message)}return!0}return!1}}async function initHandler(){let e=$("body");$(".playlist.menu-icon").addEventListener("click",e=>{player.playlist.renderPagination(player.playlist.page),gui.modal.showModal()}),e.addDelegatedEventListener("click",".playlist-item",(e,t)=>{let a=t.dataset.index;player.playByID(parseInt(a)),togglePlayButton("pause")}),e.addDelegatedEventListener("click",".controls button",(e,t)=>{switch(t.id){case"previous":player.prevSong();break;case"next":player.nextSong();break;case"play":player.playStop();break;case"shuffle":toggleShuffle()}}),window.addEventListener("playSong",setActiveOnPlaylist),window.addEventListener("playSong",e=>{togglePlayButton(audioHandler.audioFile.paused?"play":"pause")}),$(".upload-image").addEventListener("click",imageUploader.renderModal.bind(imageUploader)),e.addDelegatedEventListener("click",".readAll",forceAllRead),e.addDelegatedEventListener("input",'.input-range input[type="range"]',(e,t)=>{$(".current",t.parentNode).innerText=t.value}),e.addDelegatedEventListener("input",'input[type="color"]',(e,t)=>{$(".colorBlob",t.parentNode).style.backgroundColor=t.value}),e.addDelegatedEventListener("click",".visual-item",(e,t)=>{visual.switch(t.dataset.id||"wave"),$("modal-content .visuals .active").removeClass("active"),t.addClass("active")}),e.addDelegatedEventListener("input","section.base input",(e,t)=>{"checkbox"===t.type?pConf.set(t.name,t.checked):setValue(t.name,t.value,pConf,t.dataset.type),pConf.save()}),e.addDelegatedEventListener("input","section.visual input",(e,t)=>{"checkbox"===t.type?vConf.set(t.name,t.checked):setValue(t.name,t.value,vConf,t.dataset.type),vConf.save()}),e.addDelegatedEventListener("click",".button[data-action]",(e,t)=>{switch(t.dataset.action){case"resetVConf":vConf.reset(),setTimeout(e=>{playerConf.handleById()},30);break;case"makeModalTransparent":$("#modal").toggleClass("lightMode")}}),$(".help.menu-icon").addEventListener("click",gui.openHelp),document.onfullscreenchange=t=>{e.hasClass("fullscreen")?e.removeClass("fullscreen"):e.addClass("fullscreen")}}function forceAllRead(){let e=player.playlist.list;for(let t=0;t{t.dataset.name===e?t.removeClass("hide"):t.addClass("hide")})}!function(){const e=$("body");e.addDelegatedEventListener("click","custom-select .label",(e,t)=>{let a=t.parentNode,i=$$("custom-option",a),s=$("custom-options",a);if(a.hasClass("open"))s.style.maxHeight="",a.removeClass("open");else{let e=0;i.forEach((function(t){e+=t.offsetHeight})),s.style.maxHeight=e+"px",a.addClass("open")}}),e.addDelegatedEventListener("click","custom-select custom-option",(e,t)=>{let a=t.closest("custom-select"),i=$("input",a);$$("custom-option.active").forEach(e=>{e.removeClass("active")}),t.addClass("active"),i&&(i.value=t.dataset.value||t.innerText,$(".label",a).innerText=t.innerText,a.removeClass("open"),t.parentNode.style.maxHeight="",window.dispatchEvent(new CustomEvent("selectChanged",{detail:{select:a,event:a.dataset.event,value:i.value,name:i.name}})))}),window.addEventListener("selectChanged",e=>{"visualConf"===e.detail.event&&(e.preventDefault(),e.stopPropagation(),function(e){try{let t=e.value,a=Config.allConfigs[e.select.dataset.conf];"fftSize"===e.name&&(t=parseInt(e.value),visual.visuals[visual.c].updateFFT(t)),a.set(e.name,t),a.save()}catch(e){console.error(e)}}(e.detail))})}();class KeyHandler{async init(){await this.mediaKeys(),await this.addKeyHandler(),window.addEventListener("keydown",this.keyHandler.bind(this))}async mediaKeys(){if("mediaSession"in navigator){let e=navigator.mediaSession;e.setActionHandler("play",player.playStop.bind(player)),e.setActionHandler("pause",player.playStop.bind(player)),e.setActionHandler("previoustrack",player.prevSong.bind(player)),e.setActionHandler("nexttrack",player.nextSong.bind(player)),e.setActionHandler("stop",player.stop.bind(player))}}async addKeyHandler(){eventHandler.addEvent("keys-Space",player.playStop.bind(player)),eventHandler.addEvent("keys-KeyN",player.nextSong.bind(player)),eventHandler.addEvent("keys-KeyV",player.prevSong.bind(player)),eventHandler.addEvent("keys-KeyS",playerConf.open.bind(playerConf)),eventHandler.addEvent("keys-KeyS-shift",toggleShuffle),eventHandler.addEvent("keys-KeyB",imageUploader.renderModal.bind(imageUploader)),eventHandler.addEvent("keys-KeyF-shift",forceAllRead),eventHandler.addEvent("keys-KeyH",gui.openHelp),eventHandler.addEvent("keys-KeyP",e=>{player.playlist.renderPagination(player.playlist.page),gui.modal.showModal()}),eventHandler.addEvent("keys-Escape, keys-KeyC-shift",e=>{gui.modal.resetModal(),gui.modal.closeModal()}),eventHandler.addEvent("keys-F11",e=>{document.fullscreenElement?document.exitFullscreen().catch(console.error):document.body.requestFullscreen().catch(console.error)})}async keyHandler(e){let t="keys-"+e.code+(e.shiftKey?"-shift":"")+(e.ctrlKey?"-ctrl":"");eventHandler.handleEvent({data:{cmd:t,data:t}})&&(e.preventDefault(),e.stopPropagation())}}class Startup{constructor(){this.modules={startup:!1,"id3-ready":!1}}moduleLoaded(e){this.modules[e]=!0,this.allModulesLoaded()}allModulesLoaded(){for(let e in this.modules)if(!this.modules[e])return!1;return window.dispatchEvent(new CustomEvent("startupFin")),!0}}const shaderHandler=new ShaderHandler(null),audioHandler=new AudioHandler,gui=new GUI,visual=new VisualDrawer,template=new Template,player=new Player,vConf=new Config("visual"),pConf=new Config("player"),worker=new Worker("/out/js/worker.min.js"),startup=new Startup,eventHandler=new EventHandler,playerConf=new PlayerConfigHandler,keyHandler=new KeyHandler,version=1,camera=new Camera;let c,gl,cInfo,ctx,sw;async function startUP(){if("serviceWorker"in navigator&&(sw=await navigator.serviceWorker.register("/sw.js")),pConf.loadConfigByName("default"),c=$("#c"),gl=c.getContext("webgl2"),cInfo=$("#cInfo"),ctx=cInfo.getContext("2d"),!gl)return alert("SORRY THE BROWSER DOESN'T SUPPORT WEBGL2"),!1;shaderHandler.setGL(gl),await shaderHandler.loadArray(["wave","sphere","water","wave2d"],"/shaders/"),await NotificationHandler.instance.init(),await audioHandler.init(),await player.init(),await camera.init(),await visual.init(),await gui.init(),await imageUploader.init(),await playerConf.init(),await keyHandler.init(),await initHandler(),toggleShuffle(!1)}worker.addEventListener("message",e=>{"startup"!==e.data.status?eventHandler.handleEvent(e):startup.moduleLoaded(e.data.cmd)}),window.addEventListener("startupFin",e=>{setTimeout(e=>{$(".loading-screen").remove()},100)}),startUP().then(e=>{startup.moduleLoaded("startup")}); \ No newline at end of file diff --git a/out/js/worker.js b/out/js/worker.js new file mode 100644 index 0000000..1bd5655 --- /dev/null +++ b/out/js/worker.js @@ -0,0 +1,217 @@ +class EventHandler { + constructor(worker) { + this.events = {}; + this.worker = worker; + this.worker.addEventListener('message', this.handleEvent.bind(this)); + } + + addEvent(name, cb) { + this.events[name] = cb; + } + + sendData(name, status, data) { + this.worker.postMessage({ + cmd: name, + status: status, + data: data + }); + } + + handleEvent(event) { + let data = event.data; + if (!data.cmd) { + return; + } + + if (this.events[data.cmd]) { + this.events[data.cmd](data.data); + } + } +} +class Database { + constructor(name, version) { + this.isInit = false; + this.name = name; + this.version = version; + this.errored = false; + this.db; + this.prepareDB(); + } + + async prepareDB() { + if (this.isInit || this.errored) { + return; + } + let req = this.db = indexedDB.open(this.name, this.version); + req.onerror = DatabaseHandler.onError.bind(this); + req.onsuccess = DatabaseHandler.onSuccess.bind(this); + req.onupgradeneeded = DatabaseHandler.onUpgrade.bind(this); + req.onblocked = DatabaseHandler.onBlocked.bind(this); + } + + async set(key, data, store) { + data['key'] = key; + return await this.run('put', data, store); + } + + async get(key, store) { + return await this.run('get', key, store); + } + + async remove(key, store) { + return await this.run('delete', key, store); + } + + check() { + return !(!this.isInit || this.errored); + } + + async getTX(store) { + return await this.db.transaction([store], "readwrite") + } + + async getObjectStore(tx, store) { + return await tx.objectStore(store) + } + + async run(action, key, store) { + if (this.check()) { + let tx = await this.getTX(store); + let obj = await this.getObjectStore(tx, store); + let data = await this.request(obj[action](key)); + await tx.complete + return await data; + } + return null; + } + + request(req) { + return new Promise((resolve, reject) => { + req.onsuccess = () => resolve(req.result); + req.onerror = () => reject(req.error); + }); + } +} + +class DatabaseHandler { + static onError(e) { + this.errored = true; + eventHandler.sendData("databaseError", "error", e.message); + } + + static onSuccess(e) { + this.db = this.db.result; + this.isInit = true; + eventHandler.sendData("databaseCreated", "success", ""); + eventHandler.handleEvent({ + data: { + cmd: 'dbReady-' + this.name, + data: this.db + } + }); + } + + static onUpgrade(e) { + eventHandler.sendData("databaseUpgradeNeeded", "info", e.message); + eventHandler.handleEvent({ + data: { + cmd: 'dbUpgrade-' + this.name, + data: this.db + } + }); + } + + static onBlocked(e) { + eventHandler.sendData("databaseBlocked", "error", e.message); + } +} +self.importScripts('jsmediatags.min.js'); + +class Tagger { + constructor(worker) { + this.db = new Database("SongLib", 1); + } + + static prepareName(data) { + let name = data.name || ''; + return name.replace(/[^\w\s]/gi, '').split(" ").join("") + } + + init() { + eventHandler.addEvent('getData', this.getData.bind(this)); + eventHandler.addEvent('removeData', this.getData.bind(this)); + eventHandler.addEvent('setData', this.getData.bind(this)); + eventHandler.addEvent('dbReady-SongLib', this.ready.bind(this)); + eventHandler.addEvent('dbUpgrade-SongLib', this.upgrade.bind(this)); + } + + async getData(data) { + let key = Tagger.prepareName(data), + newData = await this.db.get(key, 'songs'), + handlerName = data.force ? 'id3-request-force' : 'id3-request'; + if (newData) { + newData['index'] = data['index']; + eventHandler.sendData(handlerName, 'success', newData); + } else { + this.parseData(data, key).then(r => { + r['index'] = data['index']; + eventHandler.sendData(handlerName, 'success', r); + }); + eventHandler.sendData(handlerName, 'waiting', data); + } + } + + async removeData(data) { + let key = Tagger.prepareName(data), + newData = await this.db.remove(key, 'songs'); + eventHandler.sendData('id3-remove', 'success', newData); + } + + async setData(data, key) { + let newData = await this.db.set(key, data, 'songs'); + eventHandler.sendData('id3-set', 'success', newData); + } + + ready(data) { + console.log("[ID3] > Song Database Ready"); + eventHandler.sendData('id3-ready', "startup", ""); + } + + upgrade(data) { + let db = data.result, + songs = db.createObjectStore("songs", {keyPath: 'key'}); + songs.createIndex("name", "name", {unique: false}); + } + + //if not found in key-value storage read it! this take some time so this is async! + async parseData(data, key) { + let tag = await new Promise((resolve, reject) => { + new jsmediatags.Reader(data.file) + .read({ + onSuccess: (tag) => { + resolve(tag); + }, + onError: (error) => { + console.log(`[ID3] > Error Parsing Data!`); + resolve({ + tags: {} + }); + } + }); + }) + let tags = tag.tags, + values = { + title: tags.title || data.name, + artist: tags.artist || 'VA', + genre: tags.genre || 'Unknown', + year: tags.year || 1970, + key: key + }; + await this.setData(values, key); + return values; + } +} +const tagger = new Tagger(self), + eventHandler = new EventHandler(self); + +tagger.init(); \ No newline at end of file diff --git a/out/js/worker.min.js b/out/js/worker.min.js new file mode 100644 index 0000000..78573ff --- /dev/null +++ b/out/js/worker.min.js @@ -0,0 +1 @@ +class EventHandler{constructor(e){this.events={},this.worker=e,this.worker.addEventListener("message",this.handleEvent.bind(this))}addEvent(e,t){this.events[e]=t}sendData(e,t,a){this.worker.postMessage({cmd:e,status:t,data:a})}handleEvent(e){let t=e.data;t.cmd&&this.events[t.cmd]&&this.events[t.cmd](t.data)}}class Database{constructor(e,t){this.isInit=!1,this.name=e,this.version=t,this.errored=!1,this.db,this.prepareDB()}async prepareDB(){if(this.isInit||this.errored)return;let e=this.db=indexedDB.open(this.name,this.version);e.onerror=DatabaseHandler.onError.bind(this),e.onsuccess=DatabaseHandler.onSuccess.bind(this),e.onupgradeneeded=DatabaseHandler.onUpgrade.bind(this),e.onblocked=DatabaseHandler.onBlocked.bind(this)}async set(e,t,a){return t.key=e,await this.run("put",t,a)}async get(e,t){return await this.run("get",e,t)}async remove(e,t){return await this.run("delete",e,t)}check(){return!(!this.isInit||this.errored)}async getTX(e){return await this.db.transaction([e],"readwrite")}async getObjectStore(e,t){return await e.objectStore(t)}async run(e,t,a){if(this.check()){let s=await this.getTX(a),n=await this.getObjectStore(s,a),r=await this.request(n[e](t));return await s.complete,await r}return null}request(e){return new Promise((t,a)=>{e.onsuccess=()=>t(e.result),e.onerror=()=>a(e.error)})}}class DatabaseHandler{static onError(e){this.errored=!0,eventHandler.sendData("databaseError","error",e.message)}static onSuccess(e){this.db=this.db.result,this.isInit=!0,eventHandler.sendData("databaseCreated","success",""),eventHandler.handleEvent({data:{cmd:"dbReady-"+this.name,data:this.db}})}static onUpgrade(e){eventHandler.sendData("databaseUpgradeNeeded","info",e.message),eventHandler.handleEvent({data:{cmd:"dbUpgrade-"+this.name,data:this.db}})}static onBlocked(e){eventHandler.sendData("databaseBlocked","error",e.message)}}self.importScripts("jsmediatags.min.js");class Tagger{constructor(e){this.db=new Database("SongLib",1)}static prepareName(e){return(e.name||"").replace(/[^\w\s]/gi,"").split(" ").join("")}init(){eventHandler.addEvent("getData",this.getData.bind(this)),eventHandler.addEvent("removeData",this.getData.bind(this)),eventHandler.addEvent("setData",this.getData.bind(this)),eventHandler.addEvent("dbReady-SongLib",this.ready.bind(this)),eventHandler.addEvent("dbUpgrade-SongLib",this.upgrade.bind(this))}async getData(e){let t=Tagger.prepareName(e),a=await this.db.get(t,"songs"),s=e.force?"id3-request-force":"id3-request";a?(a.index=e.index,eventHandler.sendData(s,"success",a)):(this.parseData(e,t).then(t=>{t.index=e.index,eventHandler.sendData(s,"success",t)}),eventHandler.sendData(s,"waiting",e))}async removeData(e){let t=Tagger.prepareName(e),a=await this.db.remove(t,"songs");eventHandler.sendData("id3-remove","success",a)}async setData(e,t){let a=await this.db.set(t,e,"songs");eventHandler.sendData("id3-set","success",a)}ready(e){console.log("[ID3] > Song Database Ready"),eventHandler.sendData("id3-ready","startup","")}upgrade(e){e.result.createObjectStore("songs",{keyPath:"key"}).createIndex("name","name",{unique:!1})}async parseData(e,t){let a=(await new Promise((t,a)=>{new jsmediatags.Reader(e.file).read({onSuccess:e=>{t(e)},onError:e=>{console.log("[ID3] > Error Parsing Data!"),t({tags:{}})}})})).tags,s={title:a.title||e.name,artist:a.artist||"VA",genre:a.genre||"Unknown",year:a.year||1970,key:t};return await this.setData(s,t),s}}const tagger=new Tagger(self),eventHandler=new EventHandler(self);tagger.init(); \ No newline at end of file diff --git a/out/theme/style.css b/out/theme/style.css new file mode 100644 index 0000000..474fa50 --- /dev/null +++ b/out/theme/style.css @@ -0,0 +1 @@ +@charset "UTF-8";*{box-sizing:border-box}:focus{outline:0}body,html{padding:0;margin:0;overflow:hidden;font-size:16px;font-family:sans-serif;background-color:#303030;background-repeat:no-repeat;background-position:center;background-size:cover;width:100vw;height:100vh}div{position:fixed;color:#fff;padding:1em}.hide{display:none!important}.icon{width:1em;height:1em;vertical-align:middle;font-size:1em;shape-rendering:geometricPrecision;transition:transform .5s cubic-bezier(.22,.61,.36,1);stroke-width:5px;text-align:center;display:block}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-button{width:15px;height:15px}::-webkit-scrollbar-thumb{background:#e1e1e1;border:0 none #fff;border-radius:100px}::-webkit-scrollbar-thumb:hover{background:#fff}::-webkit-scrollbar-thumb:active{background:#3949ab}::-webkit-scrollbar-track{background:#666;border:0 none #fff;border-radius:46px}::-webkit-scrollbar-track:hover{background:#666}::-webkit-scrollbar-track:active{background:#666}::-webkit-scrollbar-corner{background:0 0}canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none}group{display:block;padding-bottom:10px;user-select:none}group-label{display:block;border-bottom:1px solid #fff;font-size:21px;font-weight:500;user-select:none}group-input{display:flex;align-items:center;margin-top:5px;user-select:none}group-input label{padding-right:10px;user-select:none;width:150px}group-input input{flex-grow:1;user-select:none;max-width:150px}group-input button{border:1px solid #dcdcdc;background-color:transparent;color:#fff;margin-left:5px}.closed{transform:translateX(-350px);transition:all .5s}.top-menu-left{display:flex}.top-menu-left div{position:relative}.loading-screen{z-index:100;background-color:#000;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}.loading-screen span{font-family:monospace;font-size:4vw;z-index:2}.loading-screen loader{position:absolute;top:calc(6vw + 10px);left:0;right:0;bottom:0;margin:auto;display:block;width:30vw;height:6px;transform:scaleX(0);transform-origin:left;background-color:#3949ab;animation:loadingBar 2s infinite}.loading-screen loader.delay{background-color:rgba(0,110,168,.24);filter:blur(1px);animation-delay:.05s}@keyframes loadingBar{0%,100%{transform:scaleX(0) scaleY(0)}50%{transform:scaleX(1) scaleY(1);transform-origin:left}100%,51%{transform-origin:right}}.grey-screen{position:fixed;top:0;left:0;background-color:rgba(0,0,0,.5);width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;z-index:100}.grey-screen.hide{display:none!important}modal-footer playlist{flex-direction:row-reverse;flex-wrap:wrap}modal-footer playlist .pagination{margin-left:auto}#image-upload form{display:flex;flex-direction:column;width:90%;margin:10px auto}.audio-item{display:flex;flex-direction:column}.audio-item .artist{font-size:.75em;color:#dcdcdc}.now-playing{font-size:.8em;display:block;margin-bottom:10px}.menus{z-index:10}body.fullscreen .menus{display:none}.help-list{display:flex;flex-direction:column}.help-list .item{padding:0 1em}.help-list .item:not(:last-child){border-bottom:1px solid #232323}.help-list .item .h2{font-size:1.2em;margin:10px 0 5px;display:block}.help-list .item p{font-size:.8em;color:#aaa}.range{-webkit-appearance:none;width:100%;margin:5px 0}.range.center{margin-left:auto;margin-right:auto}.range.right{margin-left:10%}.range:focus{outline:0}.range::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:rgba(0,0,0,.12);border-radius:15px;border:none}.range::-webkit-slider-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer;-webkit-appearance:none;margin-top:-5px}.range:focus::-webkit-slider-runnable-track{background:rgba(89,89,89,.12)}.range::-moz-range-track{width:100%;height:5px;cursor:pointer;background:rgba(0,0,0,.12);border-radius:15px;border:none}.range::-moz-range-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer}.range::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.range::-ms-fill-lower{background:rgba(0,0,0,.12);border:none;border-radius:30px}.range::-ms-fill-upper{background:rgba(0,0,0,.12);border:none;border-radius:30px}.range::-ms-thumb{border:0 solid rgba(0,0,30,0);height:15px;width:15px;border-radius:15px;background:#ff0089;cursor:pointer}.range:focus::-ms-fill-lower{background:rgba(0,0,0,.12)}.range:focus::-ms-fill-upper{background:rgba(89,89,89,.12)}.input{width:100%;position:relative;display:inline-block;margin-top:1rem;background-color:transparent}.input-range{margin-bottom:20px}input:focus+.input:after{width:100%}.input input:not([type=range]){border:none;border-bottom:2px solid #dcdcdc;position:relative;width:100%;background-color:transparent;padding:5px;color:#fff}.input input:not([type=range]):focus{outline:0}.input.center{margin-left:auto;margin-right:auto}.input.right{margin-left:10%}.input-label{display:none}.floating-label .input-label{display:block;position:absolute;top:0;transition:.4s cubic-bezier(.25,.8,.25,1);pointer-events:none;border-bottom:1px solid transparent}.floating-label input:focus~.input-label,.floating-label input:valid~.input-label{transform:translateY(-.72rem);color:#5ff507;font-size:.7rem}.floating-label input:valid~.input-label{transform:translateY(-.72rem);color:#ff0089;font-size:.7rem}.focus{content:'';width:0;background-color:#ff0089;position:absolute;bottom:0;left:0;right:0;margin:auto;height:2px;transition:.4s cubic-bezier(.8,.4,.25,1)}input:focus~.focus{width:100%}*{box-sizing:border-box}switch{display:flex;flex-direction:row;padding:5px}switch input{position:absolute;appearance:none;opacity:0}switch input:checked+label:after{transform:translateX(20px)}switch span{margin-left:10px}switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#dcdcdc;position:relative;cursor:pointer;padding:0}switch label:after{content:'';background-color:#3949ab;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}input[type=file]{position:fixed;left:-100000vw;height:1px;width:1px}input[type=color]{opacity:0}.color-picker{position:relative}.color-picker input{position:absolute!important;top:0}.colorBlob{display:block;width:100%;height:20px;margin:5px 0}.button{text-align:center;user-select:none;border-radius:5px;border:1px solid #3949ab;padding:.5em 1em;cursor:pointer;transition:.5s}.button.spaced{margin-bottom:10px}.button:hover{border-color:#ff0089;border-radius:7px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.input .current,.input .max,.input .min{font-size:.8em;color:#ff0089;position:absolute;bottom:-1rem}.input .current{display:block;width:100%;text-align:center}.input .min{left:0}.input .max{right:0}custom-select{width:auto;min-width:200px;display:block}custom-select label{color:#ff0089;font-size:.7rem}custom-select input{display:none}custom-select .label{padding:10px 30px 10px 10px;cursor:pointer;position:relative;transition:all .3s;box-shadow:inset 0 0 3px #5e5e5e}custom-select .label::after{content:'';border:solid #dcdcdc;border-width:0 3px 3px 0;display:inline-block;padding:3px;transform:rotate(45deg);-webkit-transform:rotate(45deg);transition:all .3s ease-in-out;position:absolute;right:10px;top:calc(50% - 6px)}custom-select custom-options{max-height:0;overflow:hidden;transition:all .5s ease;font-size:.9em;display:block;border:1px solid transparent}custom-select custom-option{display:block;width:100%;padding:10px 5px;cursor:pointer;box-shadow:0 -1px 0 0 rgba(0,0,0,.08)}custom-select custom-option:hover{background-color:#3949ab;color:#fff}custom-select custom-option.active{font-weight:700}custom-select.open .label{background-color:rgba(0,0,0,.1)}custom-select.open .label::after{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);top:calc(50% - 3px)}custom-select.open custom-options{max-height:none;border:1px solid #1b1b1b!important}.controls{right:0;display:flex}.controls button,.menu-icon{background-color:rgba(33,33,33,.6);border:none;font-size:1.4em;border-top:4px solid #3949ab;padding:1.5rem;cursor:pointer;color:#fff;transition:.5s}.controls button.active,.menu-icon.active{border-color:#ff0089}.controls button:hover,.menu-icon:hover{background-color:rgba(21,21,21,.7);border-color:#5ff507}playlist{display:flex;flex-direction:column}playlist div{padding:unset;position:unset}playlist .playlist-content h1{padding:0 1em}playlist .pagination{display:flex;justify-content:flex-end;font-size:1.5em;padding:5px}playlist .pagination .current{font-size:.9em}playlist .pagination .item{cursor:pointer;user-select:none;border-radius:5px;margin:0 3px;display:flex;align-items:center}playlist .pagination .item.inactive{color:#aaa;pointer-events:none;cursor:not-allowed}playlist .pagination .item:hover{color:#3949ab}playlist .playlist-item{display:flex;padding:5px;box-shadow:0 -1px 0 0 rgba(0,0,0,.08);cursor:pointer;transition:.5s}playlist .playlist-item.active{background-color:rgba(0,0,0,.2)}playlist .playlist-item.active .playlist-item-title:before{content:'🔊 ';padding-right:5px}playlist .playlist-item-title{margin-left:10px;padding:5px;display:flex;align-items:center}playlist .playlist-item-number{padding:5px 10px 5px 5px;width:50px;display:flex;align-items:center}playlist .playlist-item:hover{background-color:rgba(0,0,0,.4)}#modal{max-width:860px;width:90%;background-color:#303030;padding:unset;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);border-radius:15px;overflow:hidden}#modal.lightMode{background-color:rgba(0,0,0,.1)}#modal div{position:unset}#modal header{height:50px;font-size:30px;line-height:50px;padding-left:10px;overflow:hidden;background-color:#212121;display:flex;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}#modal header .headline{flex-grow:1}#modal header .close{margin-right:10px;font-size:24px;cursor:pointer}#modal header .close:hover{color:#3949ab}#modal modal-content{display:block;max-height:calc(100vh - 200px);overflow:auto}#modal modal-footer{display:block;box-shadow:0 -3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}#modal modal-footer .inner{padding:5px;width:calc(100% - 40px);margin:0 auto}.notification{right:10px;top:0;height:100%;display:flex;flex-direction:column-reverse;width:90%;max-width:400px;pointer-events:none}.notification .notification-item{margin-top:10px}.notification div{position:unset;padding:unset}.notification div.notification-item{position:relative}.notification-item{width:100%;border-radius:5px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);overflow:hidden}.notification-item.success{background-color:rgba(74,177,11,.6)}.notification-item.error{background-color:rgba(255,50,50,.6)}.notification-item.warning{background-color:rgba(255,177,89,.6)}.notification-item.info{background-color:rgba(71,73,171,.6)}.notification-item .message{padding:1em}.notification-item .fade-bar{animation:fadeOut ease-in-out 3s;height:100%;width:100%;position:absolute;top:0;z-index:-1;opacity:.4;transform-origin:left}.notification-item .fade-bar:after{content:'';z-index:1;bottom:0;height:4px;width:100%;position:absolute;background-color:#fff}.notification-item .fade-bar.endless{animation:endlessFade ease-in-out .5s infinite}.notification-item .fade-bar.success{background-color:#60ff00}.notification-item .fade-bar.error{background-color:#fa0000}.notification-item .fade-bar.warning{background-color:#f70}.notification-item .fade-bar.info{background-color:#3949ab}@keyframes fadeOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes endlessFade{0%{transform:scaleX(1);transform-origin:right}49%{transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1)}}.config-nav{display:flex;flex-direction:row;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.config-nav div{padding:10px 5px;cursor:pointer;user-select:none;border-bottom:1px solid transparent}.config-nav div.active{border-color:#5ff507}.config-nav div:hover{background-color:rgba(0,0,0,.4)}.config-content{padding:1em;min-height:200px}.config-content .visuals{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}.config-content .visuals .visual-item{display:flex;align-items:center;justify-content:center;padding:1em;min-width:100px;min-height:100px;background-color:#212121;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);transition:.5s;cursor:pointer}.config-content .visuals .visual-item:hover{background-color:#1b1b1b}.config-content .visuals .visual-item.active{border:1px solid #3949ab} \ No newline at end of file diff --git a/out/tpl/audio-information.tpl b/out/tpl/audio-information.tpl new file mode 100644 index 0000000..ea9a862 --- /dev/null +++ b/out/tpl/audio-information.tpl @@ -0,0 +1,4 @@ +
+ $artist$ + $title$ +
\ No newline at end of file diff --git a/out/tpl/config/content.tpl b/out/tpl/config/content.tpl new file mode 100644 index 0000000..1cb830a --- /dev/null +++ b/out/tpl/config/content.tpl @@ -0,0 +1,3 @@ +
+ $content$ +
\ No newline at end of file diff --git a/out/tpl/config/nav.tpl b/out/tpl/config/nav.tpl new file mode 100644 index 0000000..e8b6136 --- /dev/null +++ b/out/tpl/config/nav.tpl @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/out/tpl/config/visualitem.tpl b/out/tpl/config/visualitem.tpl new file mode 100644 index 0000000..025de23 --- /dev/null +++ b/out/tpl/config/visualitem.tpl @@ -0,0 +1,8 @@ +
+ + $title$ +
\ No newline at end of file diff --git a/out/tpl/help.tpl b/out/tpl/help.tpl new file mode 100644 index 0000000..8e1432a --- /dev/null +++ b/out/tpl/help.tpl @@ -0,0 +1,69 @@ + +
+
+ h +

+ Open Help Modal +

+
+
+ Space +

+ Switch between pause and play +

+
+
+ n +

+ Play next song +

+
+
+ v +

+ Play previous song +

+
+
+ s +

+ Open Settings Modal +

+
+
+ Shift + s +

+ Toggle Shuffle +

+
+
+ b +

+ Open background settings Modal +

+
+
+ Shift + f +

+ Force Song Tagger! +

+
+
+ p +

+ Show Playlist Modal +

+
+
+ ESC or Shift + C +

+ Close current open Modal +

+
+
+ F11 +

+ Toggle Fullscreen and hide GUI +

+
+
\ No newline at end of file diff --git a/out/tpl/image.tpl b/out/tpl/image.tpl new file mode 100644 index 0000000..f06a0d1 --- /dev/null +++ b/out/tpl/image.tpl @@ -0,0 +1,30 @@ +
+
+ + + + + +

You only want to change the color? do it!

+ + + +
+
\ No newline at end of file diff --git a/out/tpl/inputs/color.tpl b/out/tpl/inputs/color.tpl new file mode 100644 index 0000000..6a8a581 --- /dev/null +++ b/out/tpl/inputs/color.tpl @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/out/tpl/inputs/input.tpl b/out/tpl/inputs/input.tpl new file mode 100644 index 0000000..af54767 --- /dev/null +++ b/out/tpl/inputs/input.tpl @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/out/tpl/inputs/option.tpl b/out/tpl/inputs/option.tpl new file mode 100644 index 0000000..83a9a38 --- /dev/null +++ b/out/tpl/inputs/option.tpl @@ -0,0 +1,3 @@ + + $value$ + \ No newline at end of file diff --git a/out/tpl/inputs/select.tpl b/out/tpl/inputs/select.tpl new file mode 100644 index 0000000..8cb6aae --- /dev/null +++ b/out/tpl/inputs/select.tpl @@ -0,0 +1,8 @@ + + +
$value$
+ + + $options$ + + \ No newline at end of file diff --git a/out/tpl/inputs/slider.tpl b/out/tpl/inputs/slider.tpl new file mode 100644 index 0000000..bf18d71 --- /dev/null +++ b/out/tpl/inputs/slider.tpl @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/out/tpl/inputs/switch.tpl b/out/tpl/inputs/switch.tpl new file mode 100644 index 0000000..5083844 --- /dev/null +++ b/out/tpl/inputs/switch.tpl @@ -0,0 +1,5 @@ + + + + $showName$ + \ No newline at end of file diff --git a/out/tpl/notification.tpl b/out/tpl/notification.tpl new file mode 100644 index 0000000..031e551 --- /dev/null +++ b/out/tpl/notification.tpl @@ -0,0 +1,4 @@ +
+ $message$ +
+
\ No newline at end of file diff --git a/out/tpl/playlist-footer.tpl b/out/tpl/playlist-footer.tpl new file mode 100644 index 0000000..de05b5a --- /dev/null +++ b/out/tpl/playlist-footer.tpl @@ -0,0 +1,20 @@ + + +
+ Force Tagger +
+ \ No newline at end of file diff --git a/out/tpl/playlist-item.tpl b/out/tpl/playlist-item.tpl new file mode 100644 index 0000000..a6f0512 --- /dev/null +++ b/out/tpl/playlist-item.tpl @@ -0,0 +1,4 @@ + +
$nr$
+
$title$
+ \ No newline at end of file diff --git a/out/tpl/playlist.tpl b/out/tpl/playlist.tpl new file mode 100644 index 0000000..3ad6108 --- /dev/null +++ b/out/tpl/playlist.tpl @@ -0,0 +1,5 @@ + +
+ $content$ +
+ \ No newline at end of file diff --git a/raw/gui/base.json b/raw/gui/base.json new file mode 100644 index 0000000..61321b6 --- /dev/null +++ b/raw/gui/base.json @@ -0,0 +1,39 @@ +[ + { + "group": "", + "name": "showSeekbar", + "showName": "Show Seekbar", + "type": "checkbox", + "value": true, + "tooltip": "Showing SeekBar at the Bottom of the Screen" + }, + { + "group": "", + "name": "showPlaying", + "showName": "Show Playing", + "type": "checkbox", + "value": true, + "tooltip": "Showing \"Now Playing\" Notification" + }, + { + "group": "", + "name": "showPlayingTime", + "showName": "Now Playing Display Time", + "type": "slider", + "value": 1000, + "max": 5000, + "min": 500, + "tooltip": "How long should the Now Playing Notification shown", + "stepSize": 100, + "dataType": "int" + }, + { + "group": "", + "name": "seekColor", + "showName": "SeekBar Color", + "type": "color", + "value": "#ffffff", + "dataType": "rgb", + "tooltip": "SeekBar Color!" + } +] \ No newline at end of file diff --git a/raw/gui/sphere.json b/raw/gui/sphere.json new file mode 100644 index 0000000..f4d3e11 --- /dev/null +++ b/raw/gui/sphere.json @@ -0,0 +1,135 @@ +[ + { + "group": "rotation", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + 0, + 1, + 2 + ], + "type": "slider", + "max": 360, + "min": 0 + }, + { + "group": "rotation", + "name": [ + "X-Inc", + "Y-Inc", + "Z-Inc" + ], + "props": [ + 0, + 1, + 2 + ], + "type": "slider", + "max": 1, + "min": 0, + "stepSize": 0.01 + }, + { + "group": "rotation", + "name": "by-Beat", + "type": "checkbox", + "value": true, + "tooltip": "Rotate the Sphere based by Beat
Low-Freq = Y, Mid-Freq = Z, High-Freq = X" + }, + { + "group": "color", + "name": [ + "R", + "G", + "B" + ], + "props": [ + "r", + "g", + "b" + ], + "type": "slider", + "max": 255, + "min": 0, + "value": 255 + }, + { + "group": "light", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + 0, + 1, + 2 + ], + "type": "slider", + "max": 1, + "min": -1, + "value": 0, + "stepSize": 0.1 + }, + { + "group": "light", + "name": "Light", + "type": "slider", + "max": 1, + "min": 0, + "stepSize": 0.05 + }, + { + "group": "color", + "name": "by-Beat", + "type": "checkbox", + "value": true, + "tooltip": "Draw The Color Strength based on the Low-Freq" + }, + { + "group": "draw", + "name": "DrawMode", + "type": "slider", + "max": 6, + "min": 0 + }, + { + "group": "draw", + "name": "Form", + "type": "slider", + "max": 4, + "min": 0 + }, + { + "group": "draw", + "name": "Radius", + "type": "slider", + "max": 1500, + "min": 20 + }, + { + "group": "draw", + "name": "Total", + "type": "slider", + "max": 200, + "min": 20 + }, + { + "group": "draw", + "name": "PointSize", + "type": "slider", + "max": 10, + "min": 1, + "stepSize": 0.2 + }, + { + "group": "draw", + "name": "Dirty", + "type": "checkbox", + "value": false, + "tooltip": "Full Draw or with less Points" + } +] \ No newline at end of file diff --git a/raw/gui/wave.json b/raw/gui/wave.json new file mode 100644 index 0000000..21fbd78 --- /dev/null +++ b/raw/gui/wave.json @@ -0,0 +1,102 @@ +[ + { + "group": "", + "name": "fftSize", + "showName": "FFT-Size", + "options": [ + 2048, + 4096, + 8192, + 16384 + ], + "value": 4096, + "type": "select", + "tooltip": "How Many Items should the FFT Capture and Render", + "dataType": "int" + }, + { + "group": "rotation", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + "x", + "y", + "z" + ], + "type": "slider", + "max": 360, + "min": -360, + "value": 0, + "dataType": "int" + }, + { + "group": "rotation", + "name": [ + "X-Inc", + "Y-Inc", + "Z-Inc" + ], + "props": [ + "x-inc", + "y-inc", + "z-inc" + ], + "type": "slider", + "max": 1, + "min": -1, + "value": 0, + "stepSize": 0.01, + "dataType": "float" + }, + { + "group": "light", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + "x", + "y", + "z" + ], + "type": "slider", + "max": 100, + "min": -100, + "value": 0, + "dataType": "int" + }, + { + "group": "light", + "name": "light-strength", + "showName": "Light Brightness", + "type": "slider", + "value": 0.3, + "max": 1, + "min": 0, + "stepSize": 0.05, + "tooltip": "brightness of light-point", + "dataType": "float" + }, + { + "group": "", + "name": "baseColor", + "showName": "Base Color", + "type": "color", + "value": "#0089ff", + "dataType": "rgb", + "tooltip": "Base Color!" + }, + { + "group": "", + "name": "gradientToColor", + "showName": "Second Color", + "type": "color", + "value": "#ff0000", + "dataType": "rgb", + "tooltip": "Second Color!" + } +] \ No newline at end of file diff --git a/raw/gui/wave2d.json b/raw/gui/wave2d.json new file mode 100644 index 0000000..bac8e08 --- /dev/null +++ b/raw/gui/wave2d.json @@ -0,0 +1,104 @@ +[ + { + "group": "", + "name": "fftSize", + "showName": "FFT-Size", + "options": [ + 2048, + 4096, + 8192, + 16384, + 32768 + ], + "value": 16384, + "type": "select", + "tooltip": "How Many Items should the FFT Capture and Render", + "dataType": "int" + }, + { + "group": "rotation", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + "x", + "y", + "z" + ], + "type": "slider", + "max": 360, + "min": -360, + "value": 0, + "dataType": "int" + }, + { + "group": "rotation", + "name": [ + "X-Inc", + "Y-Inc", + "Z-Inc" + ], + "props": [ + "x-inc", + "y-inc", + "z-inc" + ], + "type": "slider", + "max": 1, + "min": -1, + "value": 0, + "stepSize": 0.01, + "dataType": "float" + }, + { + "group": "translate", + "name": [ + "X", + "Y", + "Z" + ], + "props": [ + "x", + "y", + "z" + ], + "type": "slider", + "max": 1, + "min": -1, + "value": 0, + "stepSize": 0.01, + "dataType": "float" + }, + { + "group": "", + "name": "fudgeFactor", + "showName": "Fudge Factor", + "type": "slider", + "value": 1, + "max": 2, + "min": 0, + "tooltip": "z to w Fudge", + "stepSize": 0.1, + "dataType": "float" + }, + { + "group": "", + "name": "baseColor", + "showName": "Base Color", + "type": "color", + "value": "#0089ff", + "dataType": "rgb", + "tooltip": "Base Color!" + }, + { + "group": "", + "name": "gradientToColor", + "showName": "Second Color", + "type": "color", + "value": "#ff0000", + "dataType": "rgb", + "tooltip": "Second Color!" + } +] \ No newline at end of file diff --git a/raw/icons/.gitkeep b/raw/icons/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/raw/javascript/FetchHandler.js b/raw/javascript/FetchHandler.js new file mode 100644 index 0000000..53b58cf --- /dev/null +++ b/raw/javascript/FetchHandler.js @@ -0,0 +1,36 @@ +class FetchHandler { + static files = {}; + + static async loadFiles(array, isJSON) { + let content = []; + for (let i = 0; i < array; i++) { + content.push(await FetchHandler.loadFile(array[i], isJSON)); + } + return content; + } + + static async loadFile(filename, isJSON) { + filename += '?v=' + version; + let files = FetchHandler.files; + if (files[filename]) { + return files[filename]; + } + let data = await FetchHandler.tryFromCache(filename); + if (isJSON) { + data = JSON.parse(data); + } + files[filename] = data; + return data; + } + + static async tryFromCache(filename) { + if (caches) { + let cache = await caches.open('vis3d-pwa-1'); + let data = await cache.match(filename); + if (!data) { + data = await fetch(filename); + } + return await data.text(); + } + } +} \ No newline at end of file diff --git a/raw/javascript/FileHandler.js b/raw/javascript/FileHandler.js new file mode 100644 index 0000000..41f2785 --- /dev/null +++ b/raw/javascript/FileHandler.js @@ -0,0 +1,37 @@ +// Handler around the Playlist file to keep track on the ID3 and more! +class AudioPlayerFile { + constructor(file, index) { + this.file = file; + this.name = this.getName(); + this.id3 = null; + this.index = index; + } + + getName() { + let name = this.file.name.split("."); + name.pop(); + name = name.join("."); + return name; + } + + getID3Tag(force) { + if (!force && this.id3 !== null) { + return this.id3; + } + eventHandler.sendData('getData', { + file: this.file, + name: this.name, + index: this.index, + force: force === true + }); + return { + title: this.name, + artist: 'VA', + } + } + + getAudioName() { + let tag = this.getID3Tag(); + return template.parseTemplate('audio-information', tag); + } +} \ No newline at end of file diff --git a/raw/javascript/app.js b/raw/javascript/app.js new file mode 100644 index 0000000..969f55f --- /dev/null +++ b/raw/javascript/app.js @@ -0,0 +1,63 @@ +const shaderHandler = new ShaderHandler(null), + audioHandler = new AudioHandler(), + gui = new GUI(), + visual = new VisualDrawer(), + template = new Template(), + player = new Player(), + vConf = new Config("visual"), + pConf = new Config("player"), + worker = new Worker('/out/js/worker.min.js'), + startup = new Startup(), + eventHandler = new EventHandler(), + playerConf = new PlayerConfigHandler(), + keyHandler = new KeyHandler(), + version = 1, + camera = new Camera(); + +let c, gl, cInfo, ctx, sw; + +worker.addEventListener('message', e => { + if (e.data.status === 'startup') { + startup.moduleLoaded(e.data.cmd); + return; + } + eventHandler.handleEvent(e); +}); + +window.addEventListener('startupFin', e => { + setTimeout(e => { + $('.loading-screen').remove(); + }, 100) +}) + +async function startUP() { + if ('serviceWorker' in navigator) { + sw = await navigator.serviceWorker.register('/sw.js'); + } + pConf.loadConfigByName('default'); + c = $('#c'), + gl = c.getContext("webgl2"), + cInfo = $('#cInfo'), + ctx = cInfo.getContext('2d'); + if (!gl) { + alert("SORRY THE BROWSER DOESN'T SUPPORT WEBGL2"); + return false; + } + shaderHandler.setGL(gl) + await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], '/shaders/'); + await NotificationHandler.instance.init(); + await audioHandler.init(); + await player.init(); + await camera.init(); + await visual.init(); + await gui.init(); + await imageUploader.init(); + await playerConf.init(); + await keyHandler.init(); + await initHandler(); + toggleShuffle(false); +} + +startUP().then(r => { + startup.moduleLoaded('startup'); +}); \ No newline at end of file diff --git a/raw/javascript/audio.js b/raw/javascript/audio.js new file mode 100644 index 0000000..8f438df --- /dev/null +++ b/raw/javascript/audio.js @@ -0,0 +1,84 @@ +const AudioContext = window.AudioContext || window.webkitAudioContext; + +class AudioHandler { + async init() { + let self = this; + self.isStarted = false; + self.audioFile = new Audio(); + self.actx = new AudioContext(); + self.analyser = self.actx.createAnalyser(); + self.analyser.fftSize = 4096; + self.lastSong = null; + await self.connectAll(); + } + + async connectAll() { + let self = this; + self.source = self.actx.createMediaElementSource(self.audioFile); + self.source.connect(self.analyser); + self.analyser.connect(self.actx.destination); + self.audioFile.addEventListener('ended', player.nextSong.bind(player)); + } + + async start() { + if (this.audioFile.src === '') { + return; + } + if (!this.isStarted) { + this.isStarted = true; + await this.actx.resume(); + } + } + + async stop() { + if (this.isStarted) { + this.isStarted = false; + await this.actx.suspend(); + } + } + + fftSize(size) { + this.analyser.fftSize = size; + } + + smoothing(float) { + this.analyser.smoothingTimeConstant = float; + } + + loadSong(file) { + if (!file) { + NotificationHandler.createNotification("Sorry!
Currently no Song is uploaded!", "error", 2000); + return false; + } + let self = this, + src = file.file; + if (self.lastSong) { + URL.revokeObjectURL(self.lastSong); + } + self.lastSong = this.audioFile.src = URL.createObjectURL(src); + if (!this.isStarted) { + this.start().catch(alert); + } + this.audioFile.play().then(e => { + if (pConf.get("showPlaying", "true")) { + NotificationHandler.createNotification("Now Playing:" + file.getAudioName(), "info", pConf.get("showPlayingTime", 1000)); + } + window.dispatchEvent(new CustomEvent('playSong')); + }).catch(e => { + NotificationHandler.createNotification(e.message, "error", 1000); + player.nextSong(); + }); + } + + getIntArray(steps) { + let dataArray = new Uint8Array(steps); + this.analyser.getByteFrequencyData(dataArray); + return dataArray; + } + + getFloatArray() { + let dataArray = new Float32Array(this.analyser.fftSize); + this.analyser.getFloatTimeDomainData(dataArray); + return dataArray; + } +} \ No newline at end of file diff --git a/raw/javascript/config.js b/raw/javascript/config.js new file mode 100644 index 0000000..476a09b --- /dev/null +++ b/raw/javascript/config.js @@ -0,0 +1,48 @@ +class Config { + static allConfigs = {}; + + constructor(type) { + this.config = {}; + this.name = '' + this.type = type; + Config.allConfigs[type] = this; + } + + loadConfigByName(name) { + this.save(); + this.name = 'config-' + name; + let item = localStorage.getItem(this.name); + if (item) { + this.config = JSON.parse(item); + } + } + + save() { + if (this.name !== '') { + localStorage.setItem(this.name, JSON.stringify(this.config)); + } + } + + set(name, value) { + this.config[name] = value; + } + + remove(name) { + delete this.config[name]; + } + + get(name, def) { + let value = this.config[name]; + if (value === undefined || value === null) { + this.config[name] = def; + value = def; + } + return value; + } + + reset() { + NotificationHandler.createNotification(`CONFIG REQUEST SUCCESS FOR ${this.type}`, "success", 2000); + this.config = {}; + this.save(); + } +} \ No newline at end of file diff --git a/raw/javascript/eventHandler.js b/raw/javascript/eventHandler.js new file mode 100644 index 0000000..9bf20b5 --- /dev/null +++ b/raw/javascript/eventHandler.js @@ -0,0 +1,185 @@ +class EventHandler { + constructor() { + this.events = {}; + } + + addEvent(events, cb) { + let names = events.split(","); + for (let name of names) { + this.events[name.trim()] = cb; + } + } + + sendData(name, data) { + worker.postMessage({ + cmd: name, + data: data + }); + } + + handleEvent(event) { + let data = event.data; + if (!data.cmd) { + return false; + } + + if (this.events[data.cmd]) { + try { + this.events[data.cmd](data.data); + } catch (e) { + console.error('[EventHandler] > ' + e.message); + } + return true; + } + return false; + } +} + +async function initHandler() { + let body = $('body'); + $('.playlist.menu-icon').addEventListener('click', e => { + player.playlist.renderPagination(player.playlist.page); + gui.modal.showModal(); + }); + + body.addDelegatedEventListener('click', '.playlist-item', (e, el) => { + let number = el.dataset.index; + player.playByID(parseInt(number)); + togglePlayButton('pause'); + }); + + body.addDelegatedEventListener('click', '.controls button', (e, el) => { + switch (el.id) { + case 'previous': + player.prevSong(); + break; + case 'next': + player.nextSong() + break; + case 'play': + player.playStop(); + break; + case 'shuffle': + toggleShuffle(); + break; + } + }); + window.addEventListener('playSong', setActiveOnPlaylist); + window.addEventListener('playSong', e => { + togglePlayButton(audioHandler.audioFile.paused ? 'play' : 'pause'); + }); + $('.upload-image').addEventListener('click', imageUploader.renderModal.bind(imageUploader)); + body.addDelegatedEventListener('click', '.readAll', forceAllRead); + + body.addDelegatedEventListener('input', '.input-range input[type="range"]', (e, el) => { + let current = $('.current', el.parentNode); + current.innerText = el.value; + }); + + body.addDelegatedEventListener('input', 'input[type="color"]', (e, el) => { + let parent = el.parentNode; + $('.colorBlob', parent).style.backgroundColor = el.value; + }) + + body.addDelegatedEventListener('click', '.visual-item', (e, el) => { + visual.switch(el.dataset.id || 'wave'); + $('modal-content .visuals .active').removeClass('active'); + el.addClass('active'); + }) + + body.addDelegatedEventListener('input', 'section.base input', (e, el) => { + if (el.type === 'checkbox') { + pConf.set(el.name, el.checked); + } else { + setValue(el.name, el.value, pConf, el.dataset.type); + } + pConf.save(); + }) + body.addDelegatedEventListener('input', 'section.visual input', (e, el) => { + if (el.type === 'checkbox') { + vConf.set(el.name, el.checked); + } else { + setValue(el.name, el.value, vConf, el.dataset.type); + } + vConf.save(); + }) + + body.addDelegatedEventListener('click', '.button[data-action]', (e, el) => { + switch (el.dataset.action) { + case 'resetVConf': + vConf.reset(); + setTimeout(e => { + playerConf.handleById(); + }, 30); + break; + case 'makeModalTransparent': + $('#modal').toggleClass('lightMode') + break; + } + }) + + $('.help.menu-icon').addEventListener('click', gui.openHelp); + + document.onfullscreenchange = e => { + if (body.hasClass('fullscreen')) { + body.removeClass('fullscreen') + } else { + body.addClass('fullscreen') + } + } +} + +function forceAllRead() { + let playlist = player.playlist.list; + for (let i = 0; i < playlist.length; i++) { + playlist[i].getID3Tag(true); + } +} + + +function setValue(name, value, conf, type) { + switch (type) { + case 'float': + value = parseFloat(value); + break; + case 'int': + value = parseInt(value); + break; + } + conf.set(name, value); +} + +function setActiveOnPlaylist(e) { + let item = $('.playlist-item[data-index="' + player.playlist.index + '"]'), + active = $('.playlist-item.active'); + if (active) { + active.removeClass('active'); + } + if (item) { + item.addClass('active'); + } +} + +function toggleShuffle(updateGUI) { + let active = player.playlist.isShuffle; + if (updateGUI !== false) { + active = !active; + let status = active ? 'enabled' : 'disabled'; + NotificationHandler.createNotification("Shuffle: " + status, "info", 500); + pConf.set("shuffle", active); + pConf.save(); + player.playlist.isShuffle = active; + } + $('#shuffle').toggleCheck('active', active); +} + +function togglePlayButton(status) { + let icons = $$('#play .icon'); + icons.forEach(el => { + if (el.dataset.name === status) { + el.removeClass('hide'); + } else { + el.addClass('hide'); + } + }) +} \ No newline at end of file diff --git a/raw/javascript/gl/Camera.js b/raw/javascript/gl/Camera.js new file mode 100644 index 0000000..5783af0 --- /dev/null +++ b/raw/javascript/gl/Camera.js @@ -0,0 +1,78 @@ +class Camera { + constructor() { + this.mouse; + this.rotation = { + x: 0, + y: 0 + } + this.lastMouse; + this.mousePressed = false; + this.translate = { + x: 0, + y: 0, + z: 0 + } + } + + async init() { + this.mouse = { + x: 0, + y: 0 + } + window.addEventListener('mousedown', this.mouseDown.bind(this)); + window.addEventListener('mouseup', this.mouseUp.bind(this)); + window.addEventListener('mousemove', this.mouseMove.bind(this), {passive: true}); + eventHandler.addEvent('keys-ArrowUp, keys-ArrowDown, keys-ArrowLeft, keys-ArrowRight, keys-KeyQ, keys-KeyE', this.keyPressed.bind(this)); + } + + mouseDown() { + this.mousePressed = true; + this.lastMouse = null; + } + + mouseUp() { + this.mousePressed = false; + this.lastMouse = null; + } + + mouseMove(event) { + if (!this.mousePressed || gui.modal.open) { + return; + } + if (this.lastMouse) { + let mouse = this.mouse, + rotate = this.rotation; + mouse.x += (this.lastMouse.x - event.clientX) * 0.2; + mouse.y += (this.lastMouse.y - event.clientY) * 0.2; + rotate.x = VTUtils.map(mouse.x, -c.width, c.width, 180, -180, false); + rotate.y = VTUtils.map(mouse.y, -c.height, c.height, 180, -180, false); + } + this.lastMouse = { + x: event.clientX, + y: event.clientY + } + } + + keyPressed(data) { + switch (data) { + case 'keys-ArrowUp': + this.translate.z += 10; + break; + case 'keys-ArrowDown': + this.translate.z -= 10; + break; + case 'keys-ArrowLeft': + this.translate.x -= 10; + break; + case 'keys-ArrowRight': + this.translate.x += 10; + break; + case 'keys-KeyQ': + this.translate.y += 10; + break; + case 'keys-KeyE': + this.translate.y -= 10; + break; + } + } +} \ No newline at end of file diff --git a/raw/javascript/gl/glUtils.js b/raw/javascript/gl/glUtils.js new file mode 100644 index 0000000..e6bf427 --- /dev/null +++ b/raw/javascript/gl/glUtils.js @@ -0,0 +1,391 @@ +// most of the functions are from https://webglfundamentals.org/webgl/resources/m4.js! but i doesnt want to use them all and make some adjustment to them! +class TDUtils { + static lastMatrix = {m: null}; + + static multiply(a, b) { + let b00 = b[0]; + let b01 = b[1]; + let b02 = b[2]; + let b03 = b[3]; + let b10 = b[4]; + let b11 = b[5]; + let b12 = b[6]; + let b13 = b[7]; + let b20 = b[8]; + let b21 = b[9]; + let b22 = b[10]; + let b23 = b[11]; + let b30 = b[12]; + let b31 = b[13]; + let b32 = b[14]; + let b33 = b[15]; + let a00 = a[0]; + let a01 = a[1]; + let a02 = a[2]; + let a03 = a[3]; + let a10 = a[4]; + let a11 = a[5]; + let a12 = a[6]; + let a13 = a[7]; + let a20 = a[8]; + let a21 = a[9]; + let a22 = a[10]; + let a23 = a[11]; + let a30 = a[12]; + let a31 = a[13]; + let a32 = a[14]; + let a33 = a[15]; + return [ + b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30, + b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31, + b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32, + b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33, + b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30, + b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31, + b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32, + b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33, + b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30, + b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31, + b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32, + b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33, + b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30, + b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31, + b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32, + b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33 + ]; + } + + static translate(m, tx, ty, tz, dst) { + dst = dst || new Float32Array(16); + + let m00 = m[0], + m01 = m[1], + m02 = m[2], + m03 = m[3], + m10 = m[4], + m11 = m[5], + m12 = m[6], + m13 = m[7], + m20 = m[8], + m21 = m[9], + m22 = m[10], + m23 = m[11], + m30 = m[12], + m31 = m[13], + m32 = m[14], + m33 = m[15]; + dst[0] = m00; + dst[1] = m01; + dst[2] = m02; + dst[3] = m03; + dst[4] = m10; + dst[5] = m11; + dst[6] = m12; + dst[7] = m13; + dst[8] = m20; + dst[9] = m21; + dst[10] = m22; + dst[11] = m23; + + dst[12] = m00 * tx + m10 * ty + m20 * tz + m30; + dst[13] = m01 * tx + m11 * ty + m21 * tz + m31; + dst[14] = m02 * tx + m12 * ty + m22 * tz + m32; + dst[15] = m03 * tx + m13 * ty + m23 * tz + m33; + + return dst; + } + + static xRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + 1, 0, 0, 0, + 0, c, s, 0, + 0, -s, c, 0, + 0, 0, 0, 1, + ]; + } + + static yRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + c, 0, -s, 0, + 0, 1, 0, 0, + s, 0, c, 0, + 0, 0, 0, 1, + ]; + } + + static zRotation(angle) { + angle = TDUtils.degToRad(angle); + let c = Math.cos(angle); + let s = Math.sin(angle); + + return [ + c, s, 0, 0, + -s, c, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1, + ]; + } + + static degToRad(d) { + return d * Math.PI / 180; + } + + static scale(sx, sy, sz, dst) { + dst = dst || new Float32Array(16); + dst[0] = sx; + dst[5] = sy; + dst[10] = sz; + return dst; + } + + static lookAt(cameraPosition, target, up, dst) { + dst = dst || new Float32Array(16); + let zAxis = TDUtils.normalize( + TDUtils.subtractVectors(cameraPosition, target)); + let xAxis = TDUtils.normalize(TDUtils.cross(up, zAxis)); + let yAxis = TDUtils.normalize(TDUtils.cross(zAxis, xAxis)); + + dst[0] = xAxis[0]; + dst[1] = xAxis[1]; + dst[2] = xAxis[2]; + dst[4] = yAxis[0]; + dst[5] = yAxis[1]; + dst[6] = yAxis[2]; + dst[8] = zAxis[0]; + dst[9] = zAxis[1]; + dst[10] = zAxis[2]; + dst[12] = cameraPosition[0]; + dst[13] = cameraPosition[1]; + dst[14] = cameraPosition[2]; + dst[15] = 1; + + return dst; + } + + static cross(a, b, dst) { + dst = dst || new Float32Array(3); + dst[0] = a[1] * b[2] - a[2] * b[1]; + dst[1] = a[2] * b[0] - a[0] * b[2]; + dst[2] = a[0] * b[1] - a[1] * b[0]; + return dst; + } + + static normalize(v, dst) { + dst = dst || new Float32Array(3); + let length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); + if (length > 0.00001) { + dst[0] = v[0] / length; + dst[1] = v[1] / length; + dst[2] = v[2] / length; + } + return dst; + } + + static subtractVectors(a, b, dst) { + dst = dst || new Float32Array(3); + dst[0] = a[0] - b[0]; + dst[1] = a[1] - b[1]; + dst[2] = a[2] - b[2]; + return dst; + } + + static perspective(fieldOfViewInRadians, aspect, near, far, dst) { + dst = dst || new Float32Array(16); + let f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians), + rangeInv = 1.0 / (near - far); + + dst[0] = f / aspect; + dst[5] = f; + dst[10] = (near + far) * rangeInv; + dst[11] = -1; + dst[14] = near * far * rangeInv * 2; + return dst; + } + + static projection(width, height, depth) { + return [ + 2 / width, 0, 0, 0, + 0, -2 / height, 0, 0, + 0, 0, 2 / depth, 0, + -1, 1, 0, 1, + ]; + } + + static inverse(m, dst) { + dst = dst || new Float32Array(16); + let m00 = m[0], + m01 = m[1], + m02 = m[2], + m03 = m[3], + m10 = m[4], + m11 = m[5], + m12 = m[6], + m13 = m[7], + m20 = m[8], + m21 = m[9], + m22 = m[10], + m23 = m[11], + m30 = m[12], + m31 = m[13], + m32 = m[14], + m33 = m[15], + tmp_0 = m22 * m33, + tmp_1 = m32 * m23, + tmp_2 = m12 * m33, + tmp_3 = m32 * m13, + tmp_4 = m12 * m23, + tmp_5 = m22 * m13, + tmp_6 = m02 * m33, + tmp_7 = m32 * m03, + tmp_8 = m02 * m23, + tmp_9 = m22 * m03, + tmp_10 = m02 * m13, + tmp_11 = m12 * m03, + tmp_12 = m20 * m31, + tmp_13 = m30 * m21, + tmp_14 = m10 * m31, + tmp_15 = m30 * m11, + tmp_16 = m10 * m21, + tmp_17 = m20 * m11, + tmp_18 = m00 * m31, + tmp_19 = m30 * m01, + tmp_20 = m00 * m21, + tmp_21 = m20 * m01, + tmp_22 = m00 * m11, + tmp_23 = m10 * m01, + + t0 = (tmp_0 * m11 + tmp_3 * m21 + tmp_4 * m31) - + (tmp_1 * m11 + tmp_2 * m21 + tmp_5 * m31), + t1 = (tmp_1 * m01 + tmp_6 * m21 + tmp_9 * m31) - + (tmp_0 * m01 + tmp_7 * m21 + tmp_8 * m31), + t2 = (tmp_2 * m01 + tmp_7 * m11 + tmp_10 * m31) - + (tmp_3 * m01 + tmp_6 * m11 + tmp_11 * m31), + t3 = (tmp_5 * m01 + tmp_8 * m11 + tmp_11 * m21) - + (tmp_4 * m01 + tmp_9 * m11 + tmp_10 * m21), + + d = 1.0 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3); + + dst[0] = d * t0; + dst[1] = d * t1; + dst[2] = d * t2; + dst[3] = d * t3; + dst[4] = d * ((tmp_1 * m10 + tmp_2 * m20 + tmp_5 * m30) - + (tmp_0 * m10 + tmp_3 * m20 + tmp_4 * m30)); + dst[5] = d * ((tmp_0 * m00 + tmp_7 * m20 + tmp_8 * m30) - + (tmp_1 * m00 + tmp_6 * m20 + tmp_9 * m30)); + dst[6] = d * ((tmp_3 * m00 + tmp_6 * m10 + tmp_11 * m30) - + (tmp_2 * m00 + tmp_7 * m10 + tmp_10 * m30)); + dst[7] = d * ((tmp_4 * m00 + tmp_9 * m10 + tmp_10 * m20) - + (tmp_5 * m00 + tmp_8 * m10 + tmp_11 * m20)); + dst[8] = d * ((tmp_12 * m13 + tmp_15 * m23 + tmp_16 * m33) - + (tmp_13 * m13 + tmp_14 * m23 + tmp_17 * m33)); + dst[9] = d * ((tmp_13 * m03 + tmp_18 * m23 + tmp_21 * m33) - + (tmp_12 * m03 + tmp_19 * m23 + tmp_20 * m33)); + dst[10] = d * ((tmp_14 * m03 + tmp_19 * m13 + tmp_22 * m33) - + (tmp_15 * m03 + tmp_18 * m13 + tmp_23 * m33)); + dst[11] = d * ((tmp_17 * m03 + tmp_20 * m13 + tmp_23 * m23) - + (tmp_16 * m03 + tmp_21 * m13 + tmp_22 * m23)); + dst[12] = d * ((tmp_14 * m22 + tmp_17 * m32 + tmp_13 * m12) - + (tmp_16 * m32 + tmp_12 * m12 + tmp_15 * m22)); + dst[13] = d * ((tmp_20 * m32 + tmp_12 * m02 + tmp_19 * m22) - + (tmp_18 * m22 + tmp_21 * m32 + tmp_13 * m02)); + dst[14] = d * ((tmp_18 * m12 + tmp_23 * m32 + tmp_15 * m02) - + (tmp_22 * m32 + tmp_14 * m02 + tmp_19 * m12)); + dst[15] = d * ((tmp_22 * m22 + tmp_16 * m02 + tmp_21 * m12) - + (tmp_20 * m12 + tmp_23 * m22 + tmp_17 * m02)); + + return dst; + } + + static aspectView(aspect) { + return [ + 1 / aspect, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ] + } + + static updateRotate(rotation, def) { + let value = vConf.get(rotation, def) + vConf.get(rotation + '-inc', 0) + if (value > 360) { + value -= 360; + } else if (value < -360) { + value += 360; + } + vConf.set(rotation, value); + } + + static makeZToWMatrix(fudgeFactor) { + return [ + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, fudgeFactor, + 0, 0, 0, 1, + ]; + } +} + +class GLHelper { + constructor(program) { + this.matrix = new Float32Array(16); + this.program = program; + } + + static uniform4fv(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform4fv(uniform, data); + } + + static uniform3fv(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform3fv(uniform, data); + } + + static uniform1f(program, name, data) { + let uniform = gl.getUniformLocation(program, name); + gl.uniform1f(uniform, data); + } + + rotateX(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.xRotation(deg)); + } + + rotateY(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.yRotation(deg)); + } + + rotateZ(deg) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.zRotation(deg)); + } + + scale(scaling) { + this.matrix = TDUtils.multiply(this.matrix, TDUtils.scale(scaling[0], scaling[1], scaling[2])) + } + + project(depth) { + depth = depth || (c.width > c.height) ? c.width : c.height; + this.matrix = TDUtils.projection(c.width, c.height, depth) + } + + translate(t) { + this.matrix = TDUtils.translate(this.matrix, t[0] || 0, t[1] || 0, t[2] || 0); + } + + addFudgeFactor(fudgeFactor) { + this.matrix = TDUtils.multiply(TDUtils.makeZToWMatrix(fudgeFactor), this.matrix); + } + + applyMatrix() { + let matrix = gl.getUniformLocation(this.program, "u_matrix"); + gl.uniformMatrix4fv(matrix, false, this.matrix); + } +} \ No newline at end of file diff --git a/raw/javascript/gl/handler.js b/raw/javascript/gl/handler.js new file mode 100644 index 0000000..bf7cf2c --- /dev/null +++ b/raw/javascript/gl/handler.js @@ -0,0 +1,100 @@ +class ShaderHandler { + constructor(gl) { + this.gl = gl; + this.shaderNames = []; + this.shaders = {}; + this.programs = {}; + } + + setGL(gl) { + this.gl = gl; + } + + async loadShader(name, path) { + this.shaderNames.push(name); + await this.load(name, path + name + ".vert", this.gl.VERTEX_SHADER); + await this.load(name, path + name + ".frag", this.gl.FRAGMENT_SHADER); + } + + async load(name, url, type) { + let realName = name + "_" + type; + if (!this.shaders[realName]) { + let data = await FetchHandler.loadFile(url, false); + let shader = this.createShader(data, type); + if (shader) { + this.shaders[realName] = shader; + } + } + return !!this.shaders[realName]; + } + + getShader(name, type) { + let realName = name + "_" + type; + return this.shaders[realName]; + } + + getAllShaders() { + return this.shaderNames; + } + + async createProgramForEach(arr) { + arr = arr || this.shaderNames; + for (let i = 0; i < arr.length; i++) { + let shader = arr[i]; + let v = await shaderHandler.createProgram(shader, [shader]) + if (!v) { + return false; + } + } + return true; + } + + createShader(source, type) { + let gl = this.gl; + let shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + return shader; + } + console.error(gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + return null; + } + + createProgram(name, shaders) { + let gl = this.gl; + let pro = gl.createProgram(); + for (let i = 0; i < shaders.length; i++) { + gl.attachShader(pro, this.getShader(shaders[i], gl.VERTEX_SHADER)); + gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER)); + } + gl.linkProgram(pro); + if (gl.getProgramParameter(pro, gl.LINK_STATUS)) { + this.programs[name] = pro; + return pro; + } + + console.log(gl.getProgramInfoLog(pro)); + gl.deleteProgram(pro); + return null; + } + + getProgram(name) { + return this.programs[name]; + } + + use(name) { + let pro = this.programs[name]; + this.gl.useProgram(pro); + return pro; + } + + async loadArray(list, path) { + let self = this; + for (const e of list) { + await self.loadShader(e, path) + } + await self.createProgramForEach(list) + } +} \ No newline at end of file diff --git a/raw/javascript/gui.js b/raw/javascript/gui.js new file mode 100644 index 0000000..8e9436d --- /dev/null +++ b/raw/javascript/gui.js @@ -0,0 +1,207 @@ +class GUI { + async init() { + this.data = {}; + this.modal = new Modal(); + // load first vis window! + await template.loadArray([ + 'playlist-item', + 'playlist', + 'playlist-footer', + 'audio-information', + 'inputs/color', + 'inputs/input', + 'inputs/slider', + 'inputs/switch', + 'inputs/select', + 'inputs/option', + 'help', + ]); + this.initDropZone(); + } + + openHelp() { + gui.modal.renderModal("Help", template.parseTemplate('help', {})); + gui.modal.showModal(); + } + + initDropZone() { + let items = 'drag dragstart dragend dragover dragenter dragleave drop'.split(' '); + items.forEach(el => { + window.addEventListener(el, async e => { + e.preventDefault(); + e.stopPropagation(); + if (e.type === 'drop') { + if (e.dataTransfer.files.length > 0) { + e.dataTransfer.id = 'upload-dir'; + player.playlist.changeFiles(e, e.dataTransfer); + } else { + alert("Sorry you need to upload files!"); + } + } + }); + }); + }; +} + +// create config Inputs from JSON +//@todo add support for gui grouping! +class GUIHelper { + static fromJSON(json, conf) { + let data = []; + for (let item of json) { + switch (item.type) { + case 'slider': + data.push(GUIHelper.createSliders(item, conf)); + break; + case 'color': + data.push(GUIHelper.createColorPicker(item, conf)); + break; + case 'checkbox': + data.push(GUIHelper.createCheckbox(item, conf)); + break; + case 'input': + data.push(GUIHelper.createInputField(item, conf)); + break; + case 'select': + data.push(GUIHelper.createSelect(item, conf)); + break; + case 'button': + data.push(GUIHelper.createButton(item, conf)); + break; + default: + console.error(`Unknown Type: ${item.type}`); + } + } + return data.join(" "); + } + + static createSliders(data, conf) { + let content = ""; + if (typeof data.name === "object") { + for (let i = 0; i < data.name.length; i++) { + let newData = {}; + Object.assign(newData, data); + newData.showName = GUIHelper.richShowName(data, data.name[i].firstUpper()); + newData.name = GUIHelper.richName(data, data.props[i]); + content += GUIHelper.createSlider(newData, conf); + } + } else { + content = GUIHelper.createSlider(data, conf); + } + return content; + } + + static createSlider(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/slider', newData) + } + + static createColorPicker(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/color', newData) + } + + static createCheckbox(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value) ? 'checked' : ''; + return template.parseTemplate('inputs/switch', newData) + } + + static createInputField(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + return template.parseTemplate('inputs/input', newData) + } + + static createSelect(data, conf) { + let newData = {}; + Object.assign(newData, data); + newData.value = conf.get(newData.name, newData.value); + let options = ''; + for (let i = 0; i < newData.options.length; i++) { + options += template.parseTemplate('inputs/option', { + value: newData.options[i] + }) + } + newData.options = options; + newData.event = 'visualConf'; + newData.conf = conf.type; + return template.parseTemplate('inputs/select', newData) + } + + static richName(data, name) { + if (data.group !== "") { + return data.group + "-" + name + } + return name; + } + + static richShowName(data, name) { + if (data.group !== "") { + return data.group.firstUpper() + ' ' + name + } + return name; + } + + static createButton(item, conf) { + return `
${item.name}
` + } +} + +class Modal { + constructor() { + let self = this; + self.currentModal = ''; + self.modal = $('#modal'); + self.open = false; + self.parent = self.modal.parentNode; + self.modal.addDelegatedEventListener('click', 'header .close', this.closeModal.bind(this)); + } + + resetModal() { + this.renderModal('', '', ''); + } + + renderModal(title, content, footer) { + $('#modal').removeClass('lightMode') + this.currentModal = title; + this.renderHeader(title); + this.renderContent(content); + this.renderFooter(footer); + } + + renderHeader(header) { + let h = $('header .headline', this.modal); + h.innerHTML = header; + } + + renderContent(content) { + let con = $('modal-content', this.modal); + con.innerHTML = content; + } + + renderFooter(footer) { + let con = $('modal-footer .inner', this.modal); + con.innerHTML = footer || "by VersusTuneZ"; + } + + closeModal() { + this.parent.addClass("hide") + this.open = false; + } + + isCurrent(title) { + return title === this.currentModal; + } + + showModal() { + this.parent.removeClass("hide") + this.open = true; + } +} \ No newline at end of file diff --git a/raw/javascript/imageUploader.js b/raw/javascript/imageUploader.js new file mode 100644 index 0000000..a8867bc --- /dev/null +++ b/raw/javascript/imageUploader.js @@ -0,0 +1,74 @@ +class ImageUploader { + async init() { + this.image = pConf.get("bgURL", ""); + this.color = pConf.get("bgColour", "#000000"); + this.alpha = pConf.get("alphaValue", 0.5); + this.getRealImage(); + this.applyValues(); + $('#modal').addDelegatedEventListener('change', '#image-upload input:not([type="color"])', this.changeHandler.bind(this)); + $('#modal').addDelegatedEventListener('input', '#image-upload input#color', this.changeHandler.bind(this)); + } + + async renderModal() { + await template.loadTemplate("image"); + gui.modal.resetModal(); + gui.modal.renderModal("Background-Image", + template.parseTemplate("image", { + value: this.image, + bgValue: this.color, + alphaValue: this.alpha + }), ""); + gui.modal.showModal(); + } + + changeHandler(e, el) { + if (el.id === 'color') { + this.color = el.value; + } else if (el.id === "alphaValue") { + this.alpha = el.value; + } else { + pConf.set('bgMode', el.id); + if (el.id === 'image') { + el.files[0].toBase64((e, b) => { + if (b) { + alert("Error converting image!"); + return; + } + pConf.set('bgURL', e.currentTarget.result); + pConf.save(); + }) + this.image = URL.createObjectURL(el.files[0]); + } else { + this.image = el.value; + pConf.set('bgURL', this.image); + } + } + pConf.set('bgColour', this.color); + pConf.set('alphaValue', this.alpha); + this.applyValues(); + pConf.save(); + } + + applyValues() { + let body = $('body'); + body.style.backgroundImage = 'url(' + this.image + ')'; + body.style.backgroundColor = this.color; + } + + getRealImage() { + let mode = pConf.get('bgMode'), + value = pConf.get("bgURL", ""); + if (mode === 'image') { + if (value !== '' && value.startsWith('data:image')) { + let split = value.split(";"), + type = split.shift(), + message = split.join(";").replace("base64,", ""); + this.image = URL.createObjectURL(b64toBlob(message, type)); + } + } else { + this.image = value; + } + } +} + +const imageUploader = new ImageUploader(); \ No newline at end of file diff --git a/raw/javascript/keys.js b/raw/javascript/keys.js new file mode 100644 index 0000000..cf52774 --- /dev/null +++ b/raw/javascript/keys.js @@ -0,0 +1,61 @@ +class KeyHandler { + async init() { + await this.mediaKeys(); + await this.addKeyHandler(); + window.addEventListener('keydown', this.keyHandler.bind(this)); + } + + async mediaKeys() { + if ('mediaSession' in navigator) { + let media = navigator.mediaSession; + media.setActionHandler('play', player.playStop.bind(player)); + media.setActionHandler('pause', player.playStop.bind(player)); + media.setActionHandler('previoustrack', player.prevSong.bind(player)); + media.setActionHandler('nexttrack', player.nextSong.bind(player)); + media.setActionHandler('stop', player.stop.bind(player)); + } + } + + async addKeyHandler() { + eventHandler.addEvent('keys-Space', player.playStop.bind(player)); + eventHandler.addEvent('keys-KeyN', player.nextSong.bind(player)); + eventHandler.addEvent('keys-KeyV', player.prevSong.bind(player)); + eventHandler.addEvent('keys-KeyS', playerConf.open.bind(playerConf)); + eventHandler.addEvent('keys-KeyS-shift', toggleShuffle); + eventHandler.addEvent('keys-KeyB', imageUploader.renderModal.bind(imageUploader)); + eventHandler.addEvent('keys-KeyF-shift', forceAllRead); + eventHandler.addEvent('keys-KeyH', gui.openHelp); + eventHandler.addEvent('keys-KeyP', e => { + player.playlist.renderPagination(player.playlist.page); + gui.modal.showModal(); + }); + eventHandler.addEvent('keys-Escape, keys-KeyC-shift', e => { + gui.modal.resetModal(); + gui.modal.closeModal(); + }) + eventHandler.addEvent('keys-F11', e => { + if (document.fullscreenElement) { + document.exitFullscreen().catch(console.error); + } else { + document.body.requestFullscreen().catch(console.error); + } + }); + } + + async keyHandler(event) { + let key = event.code, + shift = event.shiftKey ? '-shift' : '', + ctrl = event.ctrlKey ? '-ctrl' : '', + name = 'keys-' + key + shift + ctrl; + + if (eventHandler.handleEvent({ + data: { + cmd: name, + data: name + } + })) { + event.preventDefault(); + event.stopPropagation(); + } + } +} \ No newline at end of file diff --git a/raw/javascript/notification.js b/raw/javascript/notification.js new file mode 100644 index 0000000..ba85846 --- /dev/null +++ b/raw/javascript/notification.js @@ -0,0 +1,77 @@ +class NotificationHandler { + static instance = new NotificationHandler(); + + constructor() { + this.outer = $('.notification'); + this.notifications = []; + } + + async init() { + await template.loadTemplate('notification'); + } + + static createNotification(message, type, time) { + time = parseInt(time || "3000"); + let handler = NotificationHandler.instance, + not = new Notification(message, type, time); + handler.notifications.push(not); + not.show(); + return not; + } +} + +class Notification { + constructor(message, type, time) { + this.outer = NotificationHandler.instance.outer; + this.message = message; + this.type = type; + this.time = time; + this.isRemoved = false; + } + + async show() { + let self = this, + endless = self.time === -1; + + self.item = create('div'); + self.item.addClass('notification-item, ' + self.type); + if (endless) { + self.type += ' endless'; + } + self.updateContent(self.message); + this.outer.prepend(self.item); + if (!endless) { + setTimeout(this.remove.bind(this), self.time) + } + } + + async remove() { + if (this.isRemoved) { + return; + } + this.isRemoved = true; + this.outer.removeChild(this.item); + let not = NotificationHandler.instance.notifications, + index = not.indexOf(this); + not.splice(index, 1); + delete this; + } + + updateContent(message) { + let self = this, + isEndless = self.time === -1, + data = { + message: message, + time: isEndless ? 1000 : self.time + 1, + type: self.type, + } + this.item.innerHTML = template.parseTemplate('notification', data); + } + + updateMessageOnly(message) { + let item = $('.message', this.item); + if (item) { + item.innerHTML = message; + } + } +} \ No newline at end of file diff --git a/raw/javascript/player.js b/raw/javascript/player.js new file mode 100644 index 0000000..23281fb --- /dev/null +++ b/raw/javascript/player.js @@ -0,0 +1,237 @@ +class Player { + async init() { + this.playlist = new Playlist(); + } + + nextSong() { + let next = this.playlist.getNext(); + audioHandler.loadSong(next); + } + + prevSong() { + let next = this.playlist.getPrevious(); + audioHandler.loadSong(next); + } + + playStop() { + if (!audioHandler.lastSong) { + let next = this.playlist.getCurrent(); + audioHandler.loadSong(next); + return; + } + let audioFile = audioHandler.audioFile; + if (audioFile.paused) { + audioFile.play(); + } else { + audioFile.pause(); + } + window.dispatchEvent(new CustomEvent('playSong')); + } + + stop() { + if (!audioHandler.lastSong) { + return; + } + let audioFile = audioHandler.audioFile; + audioFile.pause(); + audioFile.currentTime = 0; + window.dispatchEvent(new CustomEvent('playSong')); + } + + playByID(number) { + this.playlist.index = number; + let next = this.playlist.getCurrent(); + audioHandler.loadSong(next); + } +} + +const PAGINATIONLIMIT = 50; + +class Playlist { + constructor() { + this.list = []; + this.shuffled = []; + this.index = 0; + this.page = 0; + this.isShuffle = pConf.get("shuffle", false); + $('body').addDelegatedEventListener('change', 'input[type="file"]', this.changeFiles.bind(this)); + $('body').addDelegatedEventListener('click', '.pagination .item', this.handlePagination.bind(this)); + eventHandler.addEvent('id3-request', this.handle.bind(this)); + eventHandler.addEvent('id3-request-force', this.forceID3.bind(this)); + } + + shuffle() { + // only shuffle if more then 2 elements are in + let len = this.list.length; + if (len < 3) { + this.shuffled = [0, 1, 2]; + return; + } + // the current-list need to be shuffled... + for (let i = 0; i < len; i++) { + let random = VTUtils.randomInt(0, len - 1); + this.swap(i, random); + } + } + + swap(a, b) { + this.shuffled[a] = b; + this.shuffled[b] = a; + } + + getNext() { + let items = this.list, + len = items.length - 1, + next = this.index + 1; + if (next > len) { + next = 0; + } + this.index = next; + return items[this.getRealIndex()]; + } + + getPrevious() { + let items = this.list, + len = items.length - 1, + next = this.index - 1; + if (next < 0) { + next = len; + } + this.index = next; + return items[this.getRealIndex()]; + } + + getCurrent() { + return this.list[this.getRealIndex()]; + } + + // on new upload... this has to be an array! + setPlaylist(files) { + this.index = 0; + this.forceData = undefined; + this.list = files; + this.shuffle(); + } + + handlePagination(event, el) { + if (el.hasClass('inactive')) { + return; + } + if (el.hasClass('next-site')) { + this.renderPagination(this.page + 1); + } else { + this.renderPagination(this.page - 1); + } + } + + renderPagination(page) { + if (page === undefined) { + page = this.page; + } + let length = this.list.length, + maxSite = Math.ceil(length / PAGINATIONLIMIT) - 1; + if (page < 0) { + page = 0; + } + if (page > maxSite) { + page = maxSite; + } + let s = page * PAGINATIONLIMIT, + e = s + PAGINATIONLIMIT, + data = ""; + this.page = page; + if (e >= length) { + e = length; + } + if (length > 0) { + let items = this.list; + for (let i = s; i < e; i++) { + let obj = { + index: i.toString(), + nr: i + 1, + title: items[this.getRealIndex(i)].getAudioName(), + active: !audioHandler.audioFile.paused && i === this.index ? 'active' : '' + } + data += template.parseTemplate("playlist-item", obj); + } + } else { + data = "

No Songs uploaded!

"; + } + let hasNext = maxSite > 1 && page < maxSite; + gui.modal.renderModal( + "Playlist", + template.parseTemplate("playlist", { + content: data, + }), + template.parseTemplate('playlist-footer', { + prevActive: page > 0 ? 'active' : 'inactive', + nextActive: hasNext ? 'active' : 'inactive', + page: (page + 1) + ' / ' + parseInt(maxSite + 1), + }) + ); + } + + //playlist handler for file input! + changeFiles(e, el) { + + if (el.id !== 'upload-dir') { + return; + } + let files = []; + let i = 0; + for (let file of el.files) { + if (file && file.type.indexOf('audio') !== -1 && file.name.match(".m3u") === null) { + let audioFile = new AudioPlayerFile(file, i++); + files.push(audioFile); + } + } + this.setPlaylist(files); + if (files.length > 0) { + NotificationHandler.createNotification("Songs added successfully!
Songs: " + files.length, "success", 3000); + this.renderPagination(0); + } else { + NotificationHandler.createNotification("File Upload failed!", "error", 3000); + } + } + + getRealIndex(index) { + if (index === undefined) { + index = this.index; + } + if (this.isShuffle) { + return this.shuffled[index]; + } + return index; + } + + handle(data) { + let index = data.index; + if (data.status === "waiting") { + return; + } + this.list[index].id3 = data; + if (this.timeout) { + window.clearTimeout(this.timeout); + } + this.timeout = setTimeout(this.renderPagination.bind(this), 100); + } + + forceID3(data) { + let self = this; + if (!self.forceData) { + self.forceData = {}; + self.forceNotification = NotificationHandler.createNotification("TagReader -> 0 / " + self.list.length, "info", -1); + } + let index = data.index; + if (data.status === "waiting") { + return; + } + self.list[index].id3 = data; + self.forceData[index] = true; + let leng = Object.keys(self.forceData).length; + this.forceNotification.updateMessageOnly("TagReader -> " + leng + " / " + self.list.length); + if (leng === self.list.length) { + self.forceNotification.remove() + } + } +} \ No newline at end of file diff --git a/raw/javascript/playerConfigHandler.js b/raw/javascript/playerConfigHandler.js new file mode 100644 index 0000000..14683e8 --- /dev/null +++ b/raw/javascript/playerConfigHandler.js @@ -0,0 +1,106 @@ +class PlayerConfigHandler { + async init() { + await template.loadArray([ + 'config/nav', + 'config/content', + 'config/visualitem' + ]); + this.last = 'base'; + $('.settings-icon').addEventListener('click', this.open.bind(this)); + $('modal-content').addDelegatedEventListener('click', '.config-nav .item', this.navHandler.bind(this)); + } + + open() { + if (this.content === undefined) { + let content = template.parseTemplate('config/nav', {}); + content += template.parseTemplate('config/content', {content: ""}); + this.content = content; + } + gui.modal.renderModal('Settings', this.content, "by VersusTuneZ"); + this.handleById(); + gui.modal.showModal(); + } + + navHandler(e, el) { + this.last = el.dataset.id; + this.handleById(); + } + + handleById() { + let id = this.last; + new VisualConfig(id === 'visual', id === 'base'); + let active = $('.config-nav .item.active'), + current = $('.config-nav .item[data-id="' + id + '"]'); + if (active) { + active.removeClass('active'); + } + if (current) { + current.addClass('active'); + } + } +} + +class VisualConfig { + static visualTemplates = {}; + + constructor(showVisual, renderBase) { + this.content = $('modal-content .config-content'); + if (showVisual) { + this.renderVisualConfig(visual.c); + } else { + if (renderBase) { + this.renderBase(); + } else { + this.renderVisuals(); + } + } + } + + renderVisuals() { + let keys = Object.keys(visual.visuals), + content = '
'; + for (let i = 0; i < keys.length; i++) { + content += template.parseTemplate('config/visualitem', { + title: visual.visuals[keys[i]].name, + id: keys[i], + active: keys[i] === visual.c ? 'active' : '' + }) + } + content += ''; + this.content.innerHTML = content; + } + + async renderBase() { + let data = await this.loadVisualConfig('base'), + div = create('section'); + div.addClass('base'); + div.innerHTML = GUIHelper.fromJSON(data, pConf); + this.content.innerHTML = div.outerHTML; + } + + // the name loads the json and handle it! + async renderVisualConfig(name) { + let data = await this.loadVisualConfig(name, vConf), + div = create('section'); + div.addClass('visual'); + div.innerHTML = GUIHelper.fromJSON(data, vConf); + div.innerHTML += GUIHelper.createButton({ + action: "resetVConf", + name: "Reset Visual Config" + }); + div.innerHTML += GUIHelper.createButton({ + action: "makeModalTransparent", + name: "toggle Modal Opacity" + }) + this.content.innerHTML = div.outerHTML; + } + + async loadVisualConfig(name) { + let tem = VisualConfig.visualTemplates; + if (!tem[name]) { + //load config and save it + tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true); + } + return tem[name]; + } +} diff --git a/raw/javascript/select.js b/raw/javascript/select.js new file mode 100644 index 0000000..546190f --- /dev/null +++ b/raw/javascript/select.js @@ -0,0 +1,64 @@ +(function () { + const body = $('body'); + body.addDelegatedEventListener('click', 'custom-select .label', (e, el) => { + let parent = el.parentNode; + let options = $$('custom-option', parent), + optionsDiv = $('custom-options', parent); + if (parent.hasClass('open')) { + optionsDiv.style.maxHeight = ''; + parent.removeClass('open'); + } else { + let sum = 0; + options.forEach(function (element) { + sum += element.offsetHeight; + }); + optionsDiv.style.maxHeight = sum + 'px'; + parent.addClass('open'); + } + }) + body.addDelegatedEventListener('click', 'custom-select custom-option', (e, el) => { + let select = el.closest('custom-select'), + input = $('input', select); + $$('custom-option.active').forEach(activeEl => { + activeEl.removeClass('active'); + }) + el.addClass('active'); + if (input) { + input.value = el.dataset.value || el.innerText; + $('.label', select).innerText = el.innerText; + select.removeClass('open'); + el.parentNode.style.maxHeight = ''; + window.dispatchEvent(new CustomEvent('selectChanged', { + detail: { + select: select, + event: select.dataset.event, + value: input.value, + name: input.name + } + })); + } + }) + + window.addEventListener('selectChanged', (e) => { + if (e.detail.event === 'visualConf') { + e.preventDefault(); + e.stopPropagation(); + handleVisualConf(e.detail); + } + }) + + function handleVisualConf(e) { + try { + let value = e.value, + config = Config.allConfigs[e.select.dataset.conf]; + if (e.name === 'fftSize') { + value = parseInt(e.value); + visual.visuals[visual.c].updateFFT(value); + } + config.set(e.name, value); + config.save(); + } catch (e) { + console.error(e); + } + } +})() diff --git a/raw/javascript/startup.js b/raw/javascript/startup.js new file mode 100644 index 0000000..76987af --- /dev/null +++ b/raw/javascript/startup.js @@ -0,0 +1,23 @@ +class Startup { + constructor() { + this.modules = { + 'startup': false, + 'id3-ready': false + }; + } + + moduleLoaded(name) { + this.modules[name] = true + this.allModulesLoaded(); + } + + allModulesLoaded() { + for (let module in this.modules) { + if (!this.modules[module]) { + return false; + } + } + window.dispatchEvent(new CustomEvent('startupFin')); + return true; + } +} \ No newline at end of file diff --git a/raw/javascript/template.js b/raw/javascript/template.js new file mode 100644 index 0000000..a0a1646 --- /dev/null +++ b/raw/javascript/template.js @@ -0,0 +1,41 @@ +/** @deprecated use VTepL instead! */ +class Template { + constructor() { + this.tpl = {}; + } + + async loadTemplate(name) { + let self = this; + if (!this.tpl[name]) { + self.tpl[name] = await FetchHandler.loadFile(templateDir + name + '.tpl', false) + } + } + + async loadArray(names) { + for (let name of names) { + await this.loadTemplate(name); + } + } + + parseTemplate(name, data) { + if (!this.tpl[name]) { + return "" + } + let m, d = this.tpl[name]; + while ((m = templateEx.exec(d)) !== null) { + if (m.index === templateEx.lastIndex) { + templateEx.lastIndex++; + } + let key = m[0]; + let value = data[m[1]]; + if (value === undefined || value === null) { + value = ""; + } + d = d.replace(key, value) + } + return d; + } +} + +const templateEx = /\$(.*?)\$/gm; +const templateDir = "/out/tpl/" diff --git a/raw/javascript/templateLang/VTepLCore.js b/raw/javascript/templateLang/VTepLCore.js new file mode 100644 index 0000000..faae842 --- /dev/null +++ b/raw/javascript/templateLang/VTepLCore.js @@ -0,0 +1,34 @@ +'use strict'; + +class VTpeLCore { + constructor(options = {}) { + this.templates = {}; + this.dir = options.path || '/tpl/'; + this.suffix = options.suffix || 'tpl'; + this.path = options.template || `${this.dir}%s.${this.suffix}`; + this.cache = options.cache === undefined ? true : options.cache; + } + + async loadTemplate(name) { + let rawData = await fetch(this.path.replace('%s', name)); + if (rawData.ok) { + let data = await rawData.text(); + this.addTpl(name, data); + } + } + + async loadArray(names) { + for (let name of names) { + await this.loadTemplate(name); + } + } + + addTpl(name, content) { + let temp = this.templates[name] = new VTpeLTemplate(name, content) + temp.parseContent(this.cache); + } + + renderOn(name, data) { + return this.templates[name].render(data); + } +} diff --git a/raw/javascript/templateLang/VTepLInterpreter.js b/raw/javascript/templateLang/VTepLInterpreter.js new file mode 100644 index 0000000..e549672 --- /dev/null +++ b/raw/javascript/templateLang/VTepLInterpreter.js @@ -0,0 +1,133 @@ +'use strict'; + +class VTepLInterpreter { + constructor(parser) { + this.parser = parser; + this.data = []; + this.content = ''; + } + + render(data) { + let self = this; + self.data = data; + let newData = self.interpreter(self.parser.parsed); + self.data = []; + return newData[0]; + } + + interpreter(parsed, index = 0) { + let self = this; + let types = VParserTypes; + let tplCont = ''; + for (let i = index; i < parsed.length; i++) { + let item = parsed[i], + content = item.content; + switch (item.type) { + case types.content: + tplCont += content; + break; + case types.variable: + tplCont += self.getVariable(content) + break; + case types.assign: + let data = content.split("="), + key = data.shift(); + self.setVariable(data.join("=").trim(), key.trim()); + break; + case types.forEach: + let d = this.handleForEach(item, parsed, i); + i = d[0]; + tplCont += d[1]; + break; + case types.for: + let fd = this.handleFor(item, parsed, i); + i = fd[0]; + tplCont += fd[1]; + break; + case types.if: + let id = this.handleIf(item, parsed, i); + i = id[0]; + tplCont += id[1]; + break; + case types.ifEnd: + tplCont += content; + return [tplCont, i]; + case types.forEnd: + tplCont += content; + return [tplCont, i]; + default: + console.warn("Invalid Type found"); + break; + } + } + //this.content = tplCont; + return [tplCont, parsed.length]; + } + + getVariable(variable) { + if (this.data[variable]) { + return this.data[variable]; + } + let split = variable.split("."), + prevVar = this.data; + for (let i = 0; i < split.length; i++) { + prevVar = prevVar[split[i]] || prevVar; + } + if (typeof prevVar === 'string') { + return prevVar; + } + return ''; + } + + setVariable(value, variable) { + let c = this.getVariable(value); + if (c !== '') { + value = c; + } + this.data[variable] = value; + } + + handleForEach(item, parsed, i) { + let content = item.content.split(" as "); + let root = this.getVariable(content[0].trim()); + let addTo = 0, + isInvalid = false; + if (root === '') { + isInvalid = true; + root = []; + } + let d = Object.keys(root), + raw = ''; + for (let x of d) { + this.setVariable(root[x], content[1].trim()); + let data = this.interpreter(parsed, i + 1); + addTo = data[1]; + raw += data[0]; + } + if (isInvalid) { + raw = ''; + } + return [addTo, raw]; + } + + handleFor(item, parsed, ind) { + let content = item.content.split(" as "), + addTo = 0, + count = content[0].trim().split(".."), + max = parseInt(count[1]), + min = parseInt(count[0]), + newContent = ''; + for (let i = min; i < max; i++) { + this.setVariable(i.toString(), content[1]); + let data = this.interpreter(parsed, ind + 1); + addTo = data[1]; + newContent += data[0]; + } + return [addTo, newContent]; + } + + handleIf(item, parsed, i) { + let data = this.interpreter(parsed, i + 1); + return [data[1], data[0]]; + } +} diff --git a/raw/javascript/templateLang/VTepLParser.js b/raw/javascript/templateLang/VTepLParser.js new file mode 100644 index 0000000..40c8525 --- /dev/null +++ b/raw/javascript/templateLang/VTepLParser.js @@ -0,0 +1,178 @@ +'use strict'; + +const VParserTypes = { + content: 0, + variable: 1, + for: 2, + forEach: 3, + forContent: 4, + forEnd: 5, + if: 6, + ifContent: 7, + ifEnd: 8, + assign: 9, + none: -1, + + // operators + '!=': 100, + '==': 101, + '&&': 102, + '||': 103, + '>=': 104, + '<=': 105, + '>': 106, + '<': 107, + '+': 108, + '-': 109, + '*': 110, + '/': 111, + '%': 112 +}; + + +class VTpeLParser { + constructor(name, content) { + let self = this; + self.name = name; + self.legex = content; + self.index = 0; + self.content = ''; + self.parsed = []; + self.contexts = [0]; + self.allowedOperators = ['!=', '==', '&&', '||', '>=', '<=', '>', '<', '+', '-', '*', '/', '%'] + } + + tokenize() { + let self = this; + for (self.index = 0; self.index < self.legex.length; self.index++) { + let i = self.index, + char = self.legex.charAt(i); + if (self.nextContains('/*', i, true)) { + self.extract('*/', VParserTypes.none) + } else if (self.nextContains('//', i, true)) { + self.extract('\n', VParserTypes.none); + } else if (self.nextContains('', VParserTypes.none); + } else if (self.nextContains('{for(', i, true)) { + self.extract(')}', VParserTypes.for); + self.contexts.push(VParserTypes.for); + } else if (self.nextContains('{foreach(', i, true)) { + self.extract(')}', VParserTypes.forEach); + self.contexts.push(VParserTypes.forEach); + } else if (self.nextContains('{/for}', i, true)) { + self.addType(VParserTypes.forEnd); + self.contexts.pop(); + } else if (self.nextContains('{if(', i, true)) { + self.extract(')}', VParserTypes.if); + self.contexts.push(VParserTypes.if); + } else if (self.nextContains('{/if}', i, true)) { + self.addType(VParserTypes.ifEnd); + self.contexts.pop(); + } else if (self.nextContains('$${', i, true)) { + self.extract('}', VParserTypes.assign); + } else if (self.nextContains('${', i, true)) { + self.extract('}', VParserTypes.variable); + } else { + self.content += char; + } + } + self.addType(VParserTypes.content); + return self.parsed; + } + + addType(type) { + let self = this; + let content = self.content.trim(), + instructions = self.findInstructions(type); + self.content = ''; + if (type !== VParserTypes.none) { + if (type === VParserTypes.content && content === '') { + return null; + } + return self.parsed.push({ + content: content, + type: type, + context: self.contexts[self.contexts.length - 1], + instructions: instructions + }); + } + return null; + } + + nextContains(find, index, add = false) { + let count = this.nextContainsRaw(this.legex, find, index); + if (add && count > 0) { + this.index += count; + } + return count > 0 || count === -1; + } + + nextContainsRaw(raw, find, index) { + if (typeof find === "string") { + find = find.split(""); + } + let count = find.length; + if (count < 1) { + return -1; + } + for (let i = 0; i < count; i++) { + let nc = raw.charAt(index + i); + if ((find[i] === '\n' && nc === undefined)) { + return count; + } + if (find[i] !== nc) { + return 0; + } + } + return count; + } + + extract(findUntil = '}', type = 1) { + let self = this; + self.addType(0); + findUntil = findUntil.split("") + let content = '', + index = self.index, + legex = self.legex, + firstFind = findUntil.shift(); + for (let i = self.index; i < legex.length; i++) { + let char = legex.charAt(i); + if (char === firstFind && self.nextContains(findUntil, i + 1)) { + console.debug(`[Parser][${index} > ${i}] >> ${content}`); + self.index = i + findUntil.length; + self.content = content; + self.addType(type); + return; + } + content += char; + } + throw 'Template variable at Position: ' + index + ' not closed!'; + } + + // @todo implement split... is needed for if statements and math stuff or get it stupid! + getOperator(string) { + let operators = []; + for (let i = 0; i < string.length; i++) { + if (this.nextContainsRaw(string, "(", i)) { + let innerCon = ''; + for (let x = 0; x < string.length; x++) { + let char = string.charAt(i + x); + if (char === ')') { + break; + } + innerCon += char; + } + operators = [...operators, this.getOperator(innerCon)]; + } else { + } + } + return operators; + } + + findInstructions(type) { + if (type === VParserTypes.if) { + return this.getOperator(this.content); + } + return []; + } +} diff --git a/raw/javascript/templateLang/VTepLTemplate.js b/raw/javascript/templateLang/VTepLTemplate.js new file mode 100644 index 0000000..608f9ea --- /dev/null +++ b/raw/javascript/templateLang/VTepLTemplate.js @@ -0,0 +1,18 @@ +'use strict'; + +class VTpeLTemplate { + constructor(name, content) { + this.name = name; + this.tpl = content; + this.parser = new VTpeLParser(name, content); + this.interpreter = new VTepLInterpreter(this.parser); + } + + render(data = {}) { + return this.interpreter.render(data); + } + + parseContent() { + this.parser.tokenize(); + } +} diff --git a/raw/javascript/utils.js b/raw/javascript/utils.js new file mode 100644 index 0000000..7399724 --- /dev/null +++ b/raw/javascript/utils.js @@ -0,0 +1,269 @@ +class VTUtils { + static random(min, max) { + let rand = Math.random(); + if (typeof min === 'undefined') { + return rand; + } else if (typeof max === 'undefined') { + if (min instanceof Array) { + return min[Math.floor(rand * min.length)]; + } else { + return rand * min; + } + } else { + if (min > max) { + let tmp = min; + min = max; + max = tmp; + } + return rand * (max - min) + min; + } + }; + + static randomInt(min, max) { + return Math.floor(VTUtils.random(min, max)); + } + + static normalize(val, max, min) { + return (val - min) / (max - min); + }; + + static distance(x, y, x2, y2) { + let a = x - x2; + let b = y - y2; + + return Math.sqrt(a * a + b * b); + } + + static map(n, start1, stop1, start2, stop2, withinBounds) { + let newVal = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; + if (!withinBounds) { + return newVal; + } + if (start2 < stop2) { + return this.constrain(newVal, start2, stop2); + } else { + return this.constrain(newVal, stop2, start2); + } + }; + + static constrain(n, low, high) { + return Math.max(Math.min(n, high), low); + } + + static hsvToRgb(h, s, v) { + let r, g, b, + i = Math.floor(h * 6), + f = h * 6 - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s); + + switch (i % 6) { + case 0: + r = v, g = t, b = p; + break; + case 1: + r = q, g = v, b = p; + break; + case 2: + r = p, g = v, b = t; + break; + case 3: + r = p, g = q, b = v; + break; + case 4: + r = t, g = p, b = v; + break; + case 5: + r = v, g = p, b = q; + break; + } + + return {r: r, g: g, b: b}; + } + + static peakRGB(peak) { + return { + r: peak, + g: 1 - peak, + b: 0 + }; + } +} + +class VTVector { + constructor(x, y, z) { + this.x = x || 0; + this.y = y || 0; + this.z = z || 0; + } + + //helper + static createRandom(x, y, z) { + x = x || 1; + y = y || 1; + z = z || 0; + return new VTVector(VTUtils.random(-x, x), VTUtils.random(-y, y), VTUtils.random(-z, z)); + } + + mult(times) { + this.x *= times; + this.y *= times; + this.z *= times; + } + + set(vector) { + this.x = vector.x; + this.y = vector.y; + this.z = vector.z; + } + + add(vector) { + this.x = this.x + vector.x; + this.y = this.y + vector.y; + this.z = this.z + vector.z; + } + + addXYZ(x, y, z) { + this.x += x; + this.y += y; + this.z += z; + } + + setXYZ(x, y, z) { + this.x = x || 0; + this.y = y || 0; + this.z = z || 0; + } + + clone() { + return new VTVector(this.x, this.y, this.z); + } +} + +function $(sel, s) { + s = s || document; + return s.querySelector(sel); +} + +function $$(sel, s) { + s = s || document; + return s.querySelectorAll(sel); +} + +Node.prototype.addDelegatedEventListener = function (type, aim, cb) { + this.addEventListener(type, (event) => { + let target = event.target; + if (target.matches(aim)) { + cb(event, target); + } else { + let parent = target.closest(aim); + if (parent) { + try { + cb(event, parent); + } catch (e) { + NotificationHandler.createNotification("FATAL ERROR WITHIN HANDLER!", "error", 1000); + //nothing! + } + } + } + }) +}; + +Node.prototype.hasClass = function (className) { + let items = className.split(','), + has = null; + for (let item of items) { + if (has === false) { + break; + } + has = this.classList.contains(item.trim()); + } + return has === true; +} +Node.prototype.addClass = function (className) { + let items = className.split(','); + for (let item of items) { + this.classList.add(item.trim()); + } + return this; +} +Node.prototype.removeClass = function (className) { + let items = className.split(','); + for (let item of items) { + this.classList.remove(item.trim()); + } + return this; +} +Node.prototype.toggleClass = function (className, force) { + let items = className.split(','); + for (let item of items) { + this.classList.toggle(item.trim(), force); + } +} +Node.prototype.switchClass = function (clOne, clTwo, twoOne) { + let cl = this.classList; + if (twoOne) { + cl.remove(clOne); + cl.add(clTwo) + } else { + cl.remove(clTwo) + cl.add(clOne) + } +} +Node.prototype.toggleCheck = function (className, force) { + let cl = this.classList; + let items = className.split(','); + for (let item of items) { + let clOne = item.trim(); + if (force) { + cl.add(clOne); + } else { + cl.remove(clOne) + } + } +} + +String.prototype.firstUpper = function () { + return this.charAt(0).toUpperCase() + this.slice(1); +} + +File.prototype.toBase64 = function (cb) { + const reader = new FileReader(); + reader.onloadend = cb; + reader.readAsDataURL(this); +} + +function b64toBlob(b64Data, type) { + const byteCharacters = atob(b64Data); + const byteNumbers = new Array(byteCharacters.length); + for (let i = 0; i < byteCharacters.length; i++) { + byteNumbers[i] = byteCharacters.charCodeAt(i); + } + const byteArray = new Uint8Array(byteNumbers); + return new Blob([byteArray], {type: type}); +} + +function create(name, content) { + let d = document.createElement(name); + if (content) { + d.innerHTML = content; + } + return d; +} + +function append(to, array) { + for (let item of array) { + to.appendChild(item); + } +} + +function hexToRgb(hex) { + hex = hex.replace("#", ""); + let bigint = parseInt(hex, 16), + r = (bigint >> 16) & 255, + g = (bigint >> 8) & 255, + b = bigint & 255; + + return [r / 255, g / 255, b / 255]; +} \ No newline at end of file diff --git a/raw/javascript/visual.js b/raw/javascript/visual.js new file mode 100644 index 0000000..8e4fc8a --- /dev/null +++ b/raw/javascript/visual.js @@ -0,0 +1,114 @@ +class Visual { + constructor() { + this.data = []; //for drawing + this.dataArray = []; + this.name = "Default"; + } + + updateData() { + } + + updateFFT(fftSize) { + } + + draw() { + } + + setup() { + } +} + +class VisualDrawer { + constructor() { + this.visuals = { + //"sphere": new Sphere(), + "wave": new Wave(), + "wave2d": new Wave2D(), + //"water": new Water() + } + this.lastMainColor = { + base: '#-1', + color: [0, 0, 0] + }; + this.lastSecondColor = { + base: '#-1', + color: [0, 0, 0] + } + } + + init() { + this.switch(pConf.get("visual", "wave2d")); + this.updateLoop(); + } + + switch(visual) { + if (this.visuals[visual] != null) { + this.c = visual; + vConf.loadConfigByName(this.c); + this.visuals[this.c].setup(); + pConf.set("visual", this.c); + pConf.save(); + } + } + + updateLoop() { + let self = this; + let vis = self.visuals[self.c]; + let pro = shaderHandler.use(self.c); + this.updateSeekbar(); + this.prepare(pro); + vis.updateData(); + vis.draw(pro); + requestAnimationFrame(self.updateLoop.bind(self)) + } + + updateSeekbar() { + cInfo.width = window.innerWidth; + cInfo.height = window.innerHeight; + let audioFile = audioHandler.audioFile; + ctx.clearRect(0, 0, cInfo.width, cInfo.height); + if (!audioFile.paused && pConf.get("showSeekbar", true)) { + //show seekbar + let dur = audioFile.duration, + cur = audioFile.currentTime, + percent = cur / dur * cInfo.width; + ctx.fillStyle = pConf.get("seekColor", '#fff'); + ctx.fillRect(0, c.height - 10, percent, c.height); + } + } + + prepare(pro) { + c.width = window.innerWidth; + c.height = window.innerHeight; + gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); + gl.clearColor(0, 0, 0, parseFloat(pConf.get("alphaValue", 0))); + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LEQUAL); + gl.enable(gl.CULL_FACE); + + // u_baseColor || u_maxColor + this.setColor(pro); + } + + setColor(program) { + let baseColor = gl.getUniformLocation(program, "u_baseColor"), + maxColor = gl.getUniformLocation(program, "u_maxColor"), + self = this, + mainColor = self.lastMainColor, + secondColor = self.lastSecondColor; + this.updateColor('lastMainColor', 'baseColor'); + this.updateColor('lastSecondColor', 'gradientToColor'); + gl.uniform3fv(baseColor, mainColor.color); + gl.uniform3fv(maxColor, secondColor.color); + } + + updateColor(index, col) { + let color = this[index], + value = vConf.get(col, '#ffffff') + if(value !== color.base) { + color.color = hexToRgb(value); + color.base = value; + } + } +} \ No newline at end of file diff --git a/raw/javascript/visuals/sphere.js b/raw/javascript/visuals/sphere.js new file mode 100644 index 0000000..92f7062 --- /dev/null +++ b/raw/javascript/visuals/sphere.js @@ -0,0 +1,12 @@ +class Sphere extends Visual { + constructor() { + super(); + this.name = "Sphere"; + } + + draw() { + } + + setup() { + } +} \ No newline at end of file diff --git a/raw/javascript/visuals/water.js b/raw/javascript/visuals/water.js new file mode 100644 index 0000000..ecf596e --- /dev/null +++ b/raw/javascript/visuals/water.js @@ -0,0 +1,15 @@ +//animate Water the way like the Audio is Coming... 256FFT-Size max! +class Water extends Visual { + constructor() { + super(); + this.name = "Water"; + } + + draw() { + } + + setup() { + audioHandler.fftSize(256) + } + +} \ No newline at end of file diff --git a/raw/javascript/visuals/wave.js b/raw/javascript/visuals/wave.js new file mode 100644 index 0000000..a1ec16b --- /dev/null +++ b/raw/javascript/visuals/wave.js @@ -0,0 +1,89 @@ +// 3D Audio-Waves -> maybe also 2D? +class Wave extends Visual { + constructor() { + super(); + this.name = "3D Wave"; + } + + updateData() { + let data = audioHandler.getFloatArray(); + let add = 2 / data.length, + x = -1; + let outerLoop = 0; + for (let i = 0; i < data.length; i++) { + //first + this.data[outerLoop] = x; + this.data[outerLoop + 1] = data[i]; + this.data[outerLoop + 2] = 0; + //second + this.data[outerLoop + 3] = x; + //third + this.data[outerLoop + 6] = x; + this.data[outerLoop + 8] = data[i + 1] || 0; + outerLoop += 9; + x += add; + } + } + + draw(program) { + this.prepare(program); + let position = this.position, + positionBuffer = gl.createBuffer(); + this.rotate(program); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.data), gl.DYNAMIC_DRAW); + let vao = gl.createVertexArray(); + gl.bindVertexArray(vao); + gl.enableVertexAttribArray(position); + gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); + gl.drawArrays(vConf.get("waveForm", gl.TRIANGLES), 0, this.data.length / 3); + this.afterDraw(); + } + + rotate(program) { + let aspect = c.width / c.height, + matrix = [ + 1 / aspect, 0, 0, 0, + 0, 0.6, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1 + ] + matrix = TDUtils.multiply(matrix, TDUtils.xRotation(vConf.get("rotation-x", 10))); + matrix = TDUtils.multiply(matrix, TDUtils.yRotation(vConf.get("rotation-y", 50))); + matrix = TDUtils.multiply(matrix, TDUtils.zRotation(vConf.get("rotation-z", -30))); + let rotate = gl.getUniformLocation(program, "u_matrix"); + gl.uniformMatrix4fv(rotate, false, matrix); + } + + setup() { + this.updateFFT(vConf.get('fftSize', 4096)); + vConf.get("rotation-z", -30); + vConf.get("rotation-y", 50); + vConf.get("rotation-x", 10); + } + + updateFFT(fftSize) { + audioHandler.fftSize(fftSize); + this.data = new Float32Array(fftSize * 9); + } + + prepare(program) { + this.position = gl.getAttribLocation(program, "a_position"); + this.color = gl.getUniformLocation(program, "u_color"); + let lightPos = gl.getUniformLocation(program, "u_lightPos"), + light = gl.getUniformLocation(program, "u_light"); + gl.uniform3fv(lightPos, [ + vConf.get("light-x", 0), + vConf.get("light-y", 5), + vConf.get("light-z", -56) + ]); + gl.uniform1f(light, parseFloat(vConf.get("light-strength", 0.3))); + } + + afterDraw() { + TDUtils.updateRotate('rotation-x', 10); + TDUtils.updateRotate('rotation-y', 50); + TDUtils.updateRotate('rotation-z', -30); + vConf.save(); + } +} \ No newline at end of file diff --git a/raw/javascript/visuals/wave2d.js b/raw/javascript/visuals/wave2d.js new file mode 100644 index 0000000..3b3cabc --- /dev/null +++ b/raw/javascript/visuals/wave2d.js @@ -0,0 +1,75 @@ +class Wave2D extends Visual { + constructor() { + super(); + this.name = "2D Wave"; + } + + updateData() { + let data = audioHandler.getFloatArray(); + let add = c.width / data.length, + x = 0, + y = c.height / 2, + goTrough = y / 2; + let outerLoop = 0; + for (let i = 0; i < data.length; i++) { + //first + this.data[outerLoop] = x; + this.data[outerLoop + 1] = y + (data[i] * goTrough); + this.data[outerLoop + 2] = data[i]; + outerLoop += 3; + x += add; + } + } + + draw(program) { + this.prepare(program); + let position = this.position, + positionBuffer = gl.createBuffer(); + this.rotate(program); + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.data), gl.DYNAMIC_DRAW); + let vao = gl.createVertexArray(); + gl.bindVertexArray(vao); + gl.enableVertexAttribArray(position); + gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); + gl.drawArrays(vConf.get("waveForm", gl.LINE_STRIP), 0, this.data.length / 3); + this.afterDraw(); + } + + rotate(program) { + let glHelper = new GLHelper(program); + glHelper.project(); + glHelper.addFudgeFactor(vConf.get("fudgeFactor", 1)); + glHelper.translate([ + camera.translate.x, + camera.translate.y, + camera.translate.z + ]); + glHelper.rotateX(camera.mouse.x); + glHelper.rotateY(camera.mouse.y); + glHelper.rotateZ(vConf.get("rotation-z", 0)); + glHelper.applyMatrix(); + } + + setup() { + this.updateFFT(vConf.get('fftSize', 16384)); + } + + updateFFT(fftSize) { + audioHandler.fftSize(fftSize); + this.data = new Float32Array(fftSize * 3); + } + + prepare(program) { + this.position = gl.getAttribLocation(program, "a_position"); + //GLHelper.uniform1f(program, "u_fudgeFactor", vConf.get("fudgeFactor", 1)); + GLHelper.uniform3fv(program, "u_lightPos", vConf.get("light", [0, 5, -56])); + } + + afterDraw() { + TDUtils.updateRotate('rotation-x', 0); + TDUtils.updateRotate('rotation-y', 0); + TDUtils.updateRotate('rotation-z', 0); + vConf.save(); + } +} \ No newline at end of file diff --git a/raw/scss/_config.scss b/raw/scss/_config.scss new file mode 100644 index 0000000..b93f643 --- /dev/null +++ b/raw/scss/_config.scss @@ -0,0 +1,54 @@ +.config-nav { + display: flex; + flex-direction: row; + background-color: $nav; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + div { + padding: 10px 5px; + cursor: pointer; + user-select: none; + border-bottom: 1px solid transparent; + + &.active { + border-color: $active; + } + + &:hover { + background-color: rgba(0, 0, 0, .4); + } + } +} + +.config-content { + padding: 1em; + min-height: 200px; +} + +.config-content .visuals { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + + .visual-item { + display: flex; + align-items: center; + justify-content: center; + padding: 1em; + min-width: 100px; + min-height: 100px; + background-color: $darker; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + transition: .5s; + cursor: pointer; + + &:hover { + background-color: $nav; + } + + &.active { + border: 1px solid $primary; + } + } +} \ No newline at end of file diff --git a/raw/scss/_controls.scss b/raw/scss/_controls.scss new file mode 100644 index 0000000..fcd9a19 --- /dev/null +++ b/raw/scss/_controls.scss @@ -0,0 +1,24 @@ +.controls { + right: 0; + display: flex; +} + +.controls button, .menu-icon { + background-color: rgba(33, 33, 33, .6); + border: none; + font-size: 1.4em; + border-top: 4px solid $primary; + padding: 1.5rem; + cursor: pointer; + color: #fff; + transition: .5s; + + &.active { + border-color: $second; + } + + &:hover { + background-color: rgba(21, 21, 21, .7); + border-color: $active; + } +} \ No newline at end of file diff --git a/raw/scss/_gui.scss b/raw/scss/_gui.scss new file mode 100644 index 0000000..3cd5375 --- /dev/null +++ b/raw/scss/_gui.scss @@ -0,0 +1,196 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; +} + +group { + display: block; + padding-bottom: 10px; + user-select: none; +} + +group-label { + display: block; + border-bottom: 1px solid #fff; + font-size: 21px; + font-weight: 500; + user-select: none; +} + +group-input { + display: flex; + align-items: center; + margin-top: 5px; + user-select: none; + + label { + padding-right: 10px; + user-select: none; + width: 150px; + } + + input { + flex-grow: 1; + user-select: none; + max-width: 150px; + } + + button { + border: 1px solid #dcdcdc; + background-color: transparent; + color: #fff; + margin-left: 5px; + } +} + +.closed { + transform: translateX(-350px); + transition: all .5s; +} + +.top-menu-left { + display: flex; + + div { + position: relative; + } +} + +.loading-screen { + z-index: 100; + background-color: #000; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + span { + font-family: monospace; + font-size: 4vw; + z-index: 2; + } + + loader { + position: absolute; + top: calc(6vw + 10px); + left: 0; + right: 0; + bottom: 0; + margin: auto; + display: block; + width: 30vw; + height: 6px; + transform: scaleX(0); + transform-origin: left; + background-color: $primary; + animation: loadingBar 2s infinite; + + &.delay { + background-color: rgba(0, 110, 168, 0.24); + filter: blur(1px); + animation-delay: .05s; + } + } +} + +@keyframes loadingBar { + 0%, 100% { + transform: scaleX(0) scaleY(0); + } + 50% { + transform: scaleX(1) scaleY(1); + transform-origin: left; + } + 51%, 100% { + transform-origin: right; + } +} + +.grey-screen { + position: fixed; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, .5); + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 100; + + &.hide { + display: none !important; + } +} + +modal-footer playlist { + flex-direction: row-reverse; + flex-wrap: wrap; + + .pagination { + margin-left: auto; + } +} + +#image-upload form { + display: flex; + flex-direction: column; + width: 90%; + margin: 10px auto; +} + +.audio-item { + display: flex; + flex-direction: column; + + .artist { + font-size: .75em; + color: #dcdcdc; + } +} + +.now-playing { + font-size: .8em; + display: block; + margin-bottom: 10px; +} + +.menus { + z-index: 10; +} + +body.fullscreen { + .menus { + display: none; + } +} + +.help-list { + display: flex; + flex-direction: column; + + .item { + padding: 0 1em; + + &:not(:last-child) { + border-bottom: 1px solid #232323; + } + + .h2 { + font-size: 1.2em; + margin: 10px 0 5px; + display: block; + } + + p { + font-size: .8em; + color: #aaa; + } + } +} \ No newline at end of file diff --git a/raw/scss/_input.scss b/raw/scss/_input.scss new file mode 100644 index 0000000..5f81312 --- /dev/null +++ b/raw/scss/_input.scss @@ -0,0 +1,377 @@ +.range { + -webkit-appearance: none; + width: 100%; + margin: 5px 0; +} + +.range.center { + margin-left: auto; + margin-right: auto; +} + +.range.right { + margin-left: 10%; +} + +.range:focus { + outline: none; +} + +.range::-webkit-slider-runnable-track { + width: 100%; + height: 5px; + cursor: pointer; + background: rgba(0, 0, 0, 0.12); + border-radius: 15px; + border: none; +} + +.range::-webkit-slider-thumb { + border: 0 solid rgba(0, 0, 30, 0); + height: 15px; + width: 15px; + border-radius: 15px; + background: #ff0089; + cursor: pointer; + -webkit-appearance: none; + margin-top: -5px; +} + +.range:focus::-webkit-slider-runnable-track { + background: rgba(89, 89, 89, 0.12); +} + +.range::-moz-range-track { + width: 100%; + height: 5px; + cursor: pointer; + background: rgba(0, 0, 0, 0.12); + border-radius: 15px; + border: none; +} + +.range::-moz-range-thumb { + border: 0 solid rgba(0, 0, 30, 0); + height: 15px; + width: 15px; + border-radius: 15px; + background: #ff0089; + cursor: pointer; +} + +.range::-ms-track { + width: 100%; + height: 5px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} + +.range::-ms-fill-lower { + background: rgba(0, 0, 0, 0.12); + border: none; + border-radius: 30px; +} + +.range::-ms-fill-upper { + background: rgba(0, 0, 0, 0.12); + border: none; + border-radius: 30px; +} + +.range::-ms-thumb { + border: 0 solid rgba(0, 0, 30, 0); + height: 15px; + width: 15px; + border-radius: 15px; + background: #ff0089; + cursor: pointer; +} + +.range:focus::-ms-fill-lower { + background: rgba(0, 0, 0, 0.12); +} + +.range:focus::-ms-fill-upper { + background: rgba(89, 89, 89, 0.12); +} + +.input { + width: 100%; + position: relative; + display: inline-block; + margin-top: 1rem; + background-color: transparent; + + &-range { + margin-bottom: 20px; + } +} + +input:focus + .input:after { + width: 100%; +} + +.input input:not([type=range]) { + border: none; + border-bottom: 2px solid #dcdcdc; + position: relative; + width: 100%; + background-color: transparent; + padding: 5px; + color: #fff; +} + +.input input:not([type=range]):focus { + outline: none; +} + +.input.center { + margin-left: auto; + margin-right: auto; +} + +.input.right { + margin-left: 10%; +} + +.input-label { + display: none; +} + +.floating-label .input-label { + display: block; + position: absolute; + top: 0; + transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + pointer-events: none; + border-bottom: 1px solid transparent; +} + +.floating-label input:focus ~ .input-label, +.floating-label input:valid ~ .input-label { + transform: translateY(-0.72rem); + color: $active; + font-size: .7rem; +} + +.floating-label input:valid ~ .input-label { + transform: translateY(-0.72rem); + color: $second; + font-size: .7rem; +} + +.focus { + content: ''; + width: 0; + background-color: $second; + position: absolute; + bottom: 0; + left: 0; + right: 0; + margin: auto; + height: 2px; + transition: 0.4s cubic-bezier(0.8, 0.4, 0.25, 1); +} + +input:focus ~ .focus { + width: 100%; +} + +* { + box-sizing: border-box; +} + +switch { + display: flex; + flex-direction: row; + padding: 5px; + + input { + position: absolute; + appearance: none; + opacity: 0; + + &:checked + label:after { + transform: translateX(20px); + } + } + + span { + margin-left: 10px; + } + + label { + display: block; + border-radius: 10px; + width: 40px; + height: 20px; + background-color: #dcdcdc; + position: relative; + cursor: pointer; + padding: 0; + + &:after { + content: ''; + background-color: $primary; + position: absolute; + top: 2px; + left: 2px; + height: 16px; + width: 16px; + border-radius: 10px; + transition: .5s; + } + } +} + +input[type="file"] { + position: fixed; + left: -100000vw; + height: 1px; + width: 1px; +} + +input[type="color"] { + opacity: 0; +} + +.color-picker { + position: relative; + + input { + position: absolute !important; + top: 0; + } +} + +.colorBlob { + display: block; + width: 100%; + height: 20px; + margin: 5px 0; +} + +.button { + text-align: center; + user-select: none; + border-radius: 5px; + border: 1px solid $primary; + padding: 0.5em 1em; + cursor: pointer; + transition: .5s; + + &.spaced { + margin-bottom: 10px; + } + + &:hover { + border-color: $second; + border-radius: 7px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + } +} + +.input { + .max, .min, .current { + font-size: .8em; + color: $second; + position: absolute; + bottom: -1rem; + } + + .current { + display: block; + width: 100%; + text-align: center; + } + + .min { + left: 0; + } + + .max { + right: 0; + } +} + +custom-select { + width: auto; + min-width: 200px; + display: block; + + label { + color: #ff0089; + font-size: .7rem; + } + + input { + display: none; + } + + .label { + padding: 10px 30px 10px 10px; + cursor: pointer; + position: relative; + transition: all .3s; + box-shadow: inset 0 0 3px rgba(94, 94, 94, 1); + + &::after { + content: ''; + border: solid #dcdcdc; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transition: all .3s ease-in-out; + position: absolute; + right: 10px; + top: calc(50% - 6px); + } + } + + custom-options { + max-height: 0; + overflow: hidden; + transition: all .5s ease; + font-size: .9em; + display: block; + border: 1px solid transparent; + } + + custom-option { + display: block; + width: 100%; + padding: 10px 5px; + cursor: pointer; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .08); + + &:hover { + background-color: $primary; + color: #fff; + } + } + + custom-option.active { + font-weight: bold; + } +} + +custom-select.open { + .label { + &::after { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + top: calc(50% - 3px); + } + + background-color: rgba(0, 0, 0, .1); + } + + custom-options { + max-height: none; + border: 1px solid $nav !important; + } +} \ No newline at end of file diff --git a/raw/scss/_modal.scss b/raw/scss/_modal.scss new file mode 100644 index 0000000..cd6cfe3 --- /dev/null +++ b/raw/scss/_modal.scss @@ -0,0 +1,59 @@ +#modal { + max-width: 860px; + width: 90%; + background-color: $bg; + padding: unset; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + border-radius: 15px; + overflow: hidden; + + &.lightMode { + background-color: rgba(0, 0, 0, .1); + } + + div { + position: unset; + } + + header { + height: 50px; + font-size: 30px; + line-height: 50px; + padding-left: 10px; + overflow: hidden; + background-color: $darker; + display: flex; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + .headline { + flex-grow: 1; + } + + .close { + margin-right: 10px; + font-size: 24px; + cursor: pointer; + + &:hover { + color: $primary; + } + } + } + + modal-content { + display: block; + max-height: calc(100vh - 200px); + overflow: auto; + } + + modal-footer { + display: block; + box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + .inner { + padding: 5px; + width: calc(100% - 40px); + margin: 0 auto; + } + } +} \ No newline at end of file diff --git a/raw/scss/_notification.scss b/raw/scss/_notification.scss new file mode 100644 index 0000000..b9d0b23 --- /dev/null +++ b/raw/scss/_notification.scss @@ -0,0 +1,117 @@ +.notification { + right: 10px; + top: 0; + height: 100%; + display: flex; + flex-direction: column-reverse; + width: 90%; + max-width: 400px; + pointer-events: none; + + .notification-item { + margin-top: 10px; + } + + div { + position: unset; + padding: unset; + } + + div.notification-item { + position: relative; + } +} + +.notification-item { + width: 100%; + border-radius: 5px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + overflow: hidden; + + &.success { + background-color: $success; + } + + &.error { + background-color: $error; + } + + &.warning { + background-color: $warning; + } + + &.info { + background-color: $info; + } + + .message { + padding: 1em; + } +} + +.notification-item .fade-bar { + animation: fadeOut ease-in-out 3000ms; + height: 100%; + width: 100%; + position: absolute; + top: 0; + z-index: -1; + opacity: 0.4; + transform-origin: left; + + &:after { + content: ''; + z-index: 1; + bottom: 0; + height: 4px; + width: 100%; + position: absolute; + background-color: #fff; + } + + &.endless { + animation: endlessFade ease-in-out 500ms infinite; + } + + &.success { + background-color: $successBorder; + } + + &.error { + background-color: $errorBorder; + } + + &.warning { + background-color: $warningBorder; + } + + &.info { + background-color: $primary; + } +} + +@keyframes fadeOut { + from { + transform: scaleX(1); + } + to { + transform: scaleX(0); + } +} + +@keyframes endlessFade { + 0% { + transform: scaleX(1); + transform-origin: right; + } + 49% { + transform-origin: right; + } + 50% { + transform: scaleX(0); + transform-origin: left; + } + 100% { + transform: scaleX(1); + } +} \ No newline at end of file diff --git a/raw/scss/_playlist.scss b/raw/scss/_playlist.scss new file mode 100644 index 0000000..e6743e6 --- /dev/null +++ b/raw/scss/_playlist.scss @@ -0,0 +1,82 @@ +playlist { + display: flex; + flex-direction: column; + + div { + padding: unset; + position: unset; + } + + .playlist-content { + h1 { + padding: 0 1em; + } + } + + .pagination { + display: flex; + justify-content: flex-end; + font-size: 1.5em; + padding: 5px; + + .current { + font-size: .9em; + } + + .item { + cursor: pointer; + user-select: none; + border-radius: 5px; + margin: 0 3px; + display: flex; + align-items: center; + + &.inactive { + color: #aaa; + pointer-events: none; + cursor: not-allowed; + } + + &:hover { + color: $primary; + } + } + } + + .playlist-item { + display: flex; + padding: 5px; + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .08); + cursor: pointer; + transition: .5s; + + &.active { + background-color: rgba(0, 0, 0, .2); + + .playlist-item-title { + &:before { + content: '🔊 '; + padding-right: 5px; + } + } + } + + &-title { + margin-left: 10px; + padding: 5px; + display: flex; + align-items: center; + } + + &-number { + padding: 5px 10px 5px 5px; + width: 50px; + display: flex; + align-items: center; + } + + &:hover { + background-color: rgba(0, 0, 0, .4); + } + } +} \ No newline at end of file diff --git a/raw/scss/_scrollbar.scss b/raw/scss/_scrollbar.scss new file mode 100644 index 0000000..716abd9 --- /dev/null +++ b/raw/scss/_scrollbar.scss @@ -0,0 +1,42 @@ + +::-webkit-scrollbar { + width: 3px; + height: 3px; +} + +::-webkit-scrollbar-button { + width: 15px; + height: 15px; +} + +::-webkit-scrollbar-thumb { + background: #e1e1e1; + border: 0 none #ffffff; + border-radius: 100px; +} + +::-webkit-scrollbar-thumb:hover { + background: #ffffff; +} + +::-webkit-scrollbar-thumb:active { + background: $primary; +} + +::-webkit-scrollbar-track { + background: #666666; + border: 0 none #ffffff; + border-radius: 46px; +} + +::-webkit-scrollbar-track:hover { + background: #666666; +} + +::-webkit-scrollbar-track:active { + background: #666666; +} + +::-webkit-scrollbar-corner { + background: transparent; +} \ No newline at end of file diff --git a/raw/scss/_variables.scss b/raw/scss/_variables.scss new file mode 100644 index 0000000..b229076 --- /dev/null +++ b/raw/scss/_variables.scss @@ -0,0 +1,16 @@ +$bg: #303030; +$darker: #212121; +$nav: #1b1b1b; + +$primary: #3949ab; +$second: #ff0089; +$active: #5ff507; + +$info: rgba(71,73,171,.6); +$success: rgba(74, 177, 11,.6); +$error: rgba(255,50,50,.6); +$warning: rgba(255, 177, 89, 0.6); + +$successBorder: #60ff00; +$errorBorder: #fa0000; +$warningBorder: #ff7700; \ No newline at end of file diff --git a/raw/scss/style.scss b/raw/scss/style.scss new file mode 100644 index 0000000..8b65c80 --- /dev/null +++ b/raw/scss/style.scss @@ -0,0 +1,56 @@ +@import "variables"; + + +* { + box-sizing: border-box; +} + +*:focus { + outline: none; +} + +html, body { + padding: 0; + margin: 0; + overflow: hidden; + font-size: 16px; + font-family: sans-serif; + background-color: $bg; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100vw; + height: 100vh; +} + +div { + position: fixed; + color: #fff; + padding: 1em; +} + +.hide { + display: none !important; +} + +.icon { + width: 1em; + height: 1em; + vertical-align: middle; + font-size: 1em; + shape-rendering: geometricPrecision; + transition: transform .5s cubic-bezier(.22, .61, .36, 1); + stroke-width: 5px; + text-align: center; + display: block; +} + + +@import "scrollbar"; +@import "gui"; +@import "input"; +@import "controls"; +@import "playlist"; +@import "modal"; +@import "notification"; +@import "config"; \ No newline at end of file diff --git a/raw/worker/app.js b/raw/worker/app.js new file mode 100644 index 0000000..41f18b1 --- /dev/null +++ b/raw/worker/app.js @@ -0,0 +1,4 @@ +const tagger = new Tagger(self), + eventHandler = new EventHandler(self); + +tagger.init(); \ No newline at end of file diff --git a/raw/worker/database.js b/raw/worker/database.js new file mode 100644 index 0000000..e8d88bc --- /dev/null +++ b/raw/worker/database.js @@ -0,0 +1,97 @@ +class Database { + constructor(name, version) { + this.isInit = false; + this.name = name; + this.version = version; + this.errored = false; + this.db; + this.prepareDB(); + } + + async prepareDB() { + if (this.isInit || this.errored) { + return; + } + let req = this.db = indexedDB.open(this.name, this.version); + req.onerror = DatabaseHandler.onError.bind(this); + req.onsuccess = DatabaseHandler.onSuccess.bind(this); + req.onupgradeneeded = DatabaseHandler.onUpgrade.bind(this); + req.onblocked = DatabaseHandler.onBlocked.bind(this); + } + + async set(key, data, store) { + data['key'] = key; + return await this.run('put', data, store); + } + + async get(key, store) { + return await this.run('get', key, store); + } + + async remove(key, store) { + return await this.run('delete', key, store); + } + + check() { + return !(!this.isInit || this.errored); + } + + async getTX(store) { + return await this.db.transaction([store], "readwrite") + } + + async getObjectStore(tx, store) { + return await tx.objectStore(store) + } + + async run(action, key, store) { + if (this.check()) { + let tx = await this.getTX(store); + let obj = await this.getObjectStore(tx, store); + let data = await this.request(obj[action](key)); + await tx.complete + return await data; + } + return null; + } + + request(req) { + return new Promise((resolve, reject) => { + req.onsuccess = () => resolve(req.result); + req.onerror = () => reject(req.error); + }); + } +} + +class DatabaseHandler { + static onError(e) { + this.errored = true; + eventHandler.sendData("databaseError", "error", e.message); + } + + static onSuccess(e) { + this.db = this.db.result; + this.isInit = true; + eventHandler.sendData("databaseCreated", "success", ""); + eventHandler.handleEvent({ + data: { + cmd: 'dbReady-' + this.name, + data: this.db + } + }); + } + + static onUpgrade(e) { + eventHandler.sendData("databaseUpgradeNeeded", "info", e.message); + eventHandler.handleEvent({ + data: { + cmd: 'dbUpgrade-' + this.name, + data: this.db + } + }); + } + + static onBlocked(e) { + eventHandler.sendData("databaseBlocked", "error", e.message); + } +} \ No newline at end of file diff --git a/raw/worker/eventHandler.js b/raw/worker/eventHandler.js new file mode 100644 index 0000000..f1b2445 --- /dev/null +++ b/raw/worker/eventHandler.js @@ -0,0 +1,30 @@ +class EventHandler { + constructor(worker) { + this.events = {}; + this.worker = worker; + this.worker.addEventListener('message', this.handleEvent.bind(this)); + } + + addEvent(name, cb) { + this.events[name] = cb; + } + + sendData(name, status, data) { + this.worker.postMessage({ + cmd: name, + status: status, + data: data + }); + } + + handleEvent(event) { + let data = event.data; + if (!data.cmd) { + return; + } + + if (this.events[data.cmd]) { + this.events[data.cmd](data.data); + } + } +} \ No newline at end of file diff --git a/raw/worker/id3.js b/raw/worker/id3.js new file mode 100644 index 0000000..0609715 --- /dev/null +++ b/raw/worker/id3.js @@ -0,0 +1,86 @@ +self.importScripts('jsmediatags.min.js'); + +class Tagger { + constructor(worker) { + this.db = new Database("SongLib", 1); + } + + static prepareName(data) { + let name = data.name || ''; + return name.replace(/[^\w\s]/gi, '').split(" ").join("") + } + + init() { + eventHandler.addEvent('getData', this.getData.bind(this)); + eventHandler.addEvent('removeData', this.getData.bind(this)); + eventHandler.addEvent('setData', this.getData.bind(this)); + eventHandler.addEvent('dbReady-SongLib', this.ready.bind(this)); + eventHandler.addEvent('dbUpgrade-SongLib', this.upgrade.bind(this)); + } + + async getData(data) { + let key = Tagger.prepareName(data), + newData = await this.db.get(key, 'songs'), + handlerName = data.force ? 'id3-request-force' : 'id3-request'; + if (newData) { + newData['index'] = data['index']; + eventHandler.sendData(handlerName, 'success', newData); + } else { + this.parseData(data, key).then(r => { + r['index'] = data['index']; + eventHandler.sendData(handlerName, 'success', r); + }); + eventHandler.sendData(handlerName, 'waiting', data); + } + } + + async removeData(data) { + let key = Tagger.prepareName(data), + newData = await this.db.remove(key, 'songs'); + eventHandler.sendData('id3-remove', 'success', newData); + } + + async setData(data, key) { + let newData = await this.db.set(key, data, 'songs'); + eventHandler.sendData('id3-set', 'success', newData); + } + + ready(data) { + console.log("[ID3] > Song Database Ready"); + eventHandler.sendData('id3-ready', "startup", ""); + } + + upgrade(data) { + let db = data.result, + songs = db.createObjectStore("songs", {keyPath: 'key'}); + songs.createIndex("name", "name", {unique: false}); + } + + //if not found in key-value storage read it! this take some time so this is async! + async parseData(data, key) { + let tag = await new Promise((resolve, reject) => { + new jsmediatags.Reader(data.file) + .read({ + onSuccess: (tag) => { + resolve(tag); + }, + onError: (error) => { + console.log(`[ID3] > Error Parsing Data!`); + resolve({ + tags: {} + }); + } + }); + }) + let tags = tag.tags, + values = { + title: tags.title || data.name, + artist: tags.artist || 'VA', + genre: tags.genre || 'Unknown', + year: tags.year || 1970, + key: key + }; + await this.setData(values, key); + return values; + } +} \ No newline at end of file diff --git a/shaders/sphere.frag b/shaders/sphere.frag index 57589f2..3d933ec 100644 --- a/shaders/sphere.frag +++ b/shaders/sphere.frag @@ -1,19 +1,17 @@ #version 300 es -// fragment shaders don't have a default precision so we need -// to pick one. mediump is a good default. It means "medium precision" precision highp float; - +in vec4 fragNormal; in vec3 v_surfaceToLight; uniform vec4 u_color; +uniform vec3 u_light; uniform vec3 u_lightPos; out vec4 outColor; void main() { - vec3 surfaceToLightDirection = normalize(v_surfaceToLight); + float light = max(dot(fragNormal.xyz, normalize(v_surfaceToLight).xyz), u_light.x); outColor = u_color; - float light = 1.0; - //outColor.rgb *= surfaceToLightDirection; + outColor.rgb *= light; } \ No newline at end of file diff --git a/shaders/sphere.vert b/shaders/sphere.vert index 45fc06f..2ed16f7 100644 --- a/shaders/sphere.vert +++ b/shaders/sphere.vert @@ -1,12 +1,11 @@ #version 300 es in vec4 a_position; -uniform mat4 u_world; uniform mat4 u_matrix; uniform vec3 u_lightPos; -uniform vec3 u_light; uniform float u_pointSize; +out vec4 fragNormal; out vec3 v_surfaceToLight; void main() { @@ -14,8 +13,7 @@ void main() { vec4 pos = a_position * u_matrix; gl_Position = pos; gl_PointSize = u_pointSize; - - vec3 surfaceWorldPosition = (u_world * pos).xyz; - + fragNormal = normalize(pos); + vec3 surfaceWorldPosition = (u_matrix * pos).xyz; v_surfaceToLight = u_lightPos - surfaceWorldPosition; } \ No newline at end of file diff --git a/shaders/test.frag b/shaders/test.frag deleted file mode 100644 index 088b9b9..0000000 --- a/shaders/test.frag +++ /dev/null @@ -1,13 +0,0 @@ -#version 300 es - -// fragment shaders don't have a default precision so we need -// to pick one. mediump is a good default. It means "medium precision" -precision mediump float; - -uniform vec4 u_color; - -out vec4 outColor; - -void main() { - outColor = u_color; -} \ No newline at end of file diff --git a/shaders/water.frag b/shaders/water.frag new file mode 100644 index 0000000..9bae044 --- /dev/null +++ b/shaders/water.frag @@ -0,0 +1,11 @@ +#version 300 es + +precision mediump float; + +uniform vec4 u_color; + +out vec4 outColor; + +void main() { + outColor = vec4(255,255,255,0); +} \ No newline at end of file diff --git a/shaders/test.vert b/shaders/water.vert similarity index 100% rename from shaders/test.vert rename to shaders/water.vert diff --git a/shaders/wave.frag b/shaders/wave.frag new file mode 100644 index 0000000..7ec3f35 --- /dev/null +++ b/shaders/wave.frag @@ -0,0 +1,23 @@ +#version 300 es + +precision mediump float; + +in vec4 pos; +in vec3 v_surfaceToLight; +uniform vec3 u_baseColor; +uniform vec3 u_maxColor; +uniform float u_light; + +out vec4 outColor; + +void main() { + vec4 fragNormal = normalize(pos); + float light = max(dot(fragNormal.xyz, normalize(v_surfaceToLight).xyz), u_light); + float y = pos.z; + if (y < 0.0) { + y = y * -1.0; + } + vec3 color = mix(u_baseColor, u_maxColor, y); + outColor = vec4(color, 1.0); + outColor.rgb *= light; +} \ No newline at end of file diff --git a/shaders/wave.vert b/shaders/wave.vert new file mode 100644 index 0000000..bafb157 --- /dev/null +++ b/shaders/wave.vert @@ -0,0 +1,14 @@ +#version 300 es + +in vec3 a_position; +uniform mat4 u_matrix; +uniform vec3 u_lightPos; + +out vec4 pos; +out vec3 v_surfaceToLight; + +void main() { + pos = u_matrix * vec4(a_position, 1); + gl_Position = pos; + v_surfaceToLight = u_lightPos - pos.xyz; +} \ No newline at end of file diff --git a/shaders/wave2d.frag b/shaders/wave2d.frag new file mode 100644 index 0000000..a8245d4 --- /dev/null +++ b/shaders/wave2d.frag @@ -0,0 +1,18 @@ +#version 300 es +precision mediump float; + +in vec4 pos; + +uniform vec3 u_baseColor; +uniform vec3 u_maxColor; + +out vec4 outColor; + +void main() { + float y = pos.z; + if (y < 0.0) { + y = y * -1.0; + } + vec3 color = mix(u_baseColor, u_maxColor, y); + outColor = vec4(color, 1.0); +} \ No newline at end of file diff --git a/shaders/wave2d.vert b/shaders/wave2d.vert new file mode 100644 index 0000000..718cd9c --- /dev/null +++ b/shaders/wave2d.vert @@ -0,0 +1,12 @@ +#version 300 es + +in vec3 a_position; +uniform mat4 u_matrix; +uniform float u_fudgeFactor; + +out vec4 pos; + +void main() { + pos = u_matrix * vec4(a_position, 1); + gl_Position = pos; +} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index ccea8c6..0000000 --- a/style.css +++ /dev/null @@ -1,215 +0,0 @@ -html, body { - padding: 0; - margin: 0; - overflow: hidden; - font-size: 16px; - font-family: sans-serif; -} - -div { - position: fixed; - color: #fff; - padding: 1em; -} - -#c { - width: 100%; - height: 100%; -} - -.settings-icon { - right: 0; - bottom: 0; - font-size: 1.5em; - cursor: pointer; -} - -.settings-icon:hover { - color: #0199ff; -} - -.off-can { - top: 0; - left: 0; - width: 300px; - background-color: rgba(33, 33, 33, 0.6); - height: 100vh; - transition: all .5s; - user-select: none; -} - -group { - display: block; - padding-bottom: 10px; - user-select: none; -} - -group-label { - display: block; - border-bottom: 1px solid #ffffff; - font-size: 21px; - font-weight: 500; - user-select: none; -} - -group-input { - display: flex; - align-items: center; - margin-top: 5px; - user-select: none; -} - -group-input label { - padding-right: 10px; - user-select: none; - width: 150px; -} - - -group-input input { - flex-grow: 1; - user-select: none; - max-width: 150px; -} - -group-input button { - border: 1px solid #dcdcdc; - background-color: transparent; - color: #fff; - margin-left: 5px; -} - -.closed { - transform: translateX(-350px); - transition: all .5s; -} - -input[type=range] { - -webkit-appearance: none; - width: 100%; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 25.6px; - cursor: pointer; - box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d; - background: #424242; - border-radius: 0; - border: 0 solid #010101; -} - -input[type=range]::-webkit-slider-thumb { - box-shadow: 0 0 0 #470000, 0 0 0 #610000; - border: 0 solid #ff0000; - height: 25px; - width: 15px; - border-radius: 0; - background: #a8c64e; - cursor: pointer; - -webkit-appearance: none; - margin-top: 0.3px; -} - -input[type=range]:focus::-webkit-slider-runnable-track { - background: #545454; -} - -input[type=range]::-moz-range-track { - width: 100%; - height: 25.6px; - cursor: pointer; - box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d; - background: #424242; - border-radius: 0; - border: 0 solid #010101; -} - -input[type=range]::-moz-range-thumb { - box-shadow: 0 0 0 #470000, 0 0 0 #610000; - border: 0 solid #ff0000; - height: 25px; - width: 15px; - border-radius: 0; - background: #a8c64e; - cursor: pointer; -} - -input[type=range]::-ms-track { - width: 100%; - height: 25.6px; - cursor: pointer; - background: transparent; - border-color: transparent; - color: transparent; -} - -input[type=range]::-ms-fill-lower { - background: #303030; - border: 0 solid #010101; - border-radius: 0; - box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d; -} - -input[type=range]::-ms-fill-upper { - background: #424242; - border: 0 solid #010101; - border-radius: 0; - box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d; -} - -input[type=range]::-ms-thumb { - box-shadow: 0 0 0 #470000, 0 0 0 #610000; - border: 0 solid #ff0000; - width: 15px; - border-radius: 0; - background: #a8c64e; - cursor: pointer; - height: 25px; -} - -input[type=range]:focus::-ms-fill-lower { - background: #424242; -} - -input[type=range]:focus::-ms-fill-upper { - background: #545454; -} - -switch input { - position: absolute; - appearance: none; - opacity: 0; -} - -switch label { - display: block; - border-radius: 10px; - width: 40px; - height: 20px; - background-color: #dcdcdc; - position: relative; - cursor: pointer; - padding: 0; -} - -switch label:after { - content: ''; - background-color: #ff3232; - position: absolute; - top: 2px; - left: 2px; - height: 16px; - width: 16px; - border-radius: 10px; - transition: .5s; -} - -switch input:checked + label:after { - transform: translateX(20px); -} - diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..d0673a1 --- /dev/null +++ b/sw.js @@ -0,0 +1,44 @@ +const cacheName = 'vis3d-pwa-1', + FILES_TO_CACHE = [ + '/index.html', + '/empty.txt' + ]; + +self.addEventListener('install', function (e) { + e.waitUntil( + caches.open(cacheName).then(function (cache) { + return cache.addAll(FILES_TO_CACHE); + }) + ); +}); + +self.addEventListener('fetch', function (event) { + if (event.request.method !== 'GET') return; + event.respondWith(handle.bind(event).call().then(r => { + return r + })) +}); + +async function handle() { + let event = this, + url = event.request.url; + if (url === self.registration.scope) { + url += 'index.html'; + } + const cache = await caches.open(cacheName); + let response = await fetch(url).then((r) => { + return r + }).catch(async err => { + let cachedResponse = await cache.match(url); + if (cachedResponse) { + return cachedResponse; + } + cachedResponse = await cache.match('/empty.txt'); + return cachedResponse; + }); + if (response) { + await cache.put(event.request, response.clone()); + return response; + } + +} \ No newline at end of file