Fix bugs, add a panel to demo page, expand API

README-zh_CN.md

@@ -19,6 +19,18 @@
 
 然后只需要将你刚刚下载的JavaScript文件引入到你的页面里！
 
+### 高级用法
+你可以用一个更复杂的方法来使用它。
+
+通过```window.PPlayer.initialize(options: PenguinPlayerOptions)```来初始化。
+
+下面的表格包含所有可用选项。
+| 属性 | 描述 |
+| ---- | ---- |
+| playlist: ```string``` | 播放列表ID |
+| overrideVolume?: ```number``` | 使用提供的音量而不使用默认或已保存的 |
+| overridePlaymode?: ```Playmodes``` | 使用提供的播放模式而不使用默认或已保存的 |
+
 ## 版本
 | 文件名 | 描述 |
 | ----- | ---- |
@@ -49,11 +61,11 @@
 所有在此表格内声明的事件除特殊声明外都需要通过```PPlayer.addEventListener()```来监听。
 | 事件名称 | 描述 | 参数 |
 | ---------- | ----------- | --------- |
-| penguinready | 在```window.PPlayer```上下文可用时被触发。 **此事件在```window.addEventListener```中监听** | *无参数* |
+| penguinplayerapiready | 在```window.PPlayer```上下文可用时被触发。 **此事件在```window.addEventListener```中监听** | *无参数* |
 | setup | 在播放器开始准备时触发 | *无参数* |
 | initialized | 在播放器初始化完毕时触发 | *无参数* |
 | songchange | 在音乐改变时触发 | song: ```Song``` |
-| themecolorchange | 在主题颜色改变时触发 | color: ```Color```, palette: ```Color[]``` |
+| themecolorchange | 在主题颜色改变时触发 | color: ```Color```, foregroundColor: ```Color```, whiteForgroundColor: ```Color```, palette: ```Color[]``` |
 
 ### 提示
 如果你正在查看预览页面，你可以通过在网址后面添加```?playlist=[你的歌单ID]```来使用你自己的歌单。

README.md

