feat: ✨ keyboard shortcut & animation

gouz · Oct 30, 2021 · 9052a2c · 9052a2c
1 parent d65f5c0
commit 9052a2c
Show file tree

Hide file tree

Showing 14 changed files with 193 additions and 163 deletions.
diff --git a/docs/index.39c1fd6c.css → docs/index.305417f9.css b/docs/index.39c1fd6c.css → docs/index.305417f9.css
diff --git a/docs/index.8d7cb664.js b/docs/index.8d7cb664.js
diff --git a/docs/index.f6cd1a9c.js b/docs/index.f6cd1a9c.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.39c1fd6c.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MuziK</title><link rel="icon" type="image/svg+xml" href="5340260_audio_joox_media_music_social_icon.1e162f1f.svg"><meta property="og:title" content=""><meta property="og:type" content="music.song"><meta property="og:url" content=""><meta property="og:image" content=""></head><body><h1></h1><div id="app"><div id="wrapper"><div id="controls"><div id="volume-control"><span>🔈</span><input id="volume" type="range" min="0" max="100" step="1" title="volume" defaultvalue="82" onchange="window.setVolume(this.value)" oninput="window.setVolume(this.value)"><span>🔊</span></div><div id="next"><a href="#" onclick="window.next();" title="new song">🎵</a></div></div></div></div><div id="infos"><a href="https://github.com/gouz/muzik" title="source code" target="_blank">📝</a><span>/&nbsp;</span></div><script src="index.f6cd1a9c.js" type="module"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.305417f9.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MuziK</title><link rel="icon" type="image/svg+xml" href="5340260_audio_joox_media_music_social_icon.1e162f1f.svg"><meta property="og:title" content=""><meta property="og:type" content="music.song"><meta property="og:url" content=""><meta property="og:image" content=""></head><body><h1></h1><div id="app"><div id="wrapper"><div id="controls"><div id="volume-control"><span>🔈</span><input id="volume" type="range" min="0" max="100" step="1" title="volume" defaultvalue="82" onchange="window.setVolume(this.value)" oninput="window.setVolume(this.value)"><span>🔊</span></div><div id="next"><a href="#" onclick="window.next();" title="new song (n)">🎵</a></div></div></div></div><div id="infos"><a href="https://github.com/gouz/muzik" title="source code" target="_blank">📝</a><span>/&nbsp;</span></div><script src="index.8d7cb664.js" type="module"></script></body></html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muzik",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Like a blog, but with a list of songs I like",
   "source": "src/index.pug",
   "scripts": {

diff --git a/src/index.pug b/src/index.pug
@@ -33,7 +33,7 @@ html(lang='en')
             )
             span 🔊
           #next
