From ff3363d3ed2e80e5e4a9f077ca7457f72cc8891f Mon Sep 17 00:00:00 2001 From: LuoRain Date: Sat, 27 Mar 2021 08:57:16 +0800 Subject: [PATCH] Improve IE support, new playlist style --- README-zh_CN.md | 6 ++++++ README.md | 6 ++++++ demo/index.html | 4 ++-- package-lock.json | 8 +++++++- package.json | 3 ++- src/sass/player.sass | 25 ++++++++----------------- src/typescript/modules/polyfill.ts | 7 ++++++- src/typescript/modules/task.ts | 4 +--- src/typescript/ui.ts | 13 +++++++------ 9 files changed, 45 insertions(+), 31 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 60fcec0..4d81450 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -10,6 +10,12 @@ 一个基于网易云音乐的简易播放器，而且它仅仅是**一个**JavaScript文件！ +## 亮点 +- 移动/触控设备支持 +- Internet Explorer 10+支持 +- 简洁，好看还好用 +- 使用简单 + ## 用法 首先，下载[最新版本](https://github.com/M4TEC/PenguinPlayer/releases/latest/download/player.js)的播放器。 diff --git a/README.md b/README.md index 7eb3d48..b69b0a3 100644 --- a/README.md +++ b/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. diff --git a/demo/index.html b/demo/index.html index 01e71b2..10e113d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -67,8 +67,8 @@

Penguin Player Demo Page / 演示页

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(", ") + ")"; diff --git a/package-lock.json b/package-lock.json index dde4cf1..b16bb41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@m4tec/penguinplayer", - "version": "1.0.3", + "version": "1.2.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2911,6 +2911,12 @@ "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", "dev": true }, + "intersection-observer": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.0.tgz", + "integrity": "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==", + "dev": true + }, "iota-array": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz", diff --git a/package.json b/package.json index 10cecc3..781a049 100644 --- a/package.json +++ b/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", diff --git a/src/sass/player.sass b/src/sass/player.sass index 4e09f12..51a67a9 100644 --- a/src/sass/player.sass +++ b/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 diff --git a/src/typescript/modules/polyfill.ts b/src/typescript/modules/polyfill.ts index e066897..550075e 100644 --- a/src/typescript/modules/polyfill.ts +++ b/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'; \ No newline at end of file +import 'core-js/es/object/assign'; + +// Required by Lazy Load +import 'intersection-observer'; \ No newline at end of file diff --git a/src/typescript/modules/task.ts b/src/typescript/modules/task.ts index 0e153a9..d0d0dee 100644 --- a/src/typescript/modules/task.ts +++ b/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(() => { diff --git a/src/typescript/ui.ts b/src/typescript/ui.ts index 764378f..7774777 100644 --- a/src/typescript/ui.ts +++ b/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, 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 {play(i);})); } + for (let i = 0;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(() => { + ((window.document).documentMode ? schedule : (func: Function) => func())(() => { /// #endif - try{ + try { let color = colorthief.getColor(el), palette = colorthief.getPalette(el); let song = el.parentNode; song.style.backgroundColor = `rgba(${color.join(", ")}, 0.6)`;