Add internal event system

README-zh_CN.md

@@ -34,13 +34,25 @@
 | pause() | 暂停 |
 | next() | 下一首 |
 | previous() | 上一首 |
+| addEventListener(```name: string, handler: Function```) | 添加一个事件监听器 |
+| removeEventListener(```name: string, handler: Function```) | 移除一个事件监听器 |
 | volume: ```number``` | 音量。有效值在```0-1```之间 |
 | currentTime: ```number``` | 当前时间位置 |
 | duration: ```number``` | ```getter``` 歌曲时长 |
 | paused: ```boolean``` | ```getter``` 是否暂停 |
 | song: ```Song``` | 当前歌曲 |
 | playlist: ```Song[]``` | 歌单 |
 
+## 事件
+所有在此表格内声明的事件除特殊声明外都需要通过```PPlayer.addEventListener()```来监听。
+| 事件名称 | 描述 | 参数 |
+| ---------- | ----------- | --------- |
+| penguinready | 在```window.PPlayer```上下文可用时被触发。 **此事件在```window.addEventListener```中监听** | *无参数* |
+| setup | 在播放器开始准备时触发 | *无参数* |
+| initialized | 在播放器初始化完毕时触发 | *无参数* |
+| songchange | 在音乐改变时触发 | song: ```Song``` |
+| themecolorchange | 在主题颜色改变时触发 | color: ```Color```, palette: ```Color[]``` |
+
 ### 提示
 如果你正在查看预览页面，你可以通过在网址后面添加```?playlist=[你的歌单ID]```来使用你自己的歌单。
 

README.md

@@ -36,13 +36,25 @@ Every API of the player is exposed in ```PPlayer``` object of ```window``` conte
 | pause() | Pause |
 | next() | Next song |
 | previous() | Previous song |
+| addEventListener(```name: string, handler: Function```) | Add a event listener |
+| removeEventListener(```name: string, handler: Function```) | Remove a event listener |
 | volume: ```number``` | Volume. Valid values are between ```0-1``` |
 | currentTime: ```number``` | Current time position |
 | duration: ```number``` | ```getter``` Song duration |
 | paused: ```boolean``` | ```getter``` Is paused |
 | song: ```Song``` | Current song |
 | playlist: ```Song[]``` | Current playlist |
 
