From 4ed44f45af932f1569f569efc9ceefa68c63263a Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Fri, 17 Jan 2025 17:11:17 +0900 Subject: [PATCH 1/6] Added icons --- overrides/.icons/svgrepo/music_pause.svg | 2 ++ overrides/.icons/svgrepo/music_play.svg | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 overrides/.icons/svgrepo/music_pause.svg create mode 100644 overrides/.icons/svgrepo/music_play.svg diff --git a/overrides/.icons/svgrepo/music_pause.svg b/overrides/.icons/svgrepo/music_pause.svg new file mode 100644 index 000000000..6a74023d8 --- /dev/null +++ b/overrides/.icons/svgrepo/music_pause.svg @@ -0,0 +1,2 @@ + + diff --git a/overrides/.icons/svgrepo/music_play.svg b/overrides/.icons/svgrepo/music_play.svg new file mode 100644 index 000000000..aefee147e --- /dev/null +++ b/overrides/.icons/svgrepo/music_play.svg @@ -0,0 +1,2 @@ + + From d07683e4182e18d467142d96a62b76001d59144c Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Fri, 17 Jan 2025 17:12:09 +0900 Subject: [PATCH 2/6] Added iframe and header htmls --- docs/stylesheets/extra.css | 4 ++++ overrides/partials/content.html | 6 ++++++ overrides/partials/header.html | 3 +++ overrides/partials/headers/musicplayer.html | 3 +++ 4 files changed, 16 insertions(+) create mode 100644 overrides/partials/headers/musicplayer.html diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index c2cfd7fcd..fc3f1783e 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,3 +1,7 @@ .md-source__repository .md-source__facts { display: none; } + +.md-container iframe.soundcloud { + visibility: hidden; +} diff --git a/overrides/partials/content.html b/overrides/partials/content.html index 700e46465..b406d8d6e 100644 --- a/overrides/partials/content.html +++ b/overrides/partials/content.html @@ -26,3 +26,9 @@

{{ page.title | d(config.site_name, true)}}

