diff --git a/webapp/alpha/index.html b/webapp/alpha/index.html index 58d3e32..75f2346 100644 --- a/webapp/alpha/index.html +++ b/webapp/alpha/index.html @@ -36,8 +36,14 @@ + + + + + + + - @@ -126,6 +132,9 @@ Servers +
+ Navigation +
Admin Panel @@ -207,7 +216,7 @@
-
+
@@ -256,12 +265,13 @@
Now Playing
- + +
  • +
    • +     +
    @@ -283,6 +293,8 @@ + + \ No newline at end of file diff --git a/webapp/alpha/m.js b/webapp/alpha/m.js index 4756faf..0cdb7b1 100644 --- a/webapp/alpha/m.js +++ b/webapp/alpha/m.js @@ -37,7 +37,7 @@ function renderAlbum(id, artist, name, albumArtFile, year) { } function renderFileWithMetadataHtml(filepath, lokiId, metadata) { - return `
    + return `
    @@ -55,8 +55,8 @@ function renderFileWithMetadataHtml(filepath, lokiId, metadata) { } function createMusicFileHtml(fileLocation, title, aa, rating, subtitle) { - return `
  • -
    + return `
  • +
    ${aa ? `` : ''}
    ${subtitle ? `` : ''} @@ -76,7 +76,7 @@ function createMusicFileHtml(fileLocation, title, aa, rating, subtitle) { } function renderDirHtml(name) { - return `
  • + return `
  • ${name} @@ -93,7 +93,7 @@ function renderDirHtml(name) { } function createFileplaylistHtml(dataDirectory) { - return `
  • + return `
  • ${dataDirectory} @@ -171,8 +171,8 @@ async function senddir(root) { try { const response = await MSTREAMAPI.dirparser(directoryString); - if(response.path.length > 1) { - fileExplorerArray.push(response.path.replace('/', '')); + if(root === true && response.path.length > 1) { + fileExplorerArray.push(response.path.replaceAll('/', '')); programState.push({ state: 'fileExplorer', previousScroll: 0, @@ -235,6 +235,17 @@ if (typeof(Storage) !== "undefined" && localStorage.getItem("token")) { MSTREAMAPI.currentServer.token = localStorage.getItem("token"); } +function handleDirClick(el){ + fileExplorerArray.push(el.getAttribute('data-directory')); + programState.push({ + state: 'fileExplorer', + previousScroll: document.getElementById('filelist').scrollTop, + previousSearch: '' + // previousSearch: document.getElementById('search_folders').value + }); + senddir(); +} + loadFileExplorer(); function boilerplateFailure(err) { @@ -250,4 +261,28 @@ function boilerplateFailure(err) { position: 'topCenter', timeout: 3500 }); -} \ No newline at end of file +} + +function onFileClick(el) { + VUEPLAYERCORE.addSongWizard(el.getAttribute("data-file_location"), {}, true); +} + +async function recursiveAddDir(el) { + try { + const directoryString = getDirectoryString2(el); + const res = await MSTREAMAPI.recursiveScan(directoryString); + addAllSongs(res); + } catch(err) { + boilerplateFailure(err); + } +} + +function addAllSongs(res) { + for (var i = 0; i < res.length; i++) { + VUEPLAYERCORE.addSongWizard(res[i], {}, true); + } +} + +function playNow(el) { + VUEPLAYERCORE.addSongWizard(el.getAttribute("data-file_location"), {}, true, MSTREAMPLAYER.positionCache.val + 1); +} diff --git a/webapp/alpha/spa.css b/webapp/alpha/spa.css index e4654e2..bb9be8c 100644 --- a/webapp/alpha/spa.css +++ b/webapp/alpha/spa.css @@ -38,7 +38,12 @@ body { } .progress { - padding-top: 10px + padding-top: 10px; + background-color: #CCC !important; +} + +.determinate { + background-color: #fa832b !important; } #media-player-button-bar { @@ -306,11 +311,16 @@ body { cursor: pointer; } +/* Note: maybe move things below this line elsewhere */ + .collection-item { /* background-color: #22272e !important; */ background-color: #2d333b !important; border-bottom: 1px solid #444c56 !important; color: #FFF; + + padding: 0 !important; + position: relative; } .collection { @@ -383,7 +393,7 @@ body { } .playing { - background-color: #E6EBFA !important; + background-color: #4a463e !important; } .aa-card { @@ -453,6 +463,10 @@ body { bottom: auto !important; } +#mstream-player { + max-width: 1800px; +} + #mstream-player svg { fill:#FFF; color: #FFF; @@ -462,20 +476,82 @@ body { display: flex; } -.dirz, .filez { +.dirz, .filez, .playlist-item { width: 100%; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 10px; + padding-right: 10px; + cursor: pointer; } .song-button-box{ position: absolute; right: 0; + z-index: 9999; + top: 0; } -.clear { - clear: both; } - -.clear:after { - content: ""; - display: block; - clear: both; +.folder-image{ + height: 20px; + margin-right: 5px; +} + +.music-image{ + min-height: 20px; + min-width: 20px; + margin-right: 5px; +} + +.item-text { + vertical-align: top; +} + +.songDropdown:hover, .downloadPlaylistSong:hover, .recursiveAddDir:hover, .addFileplaylist:hover { + background-color: #9E9E9E; +} + +.songDropdown, .downloadPlaylistSong, .recursiveAddDir, .addFileplaylist { + height: 14px; + background-color: #B5B5B5; + float: right; + text-align: center; + font-size: 12px; + font-family: "Arial Black", Gadget, sans-serif; + padding-left: 3px; + padding-right: 3px; + cursor: pointer; +} + +.songDropdown { + min-width: 38px !important; +} + +.popperMenu:hover, .downloadDir:hover, .downloadFileplaylist:hover, .fileAddToPlaylist:hover { + background-color: #9E9E9E; +} + +.popperMenu, .downloadDir, .downloadFileplaylist, .fileAddToPlaylist { + min-width: 28px !important; + height: 14px; + background-color: #B5B5B5; + float: right; + text-align: center; + font-size: 12px; + font-family: "Arial Black", Gadget, sans-serif; + border-bottom-left-radius: 3px; + padding-left: 3px; + padding-right: 3px; + border-right: 1px solid #9E9E9E; + cursor: pointer; +} + +.song-button-box svg { + vertical-align: text-top !important; +} + +.drag-handle{ + cursor: move; + float: left; + padding-right: 6px; } diff --git a/webapp/alpha/vp.js b/webapp/alpha/vp.js index dd82f8a..9080d53 100644 --- a/webapp/alpha/vp.js +++ b/webapp/alpha/vp.js @@ -1,6 +1,159 @@ const VUEPLAYERCORE = (() => { const mstreamModule = {}; + new Vue({ + el: '#playlist', + data: { + playlist: MSTREAMPLAYER.playlist, + // playlists: mstreamModule.playlists, + // showClear: showClearLink + }, + methods: { + checkMove: function (event) { + }, + clearRating: function () { + }, + }, + }); + + // Template for playlist items + Vue.component('playlist-item', { + template: ` +
  • +
    + + + + {{ comtext }} +
    +
    • `, + + props: ['index', 'song'], + + // We need the positionCache to track the currently playing song + data: function () { + return { + positionCache: MSTREAMPLAYER.positionCache + } + }, + + // Methods used by playlist item events + methods: { + goToSong: function (event) { + MSTREAMPLAYER.goToSongAtPosition(this.index); + }, + removeSong: function (event) { + MSTREAMPLAYER.removeSongAtPosition(this.index, false); + }, + downloadSong: function (event) { + // document.getElementById("download-file").href = "/media/" + this.song.filepath + "?token=" + MSTREAMAPI.currentServer.token; + // document.getElementById('download-file').click(); + }, + createPopper: function (event) { + // if (currentPopperSongIndex === this.index) { + // currentPopperSongIndex = false; + // document.getElementById("pop").style.visibility = "hidden"; + // return; + // } + // var ref = event.target; + // currentPopperSongIndex = this.index; + // currentPopperSongIndex2 = this.index; + + // currentPopperSong = this.song; + + // showClearLink.val = false; + // if (typeof MSTREAMPLAYER.playlist[currentPopperSongIndex2].metadata.rating === 'number'){ + // showClearLink.val = true + // } + + // myRater.setRating(this.song.metadata.rating / 2); + + // const pop = document.getElementById('pop'); + // Popper.createPopper(ref, pop, { + // placement: 'bottom-end', + // onFirstUpdate: function (data) { + // document.getElementById("pop").style.visibility = "visible"; + // }, + // modifiers: [ + // { + // name: 'flip', + // options: { + // boundariesElement: 'scrollParent', + // }, + // }, + // { + // name: 'preventOverflow', + // options: { + // boundariesElement: 'scrollParent', + // }, + // }, + // ] + // }); + }, + createPopper2: function (event) { + // if (cpsi === this.index) { + // cpsi = false; + // document.getElementById("pop-d").style.visibility = "hidden"; + // return; + // } + // var ref = event.target; + // cpsi = this.index; + + // cps = this.song; + + // const pop = document.getElementById('pop-d'); + // Popper.createPopper(ref, pop, { + // placement: 'bottom-end', + // onFirstUpdate: function (data) { + // document.getElementById("pop-d").style.visibility = "visible"; + // }, + // modifiers: [ + // { + // name: 'flip', + // options: { + // boundariesElement: 'scrollParent', + // }, + // }, + // { + // name: 'preventOverflow', + // options: { + // boundariesElement: 'scrollParent', + // }, + // }, + // ] + // }); + }, + }, + computed: { + comtext: function () { + let returnThis = this.song.filepath.split('/').pop(); + + if (this.song.metadata.title) { + returnThis = this.song.metadata.title; + if (this.song.metadata.artist) { + returnThis = this.song.metadata.artist + ' - ' + returnThis; + } + } + + return returnThis; + }, + songError: function () { + return this.song.error; + }, + ratingNumber: function () { + if (!this.song.metadata.rating) { + return ''; + } + var returnThis = this.song.metadata.rating / 2; + if (!Number.isInteger(returnThis)) { + returnThis = returnThis.toFixed(1); + } + + return returnThis; + } + } + }); + new Vue({ el: '#mstream-player', data: { @@ -94,50 +247,6 @@ const VUEPLAYERCORE = (() => { } }); - Vue.component('playlist-item', { - // We need the positionCache to track the currently playing song - data: function () { - return { - positionCache: MSTREAMPLAYER.positionCache, - } - }, - template: ` -
  • -
    {{ comtext }}
    - - - -
    • `, - props: ['index', 'song'], - methods: { - goToSong: function () { - MSTREAMPLAYER.goToSongAtPosition(this.index); - }, - // removeSong: function (event) { - // MSTREAMPLAYER.removeSongAtPosition(this.index, false); - // }, - downloadSong: function () { - const link = document.createElement("a"); - link.download = ''; - link.href = this.song.url; - link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window})); - } - }, - computed: { - comtext: function () { - let returnThis = this.song.metadata.title ? this.song.metadata.title : this.song.filepath.split('/').pop(); - if (this.song.metadata.artist) { - returnThis = this.song.metadata.artist + ' - ' + returnThis; - } - - return returnThis; - }, - songError: function () { - return this.song.error; - } - } - }); - // Change spacebar behavior to Play/Pause window.addEventListener("keydown", (event) => { // Use default behavior if user is in a form @@ -155,5 +264,55 @@ const VUEPLAYERCORE = (() => { } }, false); + mstreamModule.transcodeOptions = { + serverEnabled: false, + frontendEnabled: false, + bitrate: '128k', + codec: 'mp3' + }; + + mstreamModule.addSongWizard = async (filepath, metadata, lookupMetadata, position) => { + // Escape filepath + var rawFilepath = filepath; + filepath = filepath.replace(/\%/g, "%25"); + filepath = filepath.replace(/\#/g, "%23"); + if (filepath.charAt(0) === '/') { + filepath = filepath.substr(1); + } + + var defaultPathString = 'media/'; + if (mstreamModule.transcodeOptions.serverEnabled && mstreamModule.transcodeOptions.frontendEnabled) { + defaultPathString = 'transcode/'; + } + + var url = '../' + MSTREAMAPI.currentServer.host + defaultPathString + filepath; + if (MSTREAMAPI.currentServer.token) { + url = url + '?token=' + MSTREAMAPI.currentServer.token; + } + + const newSong = { + url: url, + rawFilePath: rawFilepath, + filepath: filepath, + metadata: metadata + }; + + if (position) { + MSTREAMPLAYER.insertSongAt(newSong, position, true); + } else { + MSTREAMPLAYER.addSong(newSong); + } + + // perform lookup + if (lookupMetadata === true) { + const response = await MSTREAMAPI.lookupMetadata(rawFilepath); + + if (response.metadata) { + newSong.metadata = response.metadata; + MSTREAMPLAYER.resetCurrentMetadata(); + } + } + }; + return mstreamModule; })() diff --git a/webapp/index.html b/webapp/index.html index e9b8fdc..3beb66c 100644 --- a/webapp/index.html +++ b/webapp/index.html @@ -53,7 +53,6 @@ -