Merge pull request #27 from gnehs/dev

Dev

README.md

@@ -39,7 +39,7 @@ PokaPlayer 是 Synology Audio Ststion 的新朋友！
 -   主題切換
 -   MediaSession
 
-<img src="https://i.imgur.com/x4cEjrx.png" width="500px">
+<img src="https://user-images.githubusercontent.com/16719720/44306459-de655a80-a3c1-11e8-94ec-adc51f971b98.png" width="500px">
 
 ## 備註
 

css/style.css

@@ -1,3 +1,46 @@
+/* scrollbar fix for Windows */
+
+body {
+    overflow-y: scroll
+}
+
+body::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background: transparent;
+}
+
+@media (min-width: 1024px) {
+    body::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+}
+
+body::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, .2);
+}
+
+body.mdui-theme-layout-dark::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background: transparent;
+}
+
+@media (min-width: 1024px) {
+    body.mdui-theme-layout-dark::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+}
+
+body.mdui-theme-layout-dark::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, .3);
+}
+
+
+/* Product Sans */
+
 #header-wrapper,
 #drawer,
 [data-page="settings"],
@@ -461,8 +504,8 @@ header.mdui-appbar.mdui-appbar-fixed {
         flex-grow: 1;
         display: block;
         min-height: 55px;
-        padding-top: 55px;
-        padding-bottom: 55px;
+        padding-top: 10%;
+        padding-bottom: 10%;
         position: relative;
         mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
         -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
@@ -576,7 +619,7 @@ header.mdui-appbar.mdui-appbar-fixed {
 }
 
 #content>[data-lrc]>[data-lrc="inner"] {
-    padding: 30vh 0;
+    padding: 10vh 0;
 }
 
 #content>[data-lrc] p {

js/script.js

@@ -1,3 +1,10 @@
+// 初始化播放器
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    fixed: true
+});
+// 初始化歌詞解析
+const lrc = new Lyrics(`[00:00.000]`);
 // 路由
 const router = new Navigo(null, true, '#!');
 router
