Remove axios, shrinking file size

Author: YUCLing

README-zh_CN.md

@@ -4,11 +4,17 @@
 一个基于网易云音乐的简易播放器，而且它仅仅是**一个**JavaScript文件！
 
 ## 用法
-首先，下载[最新版本](https://github.com/M4TEC/PenguinPlayer/releases/latest/download/player.js)的```player.js```。
+首先，下载[最新版本](https://github.com/M4TEC/PenguinPlayer/releases/latest/download/player.js)的播放器。
 
 现在，在```window```上下文中设置```penguin_id```来使用你的歌单，比如```window.penguin_id = "440401494"```.
 
-然后只需要将```player.js```引入到你的页面里！
+然后只需要将你刚刚下载的JavaScript文件引入到你的页面里！
+
+## 版本
+| 文件名 | 描述 |
+| ----- | ---- |
+| player.js | ```推荐``` 这个版本能在现代浏览器中使用 |
+| player.ie.js | 一个包含为```Internet Explorer```准备的兼容代码的版本，如果你使用IE请使用本版本 |
 
 ### 提示
 如果你正在查看预览页面，你可以通过在网址后面添加```?playlist=[你的歌单ID]```来使用你自己的歌单。

README.md

@@ -6,11 +6,17 @@
 A simple player based on Netease Cloud Music, and it only needs to load ONE JavaScript file!
 
 ## Usage
-First, download the [latest release](https://github.com/M4TEC/PenguinPlayer/releases/latest/download/player.js) of ```player.js``` from Releases.
+First, download the [latest release](https://github.com/M4TEC/PenguinPlayer/releases/latest) of the player from Releases.
 
 Now, set your playlist ID by setting ```penguin_id``` in ```window``` context, for example ```window.penguin_id = "440401494"```.
 
-Then just include ```player.js``` inside your page!
+Then just include the JavaScript file that you just downloaded inside your page!
+
+## Versions
+| File Name | Description |
+| --------- | ----------- |
+| player.js | ```Recommend``` This version will work in modern browsers |
+| player.ie.js | A version that contains polyfills for ```Internet Explorer```, use this if you want to support it |
 
 ### 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-lock.json

@@ -4,7 +4,7 @@
   "description": "A simple player based on Netease Cloud Music",
   "main": "dist/player.js",
   "scripts": {
-    "build": "webpack --env production",
+    "build": "webpack --mode=production --env production",
     "watch": "webpack --watch",
     "watch-ie": "webpack --watch --env ie",
     "build-dev": "webpack"
@@ -29,7 +29,6 @@
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.13.5",
     "@babel/preset-typescript": "^7.13.0",
-    "axios": "^0.21.1",
     "babel-loader": "^8.2.2",
     "colorthief": "^2.3.2",
     "core-js": "^3.9.1",
@@ -51,6 +50,7 @@
     "svgo-loader": "^2.2.1",
     "vanilla-lazyload": "^17.3.1",
     "webpack": "^5.24.2",
+    "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.5.0"
   },
   "dependencies": {}

package.json

@@ -3,14 +3,13 @@ import { container as el } from "./player";
 import { setSong as setMediaSession } from "./mediaSession";
 import { getLyric } from "./lyric";
 import { resetRotate, setThemeColor, volumeSlider } from "./ui";
-
-import axios, { CancelTokenSource } from "axios";
-import { dispatchEvent } from "./event";
+import { dispatchEvent } from "./modules/event";
+import ajax from "./modules/ajax";
 
 export let songs: Array<Song> = [];
 export let currentSong: number;
 
-let errorAmount = 0, currentUrlToken: CancelTokenSource;
+let errorAmount = 0, currentUrlReq: AjaxPromise;
 
 const playFailedHandler = () => {
     errorAmount++;
@@ -42,9 +41,8 @@ export function play(id?: number) {
         let song = songs[id];
         setThemeColor([255, 255, 255], [[0, 0, 0]]);
         setMediaSession(song);
-        if (currentUrlToken) { currentUrlToken.cancel("Song changed"); }
-        currentUrlToken = axios.CancelToken.source();
-        axios.get(`https://gcm.tenmahw.com/song/url?id=${song.id}`, { cancelToken: currentUrlToken.token }).then((result) => {
+        if (currentUrlReq) { currentUrlReq.cancel(); }
+        currentUrlReq = ajax(`https://gcm.tenmahw.com/song/url?id=${song.id}`).send().then((result) => {
             if (result.data.code == 200) {
                 let track = result.data.data[0];
                 if (track.url == null) {
@@ -55,7 +53,7 @@ export function play(id?: number) {
                     audio.play();
                 }
             } else { playFailedHandler(); }
-        }).catch((err) => !axios.isCancel(err) ? playFailedHandler() : null );
+        }).catch(playFailedHandler);
         getLyric(song);
         resetRotate();
         dispatchEvent("penguinsongchange", { detail: song });

src/typescript/controller.ts

@@ -45,4 +45,18 @@ interface SliderOptions {
 interface ThemeColorChangeEvent {
     color: Color
     palette: Color[]
+}
+
+interface AjaxPromise extends Promise<AjaxResponse> {
+    method(method: "GET" | "POST"): AjaxPromise
+    url(url: string): AjaxPromise
+    send(): AjaxPromise
+    cancel(): AjaxPromise
+    then(callback: any): AjaxPromise
+    catch(callback: any): AjaxPromise
+    finally(callback: any): AjaxPromise
+}
+interface AjaxResponse {
+    code: number
+    data: any
 }

src/typescript/global.d.ts

@@ -1,6 +1,6 @@
-import axios, { CancelTokenSource } from "axios";
 import { songs, currentSong } from "./controller";
 import { print } from "./helper";
+import ajax from "./modules/ajax";
 import { container as el } from "./player";
 
 let audio: HTMLAudioElement, mainEl: HTMLHeadingElement, subEl: HTMLHeadingElement;
@@ -14,9 +14,9 @@ window.addEventListener("penguininitialized", () => {
     });
 });
 
-let axiosToken: CancelTokenSource, retryTimeout: number;
+let lyricReq: AjaxPromise, retryTimeout: any;
 
-let lrc: Array<LyricLine>, tLrc: Array<LyricLine>, lrcOffset = 0, tLrcOffset = 0, lastMain: string, lastSub: string, lrcTimeout: number, subLrcTimeout: number;
+let lrc: Array<LyricLine>, tLrc: Array<LyricLine>, lrcOffset = 0, tLrcOffset = 0, lastMain: string, lastSub: string, lrcTimeout: any, subLrcTimeout: any;
 
 function findLrcPos(lrc: Array<LyricLine>, time: number, offset = 0): number {
     for (let i = offset;i < lrc.length;i++) {
@@ -63,19 +63,16 @@ export function getLyric(song: Song) {
     lrc = tLrc = null;
     lrcOffset = tLrcOffset = 0;
     clearTimeout(retryTimeout);
-    if (axiosToken) {axiosToken.cancel("Fetch new lyric");}
-    axiosToken = axios.CancelToken.source();
-    axios.get(`https://gcm.tenmahw.com/resolve/lyric?id=${song.id}`, { cancelToken: axiosToken.token }).then((result) => {
+    if (lyricReq) { lyricReq.cancel(); }
+    lyricReq = ajax(`https://gcm.tenmahw.com/resolve/lyric?id=${song.id}`).then((result) => {
         if (result.data.lyric == null) {
             print(`No lyric for ${songs[currentSong].name}`);
         } else {
             lrc = result.data.lyric.lrc;
             tLrc = result.data.lyric.tlrc;
         }
-    }).catch((err) => {
-        if (!axios.isCancel(err)) {
-            print("Cannot fetch lyric");
-            retryTimeout = setTimeout(getLyric, 5000, song);
-        }
+    }).catch(() => {
+        print("Cannot fetch lyric");
+        retryTimeout = setTimeout(getLyric, 5000, song);
     });
 }