-            a(href='#', onclick='window.next();', title='new song') 🎵
+            a(href='#', onclick='window.next();', title='new song (n)') 🎵
     #infos
       a(
         href='https://github.com/gouz/muzik',

diff --git a/src/js/background.js b/src/js/background.js
@@ -0,0 +1,59 @@
+import FastAverageColor from 'fast-average-color';
+
+window.changeBG = (url, squared, cors) => {
+  window.bg = document.createElement('canvas');
+  window.bg.width =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  window.bg.height =
+    window.innerHeight ||
+    document.documentElement.clientHeight ||
+    document.body.clientHeight;
+  window.bg.id = 'bg';
+  document.querySelector('body').appendChild(window.bg);
+  let img = new Image();
+  if (cors) img.crossOrigin = 'Anonymous';
+  img.addEventListener(
+    'load',
+    () => {
+      window.bg = document.querySelector('#bg');
+      let ctx = window.bg.getContext('2d');
+      let newW = window.bg.width;
+      if (window.bg.height < window.bg.width && squared)
+        newW = window.bg.height;
+      let newY = window.bg.height;
+      if (window.bg.height > window.bg.width && squared) newY = window.bg.width;
+      ctx.drawImage(
+        img,
+        0,
+        0,
+        img.width,
+        img.height,
+        (window.bg.width - newW) / 2,
+        (window.bg.height - newY) / 2,
+        newW,
+        newY
+      );
+      if (cors) {
+        const fac = new FastAverageColor();
+        fac.getColorAsync(img).then((color) => {
+          document.querySelector('body').style.backgroundColor = color.rgba;
+        });
+      } else {
+        document.querySelector('body').style.backgroundColor = '#000';
+      }
+      window.moveBG();
+    },
+    false
+  );
+  img.src = url;
+};
+
+window.moveBG = () => {
+  setTimeout(() => {
+    window.bg.style.marginTop = `-${-2 + Math.floor(5 * Math.random())}%`;
+    window.bg.style.marginLeft = `-${-2 + Math.floor(5 * Math.random())}%`;
+    window.moveBG();
+  }, 2000);
+};
diff --git a/src/js/dom.js b/src/js/dom.js
@@ -0,0 +1,26 @@
+window.changeTitle = (title) => {
+  document.querySelector('h1').innerHTML = title;
+  document.querySelector('title').innerHTML = title;
+};
+
+window.changeMeta = (title, img) => {
+  document
+    .querySelector('meta[property="og:title"]')
+    .setAttribute('content', title);
+  document
+    .querySelector('meta[property="og:url"]')
+    .setAttribute('content', window.location);
+  document
+    .querySelector('meta[property="og:image"]')
+    .setAttribute('content', img);
+};
+
+window.changeContent = (html) => {
+  document.querySelector('#wrapper').innerHTML += `
+          <div id="🎶">
+              <div id="🎶--box">
+                  ${html}
+              </div>
+          </div>
+      `;
+};
diff --git a/src/js/keyboard.js b/src/js/keyboard.js
@@ -0,0 +1,8 @@
+document.addEventListener('keypress', (e) => {
+  if ('n' == e.key) window.next();
+  else {
+    if ('+' == e.key) document.querySelector('#volume').value += 5;
+    if ('-' == e.key) document.querySelector('#volume').value -= 5;
+    window.setVolume(document.querySelector('#volume').value);
+  }
+});
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.39c1fd6c.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MuziK</title><link rel="icon" type="image/svg+xml" href="5340260_audio_joox_media_music_social_icon.1e162f1f.svg"><meta property="og:title" content=""><meta property="og:type" content="music.song"><meta property="og:url" content=""><meta property="og:image" content=""></head><body><h1></h1><div id="app"><div id="wrapper"><div id="controls"><div id="volume-control"><span>🔈</span><input id="volume" type="range" min="0" max="100" step="1" title="volume" defaultvalue="82" onchange="window.setVolume(this.value)" oninput="window.setVolume(this.value)"><span>🔊</span></div><div id="next"><a href="#" onclick="window.next();" title="new song">🎵</a></div></div></div></div><div id="infos"><a href="https://github.com/gouz/muzik" title="source code" target="_blank">📝</a><span>/ </span></div><script src="index.f6cd1a9c.js" type="module"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.305417f9.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MuziK</title><link rel="icon" type="image/svg+xml" href="5340260_audio_joox_media_music_social_icon.1e162f1f.svg"><meta property="og:title" content=""><meta property="og:type" content="music.song"><meta property="og:url" content=""><meta property="og:image" content=""></head><body><h1></h1><div id="app"><div id="wrapper"><div id="controls"><div id="volume-control"><span>🔈</span><input id="volume" type="range" min="0" max="100" step="1" title="volume" defaultvalue="82" onchange="window.setVolume(this.value)" oninput="window.setVolume(this.value)"><span>🔊</span></div><div id="next"><a href="#" onclick="window.next();" title="new song (n)">🎵</a></div></div></div></div><div id="infos"><a href="https://github.com/gouz/muzik" title="source code" target="_blank">📝</a><span>/ </span></div><script src="index.8d7cb664.js" type="module"></script></body></html>