@@ -38,6 +45,9 @@ router
 
 // 初始化網頁
 $(() => {
+    // 在進入網頁時嘗試登入
+    tryRelogin()
+
     // 離線提示
     var offlineDialog = new mdui.Dialog("#offline", { history: false });
     Offline.options = {
@@ -65,16 +75,10 @@ $(() => {
 });
 // 宣告全域變數
 songList = [];
-const lrc = new Lyrics(`[00:00.000]`);
 const socket = io();
 socket.on("hello", () => {
     socket.emit('login')
 });
-// 初始化播放器
-const ap = new APlayer({
-    container: document.getElementById('aplayer'),
-    fixed: true
-});
 ap.on("play", async() => {
     //沒歌就隨機播放
     if (ap.list.audios.length == 0) playRandom().then(() => {
@@ -107,7 +111,7 @@ function setLrc(lrcResult) {
     if (lrcResult) {
         lrc.load(lrcResult);
     } else
-        lrc.load(`[00:00.000]無歌詞\n[00:00.001]`)
+        lrc.load(`[00:00.000]無歌詞`)
     if ($("div[data-lrc]").length > 0) {
         let html = ``
         for (i = 0; i < lrc.getLyrics().length; i++) {
@@ -152,17 +156,21 @@ function updateMediaSession() {
 var loginFailureCount = 0
 
 function tryRelogin() {
-    if (window.localStorage["userPASS"] || loginFailureCount <= 10) { //如果有存到密碼或是嘗試次數少於 10 次就嘗試登入
+    //如果有存到密碼或是嘗試次數少於 10 次就嘗試登入
+    if (window.localStorage["userPASS"] || loginFailureCount <= 10) {
+        console.log("[Login] 正在嘗試登入")
         $.post("/login/", { userPASS: window.localStorage["userPASS"] }, data => {
             if (data == 'success') {
+                console.log("[Login] 登入成功")
                 loginFailureCount = 0
-                    //mdui.snackbar({ message: 'Session 過期，重新登入成功', timeout: 1000 });
             } else {
+                console.error("[Login] 登入失敗")
                 mdui.snackbar({ message: 'Session 過期，請重新登入', timeout: 1000, position: getSnackbarPosition() });
                 document.location.href = "/login/";
             }
         });
     } else if (loginFailureCount > 10) {
+        console.log("[Login] 登入失敗超過十次，已放棄")
         mdui.snackbar({ message: '發生了未知錯誤', timeout: 1000, position: getSnackbarPosition() });
     }
 }

js/setting.js

@@ -20,7 +20,6 @@ $(async() => {
         navigator.serviceWorker
             .register('/sw.js', { scope: '/' })
             .then(reg => {
-                console.log("Service Worker Registered", reg)
                 if (version != window.localStorage["PokaPlayerVersion"]) {
                     reg.update()
                 }
@@ -268,18 +267,6 @@ async function showSettingsAbout() {
     // DSM 詳細資料
     let getDSMInfo = await getAPI("AudioStation/info.cgi", "SYNO.AudioStation.Info", "getinfo", [], 4)
     $("[data-as-version] .mdui-list-item-text").text(getDSMInfo.data.version_string?getDSMInfo.data.version_string:"未知")
-
-    // PokaPlayer 詳細資料
-    let getInfo = await axios.get('/info/');
-    $("[data-dev] .mdui-list-item-text").text(getInfo.data.author)
-    let debug = await axios.get('/debug/')
-    let checkUpdate = await axios.get(`https://api.github.com/repos/gnehs/PokaPlayer/releases`);
-    let update = getInfo.data.version != checkUpdate.data[0].tag_name ? `更新到 ${checkUpdate.data[0].tag_name}` : debug.data == false ? `您的 PokaPlayer 已是最新版本` : `與開發分支同步`
-    $("[data-upgrade] .mdui-list-item-text").text(update)
-    if (getInfo.data.version != checkUpdate.data[0].tag_name || debug.data)
-        $("[data-upgrade]").attr('data-upgrade', true)
-    if (debug.data)
-        $("[data-version] .mdui-list-item-text").text(`${window.localStorage["PokaPlayerVersion"]}(${debug.data})`)
     //重啟
     $("[data-restart]").click(() => {
         mdui.confirm('注意：若您未開啟 Docker 的自動重啟功能，您必須手動開啟 PokaPlayer', '確定要重新啟動嗎', 
@@ -293,6 +280,17 @@ async function showSettingsAbout() {
         mdui.confirm('確定要清除嗎', '', 
             function(){ caches.delete('PokaPlayer');},'',{history: false})
     })
+    // PokaPlayer 詳細資料
+    let getInfo = await axios.get('/info/');
+    $("[data-dev] .mdui-list-item-text").text(getInfo.data.author)
+    let debug = await axios.get('/debug/')
+    let checkUpdate = await axios.get(`https://api.github.com/repos/gnehs/PokaPlayer/releases`);
+    let update = getInfo.data.version != checkUpdate.data[0].tag_name ? `更新到 ${checkUpdate.data[0].tag_name}` : debug.data == false ? `您的 PokaPlayer 已是最新版本` : `與開發分支同步`
+    $("[data-upgrade] .mdui-list-item-text").text(update)
+    if (getInfo.data.version != checkUpdate.data[0].tag_name || debug.data)
+        $("[data-upgrade]").attr('data-upgrade', true)
+    if (debug.data)
+        $("[data-version] .mdui-list-item-text").text(`${window.localStorage["PokaPlayerVersion"]}(${debug.data})`)
     //更新
     $("[data-upgrade=\"true\"]").click(() => {
         mdui.dialog({

js/sw.js

@@ -1,6 +1,5 @@
 // install
 self.addEventListener('install', event => {
-    console.log('Service Worker Installing…');
     // 如果監聽到了 service worker 已經安裝成功的話，就會調用 event.waitUntil 回調函數
     event.waitUntil(
         // 安裝成功後操作 CacheStorage 快取，使用之前需要先通過 caches.open() 打開對應快取空間。
@@ -26,15 +25,11 @@ self.addEventListener('install', event => {
     );
 });
 
-// activate
-self.addEventListener('activate', event => {
-    console.log('Now ready to handle fetches!');
-});
 
 
 self.addEventListener('fetch', function(event) {
     //console.log(event.request)
-    if (event.request.destination != "audio" && event.request.method == "GET" && !event.request.url.match(/socket.io|meting|info|ping/))
+    if (event.request.destination != "audio" && event.request.method == "GET" && !event.request.url.match(/socket.io|meting|info|ping|github/))
         event.respondWith(
             caches.match(event.request).then(function(response) {
                 // 擷取 HTTP 請求