Merge pull request #72 from gnehs/dev

Dev

Dockerfile

@@ -14,6 +14,9 @@ RUN chmod +x start.sh
 # 環境設定
 ENV NODE_ENV=production
 EXPOSE 3000
+# 時區
+RUN apk add --no-cache tzdata
+ENV TZ=Asia/Taipei
 # 啟動
 CMD ["sh", "start.sh"]
 

index.js

@@ -9,7 +9,7 @@ const git = require('simple-git/promise')(__dirname);
 const express = require('express');
 const FileStore = require('session-file-store')(require('express-session')); // session
 const session = require('express-session')({
-    store: new FileStore(),
+    store: new FileStore({ "reapInterval": -1, "logFn": void(0) }),
     secret: config.PokaPlayer.sessionSecret,
     resave: false,
     saveUninitialized: true,
@@ -30,7 +30,7 @@ app.use('/pokaapi', require('./dataModule.js'));
 app.set('views', __dirname + '/views');
 app.set('view engine', 'pug')
 app.use(bodyParser.urlencoded({ extended: true }));
-app.use(helmet.hidePoweredBy({ setTo: 'PHP/5.2.1' }));
+app.use(helmet());
 app.use(session);
 io.use(sharedsession(session, {
     autoSave: true
@@ -66,7 +66,9 @@ app.use(express.static('public'))
 // 啟動囉
 server.listen(3000, () => {
     console.log("[PokaPlayer]  URL: http://localhost:3000")
-    console.log("[PokaPlayer] Time: " + moment().format("YYYY/MM/DD HH:mm:ss"))
+    console.log(`[PokaPlayer] Time: ${moment().format("YYYY/MM/DD HH:mm:ss")}`)
+    if (config.PokaPlayer.debug)
+        console.log("[PokaPlayer] Debug 模式已開啟")
 })
 
 // 隨機圖圖

package.json

@@ -1,6 +1,6 @@
 {
     "name": "pokaplayer",
-    "version": "0.11.7",
+    "version": "0.11.8",
     "description": "",
     "main": "index.js",
     "scripts": {
@@ -37,4 +37,4 @@
         "franc-min": "^4.0.0",
         "tcp-ping": "^0.1.1"
     }
-}
+}

public/css/style.css

@@ -607,7 +607,7 @@ header.mdui-appbar.mdui-appbar-fixed {
 }
 
 [data-player]>.mdui-card {
-    --main-size: 150px;
+    --main-size: calc(90vmin - 48px);
     width: var(--main-size);
     height: var(--main-size);
     background-size: cover;
@@ -648,7 +648,74 @@ header.mdui-appbar.mdui-appbar-fixed {
     height: 48px;
 }
 
+.songs .song {
+    transition: all .3s;
+    transform: scaleY(1);
+    transform-origin: top;
+}
+
+.songs .song.del {
+    transform: scaleY(0);
+    height: 0;
+    max-height: 0;
+    min-height: 0;
+}
+
+@media screen and (max-width: 554px) {
+    #content[data-page="now"] {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    [data-player]>.info .ctrl .lrc {
+        display: none
+    }
+    [data-player-container] {
+        transition: all .25s ease;
+    }
+    [data-player-container]>.mdui-list.songs.nosongs:after {
+        content: "無歌曲可供播放";
+        text-align: center;
+        display: block;
+        line-height: 3em;
+        font-size: 1.25em;
+        color: #838383;
+    }
+    [data-player-container]>.mdui-list.songs.nosongs {
+        top: auto;
+        max-height: 40vh;
+    }
+    [data-player-container]>.mdui-list.songs {
+        visibility: hidden;
+        max-height: calc(100vh - 200px);
+        overflow: hidden;
+        transition-duration: .3s;
+        background-color: white;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        z-index: 6001;
+        transform: translateY(calc(100vh - 200px * -1));
+        transform-origin: bottom;
+    }
+    [data-player-container]>.mdui-list.songs.show {
+        visibility: visible;
+        transform: translateY(0);
+        overflow: scroll;
+        border-radius: 5px 5px 0 0;
+    }
+    [data-player-container]>.mdui-list.songs.show+.mdui-overlay {
+        visibility: visible;
+        opacity: 1;
+        z-index: 6000;
+    }
+}
+
 @media screen and (min-width: 555px) {
+    [data-player]>.info .ctrl .playlist {
+        display: none
+    }
     [data-player] {
         margin-top: 32px;
         display: flex;

public/js/api.js

@@ -5,6 +5,7 @@ function getBackground() {
     else
         return "/og/og.png"
 }
+//- 請求
 async function request(url) {
     let result;
     try {

public/js/script.js

@@ -29,7 +29,7 @@ router
         'playlistFolder/:playlistID': params => showPlaylistFolder(params.playlistID),
         'playlist': showPlaylist,
         'random': showRandom,
-        'now': showNow,
+        'now*': showNow,
         'lrc': showLrc,
         'settings': showSettings,
         'settings/theme': showSettingsTheme,
@@ -799,7 +799,7 @@ async function playRandom() {
 async function showNow() {
     pokaHeader('', '', false, true)
     $('#content').attr('data-page', 'now')
-    let html = `<ul class="mdui-list songs">`
+    let html = `<ul class="mdui-list songs" id="/now/songlist">`
     for (i = 0; i < ap.list.audios.length; i++) {
         let focus = ap.list.index == i ? 'mdui-list-item-active' : '',
             title = ap.list.audios[i].name,
@@ -842,8 +842,9 @@ async function showNow() {
                 <button class="mdui-btn mdui-btn-icon mdui-ripple random"><i class="mdui-icon material-icons"></i></button>
                 <button class="mdui-btn mdui-btn-icon mdui-ripple" onclick="ap.skipBack()"><i class="mdui-icon material-icons">skip_previous</i></button>
                 <button class="mdui-btn mdui-btn-icon mdui-ripple mdui-color-theme-accent play" onclick="ap.toggle()"><i class="mdui-icon material-icons">play_arrow</i></button>
-                <button class="mdui-btn mdui-btn-icon mdui-ripple" onclick="ap.skipForward()"><i class="mdui-icon material-icons">skip_next</i></button>
-                <button class="mdui-btn mdui-btn-icon mdui-ripple" onclick="router.navigate('lrc')"><i class="mdui-icon material-icons">subtitles</i></button>
+                <button class="mdui-btn mdui-btn-icon mdui-ripple" onclick="ap.skipForward()"><i class="mdui-icon material-icons">skip_next</i></button> 
+                <button class="mdui-btn mdui-btn-icon mdui-ripple lrc" onclick="router.navigate('lrc')"><i class="mdui-icon material-icons">subtitles</i></button>
+                <a href="#/now/songlist" class="mdui-btn mdui-btn-icon mdui-ripple playlist"><i class="mdui-icon material-icons">playlist_play</i></a>
             </div>
             <div class="player-bar">
                 <label class="mdui-slider">
@@ -854,8 +855,9 @@ async function showNow() {
         </div>
     </div>`;
     // 輸出
-    $("#content").html(`<div data-player-container>${info + html}</div>`);
-    // 隱藏原本ㄉ播放器
+    $("#content").html(`<div data-player-container>${info + html}<a class="mdui-overlay"></a></div>`);
+    if (ap.list.audios.length == 0) $("[data-player-container]>.mdui-list.songs").addClass('nosongs')
+        // 隱藏原本ㄉ播放器
     $("#player").addClass('hide');
     // random＆loop
     $("[data-player]>.info>.ctrl>.random")
@@ -865,7 +867,26 @@ async function showNow() {
         .click(function() {
             $(this).html(`<i class="mdui-icon material-icons">${changePlayMode()}</i>`)
         })
-
+    $("[data-player]>.info>.ctrl>.playlist").click(function() {
+        router.pause();
+        window.location.hash = '#/now/songlist'
+        setTimeout(() => {
+            $('.mdui-list.songs').addClass('show')
+            $('.mdui-list.songs').scrollTop(72 * ap.list.index - 100)
+        }, 50)
+    })
+    $(`[data-player-container]>a.mdui-overlay`).click(function() {
+        $('.mdui-list.songs').removeClass('show')
+        router.resume();
+    })
+    window.addEventListener("hashchange", function(e) {
+        let r = /now\/songlist$/
+        if (!e.newURL.match(r)) {
+            console.log('resume')
+            $('.mdui-list.songs').removeClass('show')
+            router.resume();
+        }
+    }, false);
     //初始化滑塊
     mdui.mutation();
     // 確認播放鈕狀態
@@ -980,8 +1001,22 @@ async function showNow() {
     $(".songs [data-now-play-id].close").click(function() {
         let song = $(this).attr('data-now-play-id')
         if (song == ap.list.index) ap.skipForward()
-        ap.list.remove(song)
-        showNow()
+        $(this).parent().eq(0).addClass('del')
+        setTimeout(() => {
+            ap.list.remove(song)
+            $(this).parent().eq(0).remove()
+
+            //重新賦予 play-id
+            let songinfo = $(".mdui-list.songs>.song>.songinfo")
+            let del = $(".mdui-list.songs>.song>.close")
+            for (i = 0; i < songinfo.length; i++) {
+                $(songinfo[i]).attr('data-now-play-id', i)
+                $(del[i]).attr('data-now-play-id', i)
+            }
+        }, 301)
+
+
+
     })
 }
 //- 歌詞