diff --git a/js/script.js b/js/script.js index 88373ee6..bd5419fb 100644 --- a/js/script.js +++ b/js/script.js @@ -11,11 +11,48 @@ const ap = new APlayer({ container: document.getElementById('aplayer'), fixed: true }); +//吼吼路由 +var router = new Navigo(null, true, '#!'); +router + .on({ + 'search/:keyword': function(params) { show_search(params.keyword) }, + 'search': function() { show_search() }, + 'album/:artist/:name/:album_artist': function(params) { show_album_songs(params.artist, params.name, params.album_artist) }, + 'album': function() { show_album() }, + 'folder/:dir': function(params) { show_folder(params.dir) }, + 'folder': function() { show_folder() }, + 'artist/:artist': function(params) { show_artist(params.artist) }, + 'artist': function() { show_artist() }, + 'composer/:composer': function(params) { show_composer(params.composer) }, + 'composer': function() { show_composer() }, + 'playlist/:playlistType/:playlistID': function(params) { show_playlist_songs(params.playlistType + '/' + params.playlistID) }, + 'playlist': function() { show_playlist() }, + 'random': function() { show_random() }, + 'now': function() { show_now() }, + 'lrc': function() { show_lrc() }, + 'settings': function() { show_settings() }, + '*': function() { show_home() } + }) + .resolve() +router + .hooks({ + before: function(done, params) { + $("#player").removeClass('hide') + done() + }, + after: function(params) { + $('#drawer a').removeClass('mdui-list-item-active') + $(`#drawer a[href="${$('#content').attr('data-page')}"]`).addClass('mdui-list-item-active') + } + }) + ap.on("play", async function() { //沒歌就隨機播放 - if (ap.list.audios.length == 0) play_random(); + if (ap.list.audios.length == 0) play_random().then(() => { + router.navigate('now'); + show_now() + }) updateMediaSession() - lrc.load(`[00:00.000]`) // 歌詞清空 }) ap.on("loadedmetadata", async function() { lrc.load(`[00:00.000]歌詞讀取中`) @@ -79,48 +116,14 @@ function updateMediaSession() { } // 初始化網頁 $(function() { - // 載入首頁 - show_home() - $('#content').attr('data-page', 'home') - - $('[data-link]').click(function() { - $('[data-link]').removeClass('mdui-list-item-active') - $(this).addClass('mdui-list-item-active') - $('#content').attr('data-page', $(this).attr('data-link')) - $("#player").removeClass('hide') - }) - + $(`#drawer a[href="${$('#content').attr('data-page')}"]`).addClass('mdui-list-item-active') if ($(window).width() < 1024) { - $('[data-link]').attr("mdui-drawer", "{target: '#drawer', swipe: true}") + $('#drawer a').attr("mdui-drawer", "{target: '#drawer', swipe: true}") mdui.mutation() } - - $('[data-link="home"]').click(function() { show_home() }) - $('[data-link="search"]').click(function() { show_search() }) - $('[data-link="album"]').click(function() { show_album() }) - $('[data-link="folder"]').click(function() { show_folder() }) - $('[data-link="artist"]').click(function() { show_artist() }) - $('[data-link="composer"]').click(function() { show_composer() }) - $('[data-link="playlist"]').click(function() { show_playlist() }) - $('[data-link="random"]').click(function() { show_random() }) - $('[data-link="now"]').click(function() { show_now() }) - $('[data-link="lrc"]').click(function() { show_lrc() }) - $('[data-link="settings"]').click(function() { show_settings() }) - $('#player>*:not(.ctrl)').click(function() { - show_now() + router.navigate('now') }); - //圖片讀取錯誤 - $("img").on('error', function() { tryRelogin() }).attr('src', "/img/PokaPlayer.png"); - //返回攔截 - /* window.history.pushState(null, null, "#"); - window.addEventListener("popstate", function(e) { - //show_album() - window.history.pushState(null, null, "#"); - mdui.snackbar({ - message: "點擊返回" - }); - })*/ // 初始化 MediaSession updateMediaSession() }); @@ -160,7 +163,8 @@ function secondToTime(second) { // 首頁 async function show_home() { - // 展示讀取中 + $('#content').attr('data-page', 'home') + // 展示讀取中 var header = HTML_getHeader("PokaPlayer") $("#content").html(header + HTML_getSpinner()) mdui.mutation() @@ -168,10 +172,13 @@ async function show_home() { var data = await getAPI("entry.cgi", "SYNO.AudioStation.Pin", "list", [{ key: "limit", "value": -1 }, { key: "offset", "value": 0 }]), album = HTML_showPins(data.data.items) $("#content").html(header + album) - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + $("#content>:not(#header-wrapper)") + router.updatePageLinks() } //- 搜尋 async function show_search(keyword) { + + $('#content').attr('data-page', 'search') var html = `
@@ -232,13 +239,15 @@ async function show_search(keyword) { mdui.mutation() //初始化 $('#search').change(async function() { - show_search($(this).val()) + $('#search+.mdui-textfield-error+.mdui-textfield-helper').text('搜尋中...') + router.navigate('search/' + $(this).val()) }); } //- 列出專輯 async function show_album() { // 展示讀取中 var header = HTML_getHeader("專輯") + $('#content').attr('data-page', 'album') $("#content").html(header + HTML_getSpinner()) mdui.mutation() var albums_albums = await getAPI("AudioStation/album.cgi", "SYNO.AudioStation.Album", "list", [ @@ -266,15 +275,18 @@ async function show_album() {
${recently}
` if ($("#content").attr('data-page') == 'album') { $("#content").html(header + tabs + html) - $("#content>:not(#header-wrapper):not(#recently-albums)").animateCss("fadeIn") + $("#content>:not(#header-wrapper):not(#recently-albums)") mdui.mutation() + router.updatePageLinks() } } //- 展示專輯歌曲 -async function show_album_songs(artist, album, album_artist) { +async function show_album_songs(a, b, c) { + var artist = a == '#' ? '' : a, + album = b == '#' ? '' : b, + album_artist = c == '#' ? '' : c + //如果從首頁按進去頁籤沒切換 - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="album"]').addClass('mdui-list-item-active') $("#content").attr('data-page', 'album') var albumInfo = `
@@ -302,7 +314,7 @@ async function show_album_songs(artist, album, album_artist) { ` // 展示讀取中 - $("#content").html(albumInfo + HTML_getSpinner()).animateCss("fadeIn") + $("#content").html(albumInfo + HTML_getSpinner()) mdui.mutation() //抓資料 @@ -310,20 +322,18 @@ async function show_album_songs(artist, album, album_artist) { html = HTML_showSongs(data.data.songs) if ($("#content").attr('data-page') == 'album') { $("#content").html(albumInfo + html) - $("#content>:not(.album-info):not(.mdui-divider)").animateCss("fadeIn") + $("#content>:not(.album-info):not(.mdui-divider)") } // 獲取總時間 var time = 0 for (i = 0; i < data.data.songs.length; i++) time += data.data.songs[i].additional.song_audio.duration - $("#content .album-info .time").html(`${data.data.songs.length} 首歌曲/${secondToTime(time)}`).animateCss("fadeIn") - $("#content .album-info .actions").html(actions).animateCss("fadeIn") + $("#content .album-info .time").html(`${data.data.songs.length} 首歌曲/${secondToTime(time)}`) + $("#content .album-info .actions").html(actions) } // 資料夾 async function show_folder(folder) { - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="folder"]').addClass('mdui-list-item-active') $("#content").attr('data-page', 'folder') // 展示讀取中 var header = HTML_getHeader("資料夾") @@ -344,13 +354,12 @@ async function show_folder(folder) { folderHTML = HTML_showFolder(data.data.items) if ($("#content").attr('data-page') == 'folder') { $("#content").html(header + folderHTML) - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + $("#content>:not(#header-wrapper)") + router.updatePageLinks() } } async function show_artist(artist) { var header = HTML_getHeader("演出者") - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="artist"]').addClass('mdui-list-item-active') $("#content").attr('data-page', 'artist') $("#content").html(header + HTML_getSpinner()) mdui.mutation() @@ -383,13 +392,13 @@ async function show_artist(artist) { if ($("#content").attr('data-page') == 'artist') $("#content").html(header + artistsHTML) } - if ($("#content").attr('data-page') == 'artist') - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + if ($("#content").attr('data-page') == 'artist') { + $("#content>:not(#header-wrapper)") + router.updatePageLinks() + } } async function show_composer(composer) { var header = HTML_getHeader("作曲者") - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="composer"]').addClass('mdui-list-item-active') $("#content").attr('data-page', 'composer') $("#content").html(header + HTML_getSpinner()) mdui.mutation() @@ -422,14 +431,17 @@ async function show_composer(composer) { if ($("#content").attr('data-page') == 'composer') $("#content").html(header + composersHTML) } - if ($("#content").attr('data-page') == 'composer') - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + if ($("#content").attr('data-page') == 'composer') { + $("#content>:not(#header-wrapper)") + router.updatePageLinks() + } } //- 播放清單 async function show_playlist() { // 展示讀取中 var header = HTML_getHeader("所有清單") $("#content").html(header + HTML_getSpinner()) + $('#content').attr('data-page', 'playlist') mdui.mutation() var playlist = await getAPI("AudioStation/playlist.cgi", "SYNO.AudioStation.Playlist", "list", [ { key: "limit", "value": 1000 }, @@ -442,13 +454,12 @@ async function show_playlist() { $("#content").html(header + `

沒有任何播放清單

`) } $("#content").html(header + HTML_showPlaylists(playlist.data.playlists)) + router.updatePageLinks() } } //- 播放清單歌曲 async function show_playlist_songs(id) { //如果從首頁按進去 - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="playlist"]').addClass('mdui-list-item-active') $("#content").attr('data-page', 'playlist') // 展示讀取中 @@ -471,7 +482,7 @@ async function show_playlist_songs(id) { var header = HTML_getHeader(name) if ($("#content").attr('data-page') == 'playlist') { $("#content").html(header + songs) - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + $("#content>:not(#header-wrapper)") } } //- 隨機播放 @@ -479,6 +490,7 @@ async function show_random() { // 展示讀取中 var header = HTML_getHeader("隨機播放") $("#content").html(header + HTML_getSpinner()) + $('#content').attr('data-page', 'random') mdui.mutation() var PARAMS_JSON = [ @@ -491,11 +503,11 @@ async function show_random() { album = HTML_showSongs(data.data.songs) if ($("#content").attr('data-page') == 'random') { $("#content").html(header + album) - $("#content>:not(#header-wrapper)").animateCss("fadeIn") + $("#content>:not(#header-wrapper)") } } async function play_random() { - show_now() + router.navigate('now') var PARAMS_JSON = [ { key: "additional", "value": "song_tag,song_audio,song_rating" }, { key: "library", "value": "shared" }, @@ -504,12 +516,10 @@ async function play_random() { ], data = await getAPI("AudioStation/song.cgi", "SYNO.AudioStation.Song", "list", PARAMS_JSON, 1) playSongs(data.data.songs, false, false) - show_now() } //- 現正播放 async function show_now() { - $('[data-link]').removeClass('mdui-list-item-active') - $('[data-link="now"]').addClass('mdui-list-item-active') + $('#content').attr('data-page', 'now') var html = `
    ` for (i = 0; i < ap.list.audios.length; i++) { let focus = ap.list.index == i ? 'mdui-list-item-active' : '', @@ -531,6 +541,7 @@ async function show_now() { } html += `
` + var nowPlaying = ap.list.audios[ap.list.index], name = nowPlaying ? nowPlaying.name : "PokaPlayer", artist = nowPlaying ? nowPlaying.artist || "未知的歌手" : "點擊播放鍵開始隨機播放", @@ -692,6 +703,7 @@ async function show_now() { //- 歌詞 function show_lrc() { $("#content").html(`
`) + $('#content').attr('data-page', 'lrc') // 歌詞 if (lrc.getLyrics()) { var html = `` @@ -725,7 +737,9 @@ function show_lrc() { } //- 設定 async function show_settings() { - ///給定預設值 + + $('#content').attr('data-page', 'settings') + ///給定預設值 if (!window.localStorage["musicRes"]) window.localStorage["musicRes"] = "wav" if (!window.localStorage["randomImg"]) window.localStorage["randomImg"] = "/og/og.png" /// @@ -868,8 +882,9 @@ async function show_settings() { $("#PP_bg input").change(function() { window.localStorage["randomImg"] = $(this).val() + $('#header-wrapper').attr("style", `background-image: url(${$(this).val()});`) mdui.snackbar({ - message: `隨機圖片已變更為 ${$(this).val()}，該變更並不會在此頁生效`, + message: `隨機圖片已變更為 ${$(this).val()}`, position: getSnackbarPosition(), timeout: 1500 }); @@ -878,9 +893,10 @@ async function show_settings() { let name = $(this).text() let src = $(this).attr('data-src') window.localStorage["randomImg"] = src + $('#header-wrapper').attr("style", `background-image: url(${src});`) $('#PP_bg input').val(src); mdui.snackbar({ - message: `隨機圖片已變更為 ${name}，該變更並不會在此頁生效`, + message: `隨機圖片已變更為 ${name}`, position: getSnackbarPosition(), timeout: 1500 }); @@ -946,7 +962,7 @@ async function show_settings() { // PokaPlayer 詳細資料 var getinfo = await axios.get('/info/'); var checkupdate = await axios.get(`https://api.github.com/repos/gnehs/PokaPlayer/releases`); - var update = getinfo.data.version != checkupdate.data[0].tag_name ? `新版本已發佈，請立即更新 更新` : `您的 PokaPlayer 已是最新版本` + var update = getinfo.data.version != checkupdate.data[0].tag_name ? `新版本 ${checkupdate.data[0].tag_name} 已發佈，請立即更新 更新` : `您的 PokaPlayer 已是最新版本` var about = `PokaPlayer 是 Synology Audio Ststion 的新朋友！ GitHub

版本 ${getinfo.data.version} / 開發者 ${getinfo.data.author} / ${update}

` $("#about").html(about) @@ -1086,31 +1102,4 @@ function getSnackbarPosition() { return "left-top" else return "left-bottom" -} -// animate css -$.fn.extend({ - animateCss: function(animationName, callback) { - var animationEnd = (function(el) { - var animations = { - animation: 'animationend', - OAnimation: 'oAnimationEnd', - MozAnimation: 'mozAnimationEnd', - WebkitAnimation: 'webkitAnimationEnd', - }; - - for (var t in animations) { - if (el.style[t] !== undefined) { - return animations[t]; - } - } - })(document.createElement('div')); - - this.addClass('animated ' + animationName).one(animationEnd, function() { - $(this).removeClass('animated ' + animationName); - - if (typeof callback === 'function') callback(); - }); - - return this; - }, -}); \ No newline at end of file +} \ No newline at end of file diff --git a/js/template.js b/js/template.js index 95e86c03..0feaff34 100644 --- a/js/template.js +++ b/js/template.js @@ -24,20 +24,21 @@ function HTML_showPins(items) { var img = getCover(type, pin.criteria.artist) var title = pin.name var subtitle = '演出者' - var onclickActions = `show_artist(\`${pin.criteria.artist}\`)` + var link = `artist/${encodeURIComponent(pin.criteria.artist)}` break; case "composer": //作曲者 var img = getCover(type, pin.criteria.composer) var title = pin.name var subtitle = '作曲者' - var onclickActions = `show_composer(\`${pin.criteria.composer}\`)` + var link = `composer/${encodeURIComponent(pin.criteria.composer)}` break; case "genre": //作曲者 var img = getCover(type, pin.criteria.genre) var title = pin.name var subtitle = '類型' + var link = '' var onclickActions = `mdui.snackbar({message: '沒打算做喔，不過資料都給了就給你看一下啦',timeout:500,position:'${getSnackbarPosition()}'});` break; case "folder": @@ -45,14 +46,14 @@ function HTML_showPins(items) { var img = getCover(type, pin.criteria.folder) var title = pin.name var subtitle = '資料夾' - var onclickActions = `show_folder(\`${pin.criteria.folder}\`)` + var link = `folder/${encodeURIComponent(pin.criteria.folder)}` break; case "playlist": //資料夾 var img = getBackground() var title = pin.name var subtitle = '播放清單' - var onclickActions = `show_playlist_songs(\`${pin.criteria.playlist}\`) ` + var link = `playlist/${encodeURIComponent(pin.criteria.playlist)} ` break; case "album": //專輯 @@ -63,14 +64,16 @@ function HTML_showPins(items) { var img = getCover("album", name, artist, album_artist) var title = name var subtitle = artist - var onclickActions = `show_album_songs(\`${artist}\`,\`${name}\`,\`${album_artist}\`)` + var link = `album/${artist?encodeURIComponent(artist):'#'}/${name?encodeURIComponent(name):'#'}/${album_artist?encodeURIComponent(album_artist):'#'}` break; } //await getAlbumSong(albumData.criteria.album, albumData.criteria.album_artist, albumData.criteria.artist) html += `
+ title="${title} ${subtitle}" + ${onclickActions?`onclick="${onclickActions}"`:''} + data-navigo>
@@ -110,7 +113,7 @@ function HTML_showFolder(items) { html += `
  • ${img} -
    +
    ${title}
    ${subtitle}
    ${filedetail}
    @@ -121,7 +124,7 @@ function HTML_showFolder(items) {
    • ` } else { - html += `
  • + html += `
  • ${icon}
    ${title}
    • ` @@ -148,9 +151,10 @@ function HTML_showAlbums(items) { //await getAlbumSong(albumData.criteria.album, albumData.criteria.album_artist, albumData.criteria.artist) album += `
    + title="${name}${artist ? ' ' + artist : ''}" + data-navigo>
    @@ -172,7 +176,7 @@ function HTML_showPlaylists(playlists) { let name = playlist.name let id = playlist.id html += ` -
  • +
  • playlist_play
    ${name} @@ -192,7 +196,7 @@ function HTML_showSongs(songs) { let artist = song.additional.song_tag.artist let album_artist = song.additional.song_tag.album_artist let album = song.additional.song_tag.album - let clickAction = `onclick="playSongs(songList,\`${song.id}\`);show_now()" ` + let clickAction = `onclick="playSongs(songList,\`${song.id}\`);router.navigate('now');" ` let addAction = `onclick="addSong(songList,'${song.id}')"` let img = window.localStorage["imgRes"] == "true" ? '' : @@ -228,7 +232,7 @@ function HTML_showArtist(artists) { let name = artist.name ? artist.name : "未知" let img = window.localStorage["imgRes"] == "true" ? '' : `
    ` html += ` -
  • +
  • ${img}
    ${name} @@ -246,7 +250,7 @@ function HTML_showComposer(composers) { let name = composer.name ? composer.name : "未知" let img = window.localStorage["imgRes"] == "true" ? '' : `
    ` html += ` -
  • +
  • ${img}
    ${name} diff --git a/package.json b/package.json index daa22de8..0bd76346 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pokaplayer", - "version": "0.5.5", + "version": "0.6.0", "description": "", "main": "index.js", "scripts": { diff --git a/views/index.pug b/views/index.pug index 807af4b6..8060e25c 100644 --- a/views/index.pug +++ b/views/index.pug @@ -5,7 +5,6 @@ html meta(name='viewport', content='width=device-width, initial-scale=1.0') link(href='//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.1/css/mdui.min.css',rel='stylesheet') link(href='/css/style.css',rel='stylesheet') - link(href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css',rel='stylesheet') script(src='//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.1/js/mdui.min.js') //-app meta(name="theme-color" content="#3f51b5") @@ -29,10 +28,10 @@ html #drawer.mdui-drawer.mdui-appbar-with-toolbar .mdui-list mixin link(name,link,icon) - a.mdui-list-item.mdui-ripple(href='javascript:void(0)',data-link=link)&attributes(attributes) + a.mdui-list-item.mdui-ripple(href=link,data-navigo)&attributes(attributes) i.mdui-list-item-icon.mdui-icon.material-icons=icon .mdui-list-item-content=name - +link("首頁","home","home")(class="mdui-list-item-active") + +link("首頁","home","home") +link("現正播放","now","play_circle_filled") +link("歌詞","lrc","subtitles") .mdui-subheader 音樂庫 @@ -67,6 +66,7 @@ html script(src='//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js') script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js') script(src='//cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js') + script(src='//unpkg.com/navigo@6') script(src='/js/lyrics.min.js') script(src='/js/base64.js') script(src='/js/template.js')