{% include "partials/comments.html" %} + + +
+ diff --git a/overrides/partials/header.html b/overrides/partials/header.html index c151803da..1bb0fc06f 100644 --- a/overrides/partials/header.html +++ b/overrides/partials/header.html @@ -52,6 +52,9 @@ + + {% include "partials/headers/musicplayer.html" %} + {% include "partials/headers/autoscroller.html" %} diff --git a/overrides/partials/headers/musicplayer.html b/overrides/partials/headers/musicplayer.html new file mode 100644 index 000000000..10b1a6d55 --- /dev/null +++ b/overrides/partials/headers/musicplayer.html @@ -0,0 +1,3 @@ +
+ {% include ".icons/svgrepo/music_play.svg" %} +
From 3df97a8bb603e31766b5ffc2a72f638be3ac68dd Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Fri, 17 Jan 2025 17:12:20 +0900 Subject: [PATCH 3/6] Added header css --- docs/stylesheets/header.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/stylesheets/header.css b/docs/stylesheets/header.css index b0a89be2c..24a00f43e 100644 --- a/docs/stylesheets/header.css +++ b/docs/stylesheets/header.css @@ -16,3 +16,22 @@ 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-end; + + svg { + width: 1.1rem; + height: 1.1rem; + margin: 0.55rem; + fill: currentColor; + } +} + +header.md-header .music-player:hover { + cursor: pointer; + opacity: 75%; +} From 4cd54dd539cb915d7d5629b264d148679f9c653d Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Fri, 17 Jan 2025 17:12:41 +0900 Subject: [PATCH 4/6] Added new musicplayer js(WIP) and included in `mkdocs.yml` --- docs/javascripts/musicplayer.js | 10 ++++++++++ mkdocs.yml | 2 ++ 2 files changed, 12 insertions(+) create mode 100644 docs/javascripts/musicplayer.js diff --git a/docs/javascripts/musicplayer.js b/docs/javascripts/musicplayer.js new file mode 100644 index 000000000..04605ddd0 --- /dev/null +++ b/docs/javascripts/musicplayer.js @@ -0,0 +1,10 @@ +const SC2 = SC; +console.log(SC2); + +function musicplayerOnLoad() { + var musicplayerElement = document.querySelector("iframe.soundcloud"); + if (musicplayerElement == null) { + return; + } + var widget = SC.Widget(musicplayerElement); +} diff --git a/mkdocs.yml b/mkdocs.yml index a5039ac09..41e4ae732 100644 --- a/mkdocs.yml +++ b/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 From 22e169d50f4e71723362b08b0fd91c4378faff81 Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Sun, 19 Jan 2025 15:08:31 +0900 Subject: [PATCH 5/6] Completed music player --- docs/javascripts/musicplayer.js | 82 +++++++++++++++++++-- docs/stylesheets/extra.css | 4 - docs/stylesheets/header.css | 17 ++++- overrides/.icons/svgrepo/music_pause.svg | 2 +- overrides/.icons/svgrepo/music_play.svg | 2 +- overrides/.icons/svgrepo/scroll.svg | 2 +- overrides/partials/content.html | 6 -- overrides/partials/headers/musicplayer.html | 8 +- 8 files changed, 101 insertions(+), 22 deletions(-) diff --git a/docs/javascripts/musicplayer.js b/docs/javascripts/musicplayer.js index 04605ddd0..f045f40c1 100644 --- a/docs/javascripts/musicplayer.js +++ b/docs/javascripts/musicplayer.js @@ -1,10 +1,80 @@ -const SC2 = SC; -console.log(SC2); - -function musicplayerOnLoad() { +function getSC() { var musicplayerElement = document.querySelector("iframe.soundcloud"); if (musicplayerElement == null) { - return; + return null; } - var widget = SC.Widget(musicplayerElement); + 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); diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index fc3f1783e..c2cfd7fcd 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -1,7 +1,3 @@ .md-source__repository .md-source__facts { display: none; } - -.md-container iframe.soundcloud { - visibility: hidden; -} diff --git a/docs/stylesheets/header.css b/docs/stylesheets/header.css index 24a00f43e..89089651c 100644 --- a/docs/stylesheets/header.css +++ b/docs/stylesheets/header.css @@ -21,7 +21,8 @@ header.md-header .music-player { display: flex; width: 2.2rem; height: 2.2rem; - float: inline-end; + float: inline-start; + fill: currentColor; svg { width: 1.1rem; @@ -31,7 +32,21 @@ header.md-header .music-player { } } +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; +} diff --git a/overrides/.icons/svgrepo/music_pause.svg b/overrides/.icons/svgrepo/music_pause.svg index 6a74023d8..e7a4fbea9 100644 --- a/overrides/.icons/svgrepo/music_pause.svg +++ b/overrides/.icons/svgrepo/music_pause.svg @@ -1,2 +1,2 @@ - + diff --git a/overrides/.icons/svgrepo/music_play.svg b/overrides/.icons/svgrepo/music_play.svg index aefee147e..6b361b3c9 100644 --- a/overrides/.icons/svgrepo/music_play.svg +++ b/overrides/.icons/svgrepo/music_play.svg @@ -1,2 +1,2 @@ - + diff --git a/overrides/.icons/svgrepo/scroll.svg b/overrides/.icons/svgrepo/scroll.svg index 063829d0b..b3efa10fd 100644 --- a/overrides/.icons/svgrepo/scroll.svg +++ b/overrides/.icons/svgrepo/scroll.svg @@ -1,2 +1,2 @@ - + diff --git a/overrides/partials/content.html b/overrides/partials/content.html index b406d8d6e..700e46465 100644 --- a/overrides/partials/content.html +++ b/overrides/partials/content.html @@ -26,9 +26,3 @@

{{ page.title | d(config.site_name, true)}}

{% include "partials/comments.html" %} - - -
- diff --git a/overrides/partials/headers/musicplayer.html b/overrides/partials/headers/musicplayer.html index 10b1a6d55..2628ff1be 100644 --- a/overrides/partials/headers/musicplayer.html +++ b/overrides/partials/headers/musicplayer.html @@ -1,3 +1,7 @@ -
- {% include ".icons/svgrepo/music_play.svg" %} +
+ From f74835fbe276961486856841d342792b08e2398e Mon Sep 17 00:00:00 2001 From: Minsung Kim Date: Sun, 19 Jan 2025 15:23:13 +0900 Subject: [PATCH 6/6] Added music player tab in architecture post --- docs/architecture.md | 8 ++++++++ overrides/partials/headers/musicplayer.html | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/architecture.md b/docs/architecture.md index c4c657b94..3517c9227 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -106,5 +106,13 @@ So I failed to make my billing completely zero, but I think this is still feasib --- +## 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). + +--- + I plan to add more stuffs whenever I need. If there is anything you wonder, please ask in comments. diff --git a/overrides/partials/headers/musicplayer.html b/overrides/partials/headers/musicplayer.html index 2628ff1be..c2566ea80 100644 --- a/overrides/partials/headers/musicplayer.html +++ b/overrides/partials/headers/musicplayer.html @@ -3,5 +3,5 @@