Improve IE support, new playlist style

README-zh_CN.md

@@ -10,6 +10,12 @@
 
 一个基于网易云音乐的简易播放器，而且它仅仅是**一个**JavaScript文件！
 
+## 亮点
+- 移动/触控设备支持
+- Internet Explorer 10+支持
+- 简洁，好看还好用
+- 使用简单
+
 ## 用法
 首先，下载[最新版本](https://github.com/M4TEC/PenguinPlayer/releases/latest/download/player.js)的播放器。
 

README.md

@@ -12,6 +12,12 @@
 
 A simple player based on Netease Cloud Music, and it only needs to load ONE JavaScript file!
 
+## Features
+- Mobile / touch support
+- Internet Explorer 10+ support
+- Simple, beautiful & powerful
+- Easy to use
+
 ## Usage
 First, download the [latest release](https://github.com/M4TEC/PenguinPlayer/releases/latest) of the player from Releases.
 

demo/index.html

@@ -67,8 +67,8 @@ <h1>Penguin Player Demo Page / 演示页</h1>
             window.penguinplayer_id = match[1];
             document.querySelector("#playlist").value = window.penguinplayer_id;
         }
-        window.addEventListener("penguinplayerapiready", () => {
-            window.PPlayer.addEventListener("themecolorchange", (color, foreground) => {
+        window.addEventListener("penguinplayerapiready", function() {
+            window.PPlayer.addEventListener("themecolorchange", function(color, foreground) {
                 var el = document.querySelector(".control-panel");
                 el.style.backgroundColor = "rgba(" + color.join(", ") + ", 0.5)";
                 el.style.color = "rgb(" + foreground.join(", ") + ")";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4tec/penguinplayer",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A simple player based on Netease Cloud Music",
   "main": "dist/player.js",
   "scripts": {
@@ -35,6 +35,7 @@
     "css-loader": "^5.1.0",
     "html-loader": "^2.1.1",
     "ifdef-loader": "^2.1.5",
+    "intersection-observer": "^0.12.0",
     "jpeg-js": "^0.4.3",
     "postcss-loader": "^5.0.0",
     "postcss-preset-env": "^6.7.0",

src/sass/player.sass

@@ -244,11 +244,14 @@
             .penguin-player__player--playlist-song
                 position: relative
                 height: 36px
-                padding-left: 40px
+                padding: 5px
+                padding-left: 45px
                 cursor: pointer
+                transition: transform .1s ease-in-out
                 .penguin-player__player--playlist-thumbnail
                     position: absolute
-                    left: 0
+                    left: 5px
+                    border-radius: 50%
                 .penguin-player__player--playlist-title, .penguin-player__player--playlist-artists
                     white-space: nowrap
                     overflow: hidden
@@ -259,23 +262,11 @@
                     font-size: 16px
                 .penguin-player__player--playlist-artists
                     font-size: 12px
-                &::after
-                    content: ''
-                    display: block
-                    position: absolute
-                    top: 0
-                    right: 0
-                    bottom: 0
-                    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent)
-                    width: 0
-                    transition: width .3s linear
-                    z-index: 2
-                    pointer-events: none
-                &:hover::after
-                    width: 30%
+                &:hover
+                    transform: translate(5px)
         &.penguin-player__player-full, &:hover
             min-width: 300px
-            width: #{variables.$expand-width}
+            width: variables.$expand-width
             &+.penguin-player__lyric
                 padding-left: calc(20px + min(calc(100vw - 20px), max(#{variables.$expand-width}, 300px)))
         &.penguin-player__player-full

src/typescript/modules/polyfill.ts

@@ -1,6 +1,8 @@
 // Polyfills for Internet Explorer
 import "core-js/features/promise";
 import "core-js/features/number/is-integer";
+import "core-js/features/object/values";
+import "core-js/features/array/includes";
 
 if (!Element.prototype.matches) {
     Element.prototype.matches =
@@ -29,4 +31,7 @@ import 'core-js/es/map';
 import 'core-js/es/set';
 import 'core-js/es/weak-map';
 import 'core-js/es/array/from';
-import 'core-js/es/object/assign';
+import 'core-js/es/object/assign';
+
+// Required by Lazy Load
+import 'intersection-observer';

src/typescript/modules/task.ts

@@ -1,6 +1,4 @@
-let running = 0;
-
-let waiting = [];
+let running = 0, waiting = [];
 
 function runTask(func: () => void, delay: number) {
     setTimeout(() => {

src/typescript/ui.ts

@@ -8,9 +8,9 @@ import { findHighContrastColor } from "./modules/color";
 import { addEventListener, dispatchEvent } from "./modules/event";
 import { colorthief, container as el } from "./player";
 import Slider from "./modules/slider";
-import { currentSong, getRealDuration, play, songs, trialInfo } from "./controller";
-import { isBlurSupported } from "./modules/helper";
+import { currentSong, play, songs, trialInfo } from "./controller";
 /// #if IE_SUPPORT
+import { isBlurSupported } from "./modules/helper";
 import { schedule } from "./modules/task";
 /// #endif
 
@@ -40,7 +40,7 @@ export function setThemeColor(color: Color, palette: Color[]) {
         let img = new Image(window.innerWidth / 4, window.innerHeight / 2);
         img.crossOrigin = "anonymous";
         img.src = songs[currentSong].thumbnail + `?param=${img.width}y${img.height}`;
-        img.addEventListener("load", () => StackBlur.image(img, <HTMLCanvasElement>el.querySelector(".penguin-player__player--canvas-background"), 30));
+        img.addEventListener("load", () => StackBlur.image(img, el.querySelector(".penguin-player__player--canvas-background"), 30));
     }
     /// #endif
     let foregroundRgb = `rgb(${findHighContrastColor(color, palette).join(", ")})`;
@@ -79,10 +79,11 @@ export function resetRotate() {
 export function handlePlaylist(list: Song[]) {
     let playlist: HTMLElement = el.querySelector(".penguin-player__player--playlist");
     playlist = playlist.querySelector(".scroll-content") || playlist;
-    for (let i = 0;i<songs.length;i++) { playlist.appendChild(createSongElement(songs[i], () => {play(i);})); }
+    for (let i = 0;i<list.length;i++) { playlist.appendChild(createSongElement(list[i], () => {play(i);})); }
     lazyLoad = new LazyLoad({
         container: playlist,
         elements_selector: ".penguin-player--lazy",
+        unobserve_entered: true,
         callback_loaded: onPlaylistSongLoaded
     });
 }
@@ -111,9 +112,9 @@ function createSongElement(song: Song, click: () => void): HTMLElement {
 
 function onPlaylistSongLoaded(el: HTMLElement) {
     /// #if IE_SUPPORT
-    schedule(() => {
+    ((<any>window.document).documentMode ? schedule : (func: Function) => func())(() => {
     /// #endif
-        try{
+        try {
             let color = colorthief.getColor(el), palette = colorthief.getPalette(el);
             let song = <HTMLElement>el.parentNode;
             song.style.backgroundColor = `rgba(${color.join(", ")}, 0.6)`;