@@ -21,6 +21,18 @@ Or you can initialize it anytime later by calling ```window.PPlayer.initialize("
 
 Then just include the JavaScript file that you just downloaded inside your page!
 
+### Advanced usage
+You can use it with a more complex way.
+
+Initialize it with ```window.PPlayer.initialize(options: PenguinPlayerOptions)```.
+
+Following table contains all available options.
+| Property | Description |
+| -------- | ----------- |
+| playlist: ```string``` | Playlist ID |
+| overrideVolume?: ```number``` | Use provided volume instead using default or saved one |
+| overridePlaymode?: ```Playmodes``` | Use provided playmode instead using default or saved one |
+
 ## Versions
 | File Name | Description |
 | --------- | ----------- |
@@ -51,11 +63,11 @@ Every API of the player is exposed in ```PPlayer``` object of ```window``` conte
 All events declared in this table needed to be listened using ```PPlayer.addEventListener()``` unless there is a special note.
 | Event name | Description | Parameter |
 | ---------- | ----------- | --------- |
-| penguinready | Triggered when ```window.PPlayer``` context is ready. **This is triggered in ```window.addEventListener```** | *No parameter* |
+| penguinplayerapiready | Triggered when ```window.PPlayer``` context is ready. **This is triggered in ```window.addEventListener```** | *No parameter* |
 | setup | Triggered when the player starts setting up | *No parameter* |
 | initialized | Trigger when the player is initialized | *No parameter* |
 | songchange | Triggered when the song has changed | song: ```Song``` |
-| themecolorchange | Trigger when the theme color has changed | color: ```Color```, palette: ```Color[]``` |
+| themecolorchange | Trigger when the theme color has changed | color: ```Color```, foregroundColor: ```Color```, whiteForgroundColor: ```Color```, palette: ```Color[]``` |
 
 ### Note
 If you are visiting the demo page, you can use your own playlist by append ```?playlist=[YOUR PLAYLIST ID HERE]``` after the URL

demo/index.html

@@ -5,14 +5,55 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Penguin Player</title>
+    <style>
+        .control-panel {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(255, 255, 255, 0.5);
+            backdrop-filter: blur(5px);
+            padding: 10px;
+            border-radius: 6px;
+            box-shadow: 1px -1px 3px #000;
+
+        }
+        .control-panel > h1, .control-panel > p {
+            margin: 0;
+        }
+        .control-panel > h1 {
+            font-size: 24px;
+        }
+        @media only screen and (max-width: 700px) {
+            .control-panel {
+                left: 10px;
+            }
+        }
+    </style>
 </head>
 <body style="background: url(background.jpg) no-repeat;background-size: cover;background-attachment: fixed;">
+    <div class="control-panel">
+        <h1>Penguin Player Demo Page / 演示页</h1>
+        <p><a href="https://github.com/M4TEC/PenguinPlayer">GitHub repository / GitHub库</a></p>
+        <form method="get">
+            <input type="text" name="playlist" id="playlist" placeholder="Playlist ID / 歌单ID">
+            <button type="submit">Use this / 使用此ID</button>
+        </form>
+    </div>
     <script>
         window.penguinplayer_id = "2717890285";
         var match = location.href.match(/playlist=([0-9]+)/);
         if (match != null) {
             window.penguinplayer_id = match[1];
+            document.querySelector("#playlist").value = window.penguinplayer_id;
         }
+        window.addEventListener("penguinplayerapiready", () => {
+            window.PPlayer.addEventListener("themecolorchange", (color, foreground) => {
+                console.log("color changed");
+                var el = document.querySelector(".control-panel");
+                el.style.backgroundColor = "rgba(" + color.join(", ") + ", 0.5)";
+                el.style.color = "rgb(" + foreground.join(", ") + ")";
+            });
+        });
     </script>
     <script src="dist/player.js" onerror="var s = document.createElement('script');s.src = '../dist/player.js';document.body.appendChild(s);this.parentNode.removeChild(this);"></script>
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4tec/penguinplayer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A simple player based on Netease Cloud Music",
   "main": "dist/player.js",
   "scripts": {

src/typescript/controller.ts

@@ -1,5 +1,5 @@
 import { formatTime, print } from "./modules/helper";
-import { container as el } from "./player";
+import { container as el, playerOptions } from "./player";
 import { setSong as setMediaSession } from "./modules/mediaSession";
 import { getLyric } from "./lyric";
 import { progressSlider, resetRotate, setThemeColor, volumeSlider } from "./ui";
@@ -53,10 +53,14 @@ addEventListener("setup", () => {
     playmodeEl.addEventListener("click", () => {
         mode(Object.values(Playmodes).includes(playmode + 1) ? playmode + 1 : 0);
     });
-    if (localStorage.getItem("penguinplayer_playmode") !== null && !isNaN(parseInt(localStorage.getItem("penguinplayer_playmode")))) {
-        mode(parseInt(localStorage.getItem("penguinplayer_playmode")));
-    }
-    updatePlaymodeButton();
+    addEventListener("initialized", () => {
+        if (Object.values(Playmodes).includes(playerOptions.overridePlaymode)) {
+            mode(playerOptions.overridePlaymode);
+        } else if (localStorage.getItem("penguinplayer_playmode") !== null && !isNaN(parseInt(localStorage.getItem("penguinplayer_playmode")))) {
+            mode(parseInt(localStorage.getItem("penguinplayer_playmode")));
+        }
+        updatePlaymodeButton();
+    });
 });
 
 function handleEnded() {

src/typescript/global.d.ts

@@ -86,15 +86,8 @@ interface PenguinPlayerAPI {
     readonly playlist: Song[]
 }
 
-declare enum Playmodes {
-    List,
-    ListLoop,
-    SingleLoop,
-    Random
-}
-
 interface PenguinPlayerOptions {
     playlist: string
     overrideVolume?: number
-    overridePlaymode?: Playmodes
+    overridePlaymode?: import("./controller").Playmodes
 }

src/typescript/modules/event.ts

@@ -2,6 +2,7 @@ let events = {};
 
 export function addEventListener(name: string, handler: Function) {
     events[name] = events[name]?.concat([handler]) || [handler];
+    console.log("handler added", events);
 }
 
 export function removeEventListener(name: string, handler: Function) {
@@ -11,6 +12,7 @@ export function removeEventListener(name: string, handler: Function) {
 }
 
 export function dispatchEvent(name: string, ...parameters: any) {
+    console.log("event fired", name);
     for (let handler of (events[name] || [])) {
         try {
             handler.apply(null, parameters);

src/typescript/player.ts

@@ -186,7 +186,7 @@ window.PPlayer = {
     }
 }
 
-dispatchWindowEvent("penguineventready");
+dispatchWindowEvent("penguinplayerapiready");
 
 print("https://github.com/M4TEC/PenguinPlayer");
 print("Player loaded");

src/typescript/ui.ts

@@ -110,7 +110,7 @@ export function setThemeColor(color: Color, palette: Color[]) {
     el.querySelectorAll(".penguin-player__player--progress-inner, .penguin-player__player--progress-dot, .penguin-player__player--controls-volume-inner, .penguin-player__player--controls-volume-dot").forEach((el) => {
         (<HTMLDivElement>el).style.backgroundColor = foregroundRgb;
     });
-    dispatchEvent("themecolorchange", { color, palette });
+    dispatchEvent("themecolorchange", color, findHighContrastColor(color, palette), findHighContrastColor([255, 255, 255], palette), findHighContrastColor([0, 0, 0], palette), palette);
 }
 
 export function rotateToggle(rotate: boolean) {