Merge pull request #6 from McDic/feature/soundcloud-music-player

Add Soundcloud music player

docs/architecture.md

@@ -107,4 +107,12 @@ However I think this is still feasible, considering I am providing user statisti
 
 ---
 
+## Soundcloud music player
+
+I embedded [Soundcloud Widget API](https://developers.soundcloud.com/docs/api/html5-widget) on the header with some modifications.
+I wrote some simple Javascript code to implement random music player.
+For music sources, please [refer here](https://soundcloud.com/minsung-kim-mcdic/sets/blog-background-musics).
+
+---
+
 If there is anything you wonder, please ask in comments.

docs/javascripts/musicplayer.js

@@ -0,0 +1,80 @@
+function getSC() {
+    var musicplayerElement = document.querySelector("iframe.soundcloud");
+    if (musicplayerElement == null) {
+        return null;
+    }
+    return SC.Widget(musicplayerElement);
+}
+
+async function musicplayerOnLoad() {
+
+    // Private class for storing nonlocal static variables of music player
+    class MusicPlayerStaticVariables {
+        constructor(sc_widget) {
+            this.sc = sc_widget;
+            this.playlistLength = 1;
+            this.isPlaying = false;
+            this.ok_move = false;
+        }
+
+        updateByGetters() {
+            this.ok_move = false;
+            this.sc.getSounds((sounds) => {
+                this.playlistLength = sounds.length;
+                this.sc.isPaused((paused) => {
+                    this.isPlaying = !paused;
+                    this.ok_move = true;
+                })
+            });
+        }
+    };
+
+    // Private function returning random integer in range [a, b)
+    function randomInt(a, b) {
+        return Math.floor(Math.random() * (b - a)) + a;
+    }
+
+    // Private function waiting for condition to be true
+    async function whileWaiting(condition_callback, action_callback, timeout=200) {
+        while (!condition_callback()) {
+            await new Promise(resolve => setTimeout(resolve, timeout));
+            if (action_callback != null) action_callback();
+        }
+    }
+
+    var widget = getSC();
+    await whileWaiting(() => (widget != null), () => { widget = getSC(); });
+    var controller_button = document.querySelector("header.md-header .music-player.mcdic");
+    var musicState = new MusicPlayerStaticVariables(widget);
+    playButtonMode();
+
+    function playButtonMode() {
+        controller_button.classList.remove("pause-button");
+        controller_button.classList.add("play-button");
+        controller_button.title = "Play random music";
+    }
+
+    function stopButtonMode() {
+        controller_button.classList.remove("play-button");
+        controller_button.classList.add("pause-button");
+        controller_button.title = "Stop this music";
+    }
+
+    async function togglePlay() {
+        musicState.updateByGetters();
+        await whileWaiting(() => musicState.ok_move, null);
+        if (musicState.isPlaying) {
+            widget.pause();
+            playButtonMode();
+        } else {
+            widget.skip(randomInt(0, musicState.playlistLength));
+            widget.seekTo(0);
+            widget.setVolume(25);
+            widget.play();
+            stopButtonMode();
+        }
+    }
+    controller_button.addEventListener("click", () => togglePlay().then(null));
+}
+
+musicplayerOnLoad().then(null);

docs/stylesheets/header.css

@@ -16,3 +16,37 @@ header.md-header .auto-scroller:hover {
     cursor: pointer;
     opacity: 75%;
 }
+
+header.md-header .music-player {
+    display: flex;
+    width: 2.2rem;
+    height: 2.2rem;
+    float: inline-start;
+    fill: currentColor;
+
+    svg {
+        width: 1.1rem;
+        height: 1.1rem;
+        margin: 0.55rem;
+        fill: currentColor;
+    }
+}
+
+header.md-header .music-player.play-button {
+    background: url("/assets/icons/svgrepo/music_play.svg") no-repeat center/60%;
+}
+
+header.md-header .music-player.pause-button {
+    background: url("/assets/icons/svgrepo/music_pause.svg") no-repeat center/60%;
+}
+
+header.md-header .music-player:hover {
+    cursor: pointer;
+    opacity: 75%;
+}
+
+header.md-header iframe.soundcloud {
+    visibility: hidden;
+    animation-duration: 0ms;
+    -webkit-animation-duration: 0ms;
+}

mkdocs.yml

@@ -118,6 +118,8 @@ extra_javascript:
   - https://polyfill.io/v3/polyfill.min.js?features=es6
   - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
   - javascripts/autoscroll.js
+  - https://w.soundcloud.com/player/api.js
+  - javascripts/musicplayer.js
 
 extra_css:
   - stylesheets/admonitions.css

overrides/partials/header.html

@@ -52,6 +52,9 @@
       </div>
     </div>
 
+    <!-- (MODIFIED BY MCDIC) MUSIC PLAYER -->
+    {% include "partials/headers/musicplayer.html" %}
+
     <!-- (MODIFIED BY MCDIC) SCROLLER -->
     {% include "partials/headers/autoscroller.html" %}
 

overrides/partials/headers/musicplayer.html

@@ -0,0 +1,7 @@
+<div class="music-player mcdic play-button">
+</div>
+<iframe
+  class="soundcloud" title="soundcloud"
+  width="0px" height="0px" scrolling="no" frameborder="no" allow="autoplay"
+src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1952629623&color=%2328b928&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=true">
+</iframe>