+## Events
+All events declared in this table needed to be listened by 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* |
+| 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[]``` |
+
 ### Note
 If you are visiting the demo page, you can use your own playlist by append ```?playlist=[YOUR PLAYLIST ID HERE]``` after the URL
 

package.json

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

src/typescript/controller.ts

@@ -3,7 +3,7 @@ import { container as el } from "./player";
 import { setSong as setMediaSession } from "./modules/mediaSession";
 import { getLyric } from "./lyric";
 import { progressSlider, resetRotate, setThemeColor, volumeSlider } from "./ui";
-import { dispatchEvent } from "./modules/event";
+import { addEventListener, dispatchEvent } from "./modules/event";
 import ajax from "./modules/ajax";
 
 export let songs: Song[] = [];
@@ -23,7 +23,7 @@ const playFailedHandler = () => {
 
 let audio: HTMLAudioElement;
 
-window.addEventListener("penguininitialized", () => {
+addEventListener("setup", () => {
     audio = (<HTMLAudioElement>el.querySelector(".penguin-player__audio"));
     audio.addEventListener("playing", () => errorAmount = 0);
     audio.addEventListener("error", playFailedHandler);
@@ -81,7 +81,7 @@ export function play(id?: number) {
             } else { playFailedHandler(); }
         }).catch(playFailedHandler);
         getLyric(song);
-        dispatchEvent("penguinsongchange", { detail: song });
+        dispatchEvent("songchange", song);
     } else { audio.play(); }
 }
 

src/typescript/global.d.ts

@@ -76,6 +76,8 @@ interface PenguinPlayerAPI {
     pause(): void
     next(): void
     previous(): void
+    addEventListener(name: string, handler: Function): void
+    removeEventListener(name: string, handler: Function): void
     readonly paused: boolean
     readonly song: Song
     readonly duration: number

src/typescript/lyric.ts

@@ -5,12 +5,13 @@ import { container as el } from "./player";
 
 import tickIcon from "../icons/tick.svg";
 import errorIcon from "../icons/error.svg";
+import { addEventListener } from "./modules/event";
 
 let audio: HTMLAudioElement, lrcInfos = {
     main: <any>{},
     sub: <any>{}
 };
-window.addEventListener("penguininitialized", () => {
+addEventListener("setup", () => {
     audio = <HTMLAudioElement>el.querySelector(".penguin-player__audio");
     [lrcInfos.main.el, lrcInfos.sub.el] = [
         <HTMLHeadingElement>el.querySelector(".penguin-player__lyric--line[line-name=main]"),

src/typescript/modules/event.ts

@@ -1,4 +1,26 @@
-export function dispatchEvent(name: string, detail?: object) {
+let events = {};
+
+export function addEventListener(name: string, handler: Function) {
+    events[name] = events[name]?.concat([handler]) || [handler];
+}
+
+export function removeEventListener(name: string, handler: Function) {
+    if (events[name] && events[name].indexOf(handler) != -1) {
+        events[name].splice(events[name].indexOf(handler), 1);
+    }
+}
+
+export function dispatchEvent(name: string, ...parameters: any) {
+    for (let handler of (events[name] || [])) {
+        try {
+            handler.apply(null, parameters);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+}
+
+export function dispatchWindowEvent(name: string, detail?: object) {
     let event: Event;
     if (typeof(Event) === "function") {
         event = detail == undefined ? new Event(name) : new CustomEvent(name, detail);

src/typescript/player.ts

@@ -21,7 +21,7 @@ import { setCircleProgress, setThemeColor, rotateToggle } from "./ui";
 import "../sass/player.sass";
 
 import template from "../template.pug";
-import { dispatchEvent } from "./modules/event";
+import { addEventListener, removeEventListener, dispatchEvent, dispatchWindowEvent } from "./modules/event";
 import ajax from "./modules/ajax";
 /// #if IE_SUPPORT
 import { schedule } from "./modules/task";
@@ -84,7 +84,7 @@ const colorthief = new ColorThief();
             player.classList.add("penguin-player__player-playlist");
         }
     });
-    window.addEventListener("penguininitialized", () => {
+    addEventListener("initialized", () => {
         // Volume setup
         setVolume(1);
         try {
@@ -94,6 +94,7 @@ const colorthief = new ColorThief();
             }
         } catch { print("Invalid volume storage"); }
     });
+    dispatchEvent("setup");
 }
 
 let lazyLoad: ILazyLoadInstance;
@@ -156,7 +157,7 @@ function initialize(list: any) {
         callback_loaded: onPlaylistSongLoaded
     });
     document.body.appendChild(el);
-    dispatchEvent("penguininitialized");
+    dispatchEvent("initialized");
     play(Math.floor(Math.random() * songs.length));
     print("Player ready");
 }
@@ -193,6 +194,8 @@ window.PPlayer = {
     initialize: (playlist) => {
         fetchPlaylist(playlist);
     }, play, pause, next, previous: prev,
+    addEventListener,
+    removeEventListener,
     get volume() {
         return (<HTMLAudioElement>el.querySelector(".penguin-player__audio")).volume;
     },
@@ -219,6 +222,8 @@ window.PPlayer = {
     }
 }
 
+dispatchWindowEvent("penguineventready");
+
 print("https://github.com/M4TEC/PenguinPlayer");
 print("Player loaded");
 if (typeof window.penguinplayer_id === "string") {

src/typescript/ui.ts

@@ -4,7 +4,7 @@ const StackBlur = require('stackblur-canvas');
 /// #endif
 
 import { findHighContrastColor } from "./modules/color";
-import { dispatchEvent } from "./modules/event";
+import { addEventListener, dispatchEvent } from "./modules/event";
 import { container as el } from "./player";
 import Slider from "./modules/slider";
 import { currentSong, getRealDuration, songs, trialInfo } from "./controller";
@@ -13,7 +13,7 @@ import { isBlurSupported } from "./modules/helper";
 export let volumeSlider: Slider;
 export let progressSlider: Slider;
 
-window.addEventListener("penguininitialized", () => {
+addEventListener("setup", () => {
     let audio: HTMLAudioElement = el.querySelector(".penguin-player__audio");
     // Progress bar setup
     let playerOldState: boolean;
@@ -105,7 +105,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("penguinthemecolorchange", { color, palette });
+    dispatchEvent("themecolorchange", { color, palette });
 }
 
 export function rotateToggle(rotate: boolean) {