Improve IE support, modify lyric style

src/sass/ie.sass

@@ -1,2 +1,9 @@
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
-    // Styles for Internet Explorer should be in here
+.penguin-player__player.penguin-player__player-no-css-blur
+    background: none!important
+    .penguin-player__player--background
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        z-index: -1

src/sass/player.sass

@@ -261,7 +261,7 @@
             min-width: 300px
             width: #{variables.$expand-width}
             &+.penguin-player__lyric
-                margin-left: calc(20px + min(calc(100vw - 20px), max(#{variables.$expand-width}, 300px)))
+                padding-left: calc(20px + min(calc(100vw - 20px), max(#{variables.$expand-width}, 300px)))
         &.penguin-player__player-full
             border-radius: variables.$thumbnail-size / 2
             height: variables.$thumbnail-size + 8px + 92px
@@ -282,13 +282,13 @@
         position: fixed
         left: 0
         right: 0
-        bottom: 10px
+        bottom: 0
+        padding: 10px
         pointer-events: none
         opacity: 0
-        transition: opacity .1s linear, margin-left .2s ease-in-out, bottom .2s ease-in-out
+        transition: opacity .1s linear, padding-left .2s ease-in-out, bottom .2s ease-in-out
         margin-left: 0
-        z-index: 4
-        > *
+        > *:not(.penguin-player__lyric--background)
             overflow: hidden
             white-space: nowrap
             text-overflow: ellipsis
@@ -300,12 +300,25 @@
             font-size: 22px
         .penguin-player__lyric--sub
             font-size: 16px
+        .penguin-player__lyric--background
+            position: fixed
+            left: 0
+            right: 0
+            bottom: -10px
+            height: 60px
+            transition: bottom .2s ease-in-out
+            background: linear-gradient(to top, black, transparent)
+            z-index: -1
+        &.penguin-player__lyric-hover .penguin-player__lyric--background
+            bottom: 0
 @media only screen and (max-width: 700px)
     .penguin-player__player
         &.penguin-player__player-full, &.penguin-player__player-playlist, &:hover
             width: calc(100vw - 20px)!important
             &+.penguin-player__lyric
-                margin-left: 0!important
+                padding-left: 0!important
+                .penguin-player__lyric--background
+                    bottom: -60px!important
         &:hover
             &+.penguin-player__lyric
                 bottom: variables.$thumbnail-size + 8px + 20px
@@ -314,4 +327,7 @@
                 bottom: variables.$thumbnail-size + 8px + 92px + 20px
         &.penguin-player__player-playlist
             &+.penguin-player__lyric
-                bottom: calc(#{variables.$thumbnail-size + 8px + 92px + 20px} + #{variables.$playlist-height})
+                bottom: calc(#{variables.$thumbnail-size + 8px + 92px + 20px} + #{variables.$playlist-height})
+    .penguin-player__lyric
+        > *
+            text-align: right!important

src/template.pug

@@ -42,4 +42,6 @@ audio.penguin-player__audio
     .penguin-player__player--playlist(role="list")
 .penguin-player__lyric
     h1.penguin-player__lyric--main
-    h2.penguin-player__lyric--sub
+    h2.penguin-player__lyric--sub
+    .penguin-player__lyric--background
+        //-.penguin-player__lyric--expand-button(role="button")

src/typescript/controller.ts

@@ -6,7 +6,7 @@ import { progressSlider, resetRotate, setThemeColor, volumeSlider } from "./ui";
 import { dispatchEvent } from "./modules/event";
 import ajax from "./modules/ajax";
 
-export let songs: Array<Song> = [];
+export let songs: Song[] = [];
 export let currentSong: number;
 
 let errorAmount = 0, currentUrlReq: AjaxPromise;

src/typescript/global.d.ts

@@ -24,7 +24,7 @@ interface MediaMetadataOptions {
     title: string
     artist: string
     album: string
-    artwork: Array<Artwork>
+    artwork: Artwork[]
 }
 interface TrialInfo {
     start: number

src/typescript/helper.ts

@@ -1,3 +1,7 @@
+/// #if IE_SUPPORT
+const Modernizr = require("../javascript/modernizr");
+/// #endif
+
 export function getOffsetLeft(element: HTMLElement): number {
     let left=0;
     while(element) {
@@ -23,4 +27,10 @@ export function deepEventHandler(element: HTMLElement, ...args: any[]) {
     [].forEach.call(element.childNodes, (child: ChildNode) => {
         deepEventHandler(<HTMLElement>child, ...args);
     });
-}
+}
+
+/// #if IE_SUPPORT
+export function isBlurSupported() {
+    return Modernizr.testAllProps("backdropFilter", "blur(5px)");
+}
+/// #endif

src/typescript/lyric.ts

@@ -16,9 +16,9 @@ window.addEventListener("penguininitialized", () => {
 
 let lyricReq: AjaxPromise, retryTimeout: any;
 
-let lrc: Array<LyricLine>, tLrc: Array<LyricLine>, lrcOffset = 0, tLrcOffset = 0, lastMain: string, lastSub: string, lrcTimeout: any, subLrcTimeout: any;
+let lrc: LyricLine[], tLrc: LyricLine[], lrcOffset = 0, tLrcOffset = 0, lastMain: string, lastSub: string, lrcTimeout: any, subLrcTimeout: any;
 
-function findLrcPos(lrc: Array<LyricLine>, time: number, offset = 0): number {
+function findLrcPos(lrc: LyricLine[], time: number, offset = 0): number {
     if (!lrc) {return;}
     for (let i = offset;i < lrc.length;i++) {
         if (lrc[i + 1] == null || lrc[i + 1].time > time * 1000) {

src/typescript/modules/color.ts

@@ -21,7 +21,7 @@ export function isBright(color: Color): boolean {
     return ((color[0] * 299) + (color[1] * 587) + (color[2] * 114)) / 1000 >= 125;
 }
 
-export function findHighContrastColor(background: Color, colors: Array<Color>): Color {
+export function findHighContrastColor(background: Color, colors: Color[]): Color {
     let contrasts = [];
     for (let color of colors) {
         contrasts.push(contrast(background, color));

src/typescript/modules/cookie.ts

@@ -29,7 +29,7 @@ export default {
     hasItem: function (sKey: string): boolean {
         return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
     },
-    keys: function (): Array<string> {
+    keys: function (): string[] {
         var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
         for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
         return aKeys;

src/typescript/player.ts

@@ -133,7 +133,7 @@ function initialize(list: any) {
     lazyLoad = new LazyLoad({
         container: playlist,
         elements_selector: ".penguin-player--lazy",
-        callback_loaded: onPlaylistSongLoaded
+        callback_loaded: onPlaylistSongLoaded // TODO: Fix performance problem when lazy load is not working
     });
     document.body.appendChild(el);
     dispatchEvent("penguininitialized");
@@ -180,7 +180,7 @@ function updatePlayPauseButton() {
     get song(): Song {
         return songs[currentSong];
     },
-    get playlist(): Array<Song> {
+    get playlist(): Song[] {
         return songs;
     }
 }

src/typescript/ui.ts

@@ -1,23 +1,18 @@
 import Scrollbar from "smooth-scrollbar";
-/// #if IE_SUPPORT
-const StackBlur = require("stackblur-canvas");
-/// #endif
 
 import { findHighContrastColor } from "./modules/color";
 import cookie from "./modules/cookie";
 import { dispatchEvent } from "./modules/event";
 import { container as el } from "./player";
 import Slider from "./modules/slider";
 import { currentSong, getRealDuration, songs, trialInfo } from "./controller";
+import { isBlurSupported } from "./helper";
 
 export let volumeSlider: Slider;
 export let progressSlider: Slider;
 
 window.addEventListener("penguininitialized", () => {
     let audio: HTMLAudioElement = el.querySelector(".penguin-player__audio");
-    /// #if IE_SUPPORT
-
-    /// #endif
     // Progress bar setup
     let playerOldState: boolean;
     progressSlider = new Slider({
@@ -51,6 +46,14 @@ window.addEventListener("penguininitialized", () => {
         audio.volume = value;
         cookie.setItem("penguin_volume", value, Infinity);
     });
+    // Lyric overlay setup
+    window.addEventListener("mousemove", (e) => {
+        if (e.pageY >= window.innerHeight - 60) {
+            el.querySelector(".penguin-player__lyric").classList.add("penguin-player__lyric-hover");
+        } else {
+            el.querySelector(".penguin-player__lyric").classList.remove("penguin-player__lyric-hover");
+        }
+    });
     Scrollbar.init(el.querySelector(".penguin-player__player--playlist"), { damping: 0.15 });
 });
 
@@ -69,8 +72,11 @@ export function setCircleProgress(progress: number) {
     }
 }
 
-export function setThemeColor(color: Color, palette: Array<Color>) {
+export function setThemeColor(color: Color, palette: Color[]) {
     let backgroundRgba = `rgba(${color.join(", ")}, 0.5)`;
+    /// #if IE_SUPPORT
+    backgroundRgba = `rgba(${color.join(", ")}, ${isBlurSupported() ? 0.5 : 0.8})`; // Increase opacity if blur is not supported
+    /// #endif
     let foregroundRgb = `rgb(${findHighContrastColor(color, palette).join(", ")})`;
     let player: HTMLDivElement = el.querySelector(".penguin-player__player");
     player.style.backgroundColor = backgroundRgba;

webpack.config.js

@@ -64,7 +64,7 @@ module.exports = env => {
             filename: "[name].js"
         },
         externals: {
-            "./polyfills": "undefined"
+            "./polyfills": "''"
         },
         plugins,
         optimization: mode === "production" ? optimization : undefined,