mirrors/mStream
3
0
Fork 0
mirror of https://github.com/IrosTheBeggar/mStream.git synced 2025-10-27 07:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout options

Browse Source
This commit is contained in:
IrosTheBeggar 2021-12-23 14:11:34 -05:00
parent 8515570709
commit 580565ae1c
5 changed files with 116 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/scrobbler.js
View File

@ -19,8 +19,8 @@ exports.setup = (mstream) => {
mstream.post('/api/v1/lastfm/scrobble-by-metadata', (req, res) => {
const schema = Joi.object({
artist: Joi.string().required(),
album: Joi.string().required(),
artist: Joi.string().optional(),
album: Joi.string().optional(),
track: Joi.string().required(),
});
joiValidate(schema, req.body);

12
webapp/alpha/m.js
View File

@ -1516,7 +1516,7 @@ function setupLayoutPanel() {
<div>
<div class="switch">
<label>
<input type="checkbox">
<input onchange="tglBookCtrls(this);" type="checkbox">
<span class="lever"></span>
Audio Book Controls
</label>
@ -1532,7 +1532,7 @@ function setupLayoutPanel() {
<br> -->
<div class="switch">
<label>
<input type="checkbox">
<input onchange="tglMoveMetadata(this);" type="checkbox">
<span class="lever"></span>
Metadata in Queue
</label>
@ -1567,6 +1567,14 @@ function setupLayoutPanel() {
document.getElementById('filelist').innerHTML = newHtml;
}
function tglMoveMetadata() {
VUEPLAYERCORE.altLayout.moveMeta = !VUEPLAYERCORE.altLayout.moveMeta;
}
function tglBookCtrls() {
VUEPLAYERCORE.altLayout.audioBookCtrls = !VUEPLAYERCORE.altLayout.audioBookCtrls;
}
function flipPlayer() {
document.getElementById('content').style.flexDirection = 'column-reverse'
}

27
webapp/alpha/spa.css
View File

@ -664,7 +664,7 @@ body {
.header-tab{
z-index: 1000;
display: flow-root;
display: flex;
}
.grow {
@ -921,6 +921,27 @@ svg {
select {
background-color: #2d333b !important;
color: #FFF;
cursor: pointer;
color: #FFF;
cursor: pointer;
}
.custom-card-img img {
max-height: 140px;
}
.card-mod {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.card-mod .card-content {
padding: 6px !important;
}
.card-meta {
padding-left: 12px;
}
.flex-end {
justify-content: flex-end;
}

39
webapp/alpha/vp.js
View File

@ -1,6 +1,11 @@
const VUEPLAYERCORE = (() => {
const mstreamModule = {};
mstreamModule.altLayout = {
'moveMeta': false,
'audioBookCtrls': false
};
const replayGainPreGainSettings = [
-15.0,
-10.0,
@ -42,9 +47,30 @@ const VUEPLAYERCORE = (() => {
data: {
playlist: MSTREAMPLAYER.playlist,
playlists: mstreamModule.playlists,
showClear: showClearLink
showClear: showClearLink,
altLayout: mstreamModule.altLayout,
meta: MSTREAMPLAYER.playerStats.metadata
},
computed: {
albumArtPath: function () {
if (!this.meta['album-art']) {
return 'assets/img/default.png';
}
return MSTREAMAPI.currentServer.host + `album-art/${this.meta['album-art']}?token=${MSTREAMPLAYER.getCurrentSong().authToken}`;
}
},
methods: {
goToArtist: function() {
const el = document.createElement('DIV');
el.setAttribute('data-artist', this.meta.artist);
getArtistz(el);
},
goToAlbum: function() {
const el = document.createElement('DIV');
el.setAttribute('data-album', this.meta.album);
el.setAttribute('data-year', this.meta.year);
getAlbumsOnClick(el);
},
checkMove: function (event) {
document.getElementById("pop").style.visibility = "hidden";
MSTREAMPLAYER.resetPositionCache();
@ -256,6 +282,7 @@ const VUEPLAYERCORE = (() => {
meta: MSTREAMPLAYER.playerStats.metadata,
lastVol: 100,
replayGainToggle: false,
altLayout: mstreamModule.altLayout
},
created: function () {
if (typeof(Storage) !== "undefined") {
@ -270,6 +297,10 @@ const VUEPLAYERCORE = (() => {
}
},
computed: {
playbackRate: function() {
const rate = Number(this.playerStats.playbackRate);
return rate.toFixed(2) + 'x'
},
currentTime: function() {
if (!this.playerStats.duration) { return ''; }
@ -350,6 +381,12 @@ const VUEPLAYERCORE = (() => {
el.setAttribute('data-year', this.meta.year);
getAlbumsOnClick(el);
},
goForward: function(seconds) {
MSTREAMPLAYER.goForwardSeek(seconds);
},
goBack: function(seconds) {
MSTREAMPLAYER.goBackSeek(seconds);
},
fadeOverlay: function () {
VIZ.toggleDom();
},

50
webapp/index.html
View File

@ -249,10 +249,10 @@
<svg v-bind:class="{ 'aux-button-active-2': jukebox.live }" height="24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 65 65" enable-background="new 0 0 65 65" xml:space="preserve"><g><path d="M36.1,14.4c-1.4-1.4-3.9-1.4-5.3,0L1.1,44.1c-1.4,1.4-1.4,3.8,0,5.3l14.5,14.5c0.7,0.7,1.6,1.1,2.6,1.1 c1,0,1.9-0.4,2.6-1.1l29.7-29.7c1.5-1.4,1.5-3.8,0-5.3L36.1,14.4z M49.5,33.2L19.8,62.9c-0.8,0.8-2.3,0.8-3.2,0L2.1,48.3 c-0.9-0.9-0.9-2.3,0-3.2l29.7-29.7c0.4-0.4,1-0.7,1.6-0.7c0.6,0,1.2,0.2,1.6,0.7L49.5,30C50.4,30.9,50.4,32.3,49.5,33.2z"></path><rect x="32.4" y="19.5" transform="matrix(0.707 0.7072 -0.7072 0.707 24.3992 -18.4628)" width="4.2" height="1.5"></rect><rect x="42.7" y="29.8" transform="matrix(-0.7072 -0.707 0.707 -0.7072 54.8735 83.7577)" width="4.2" height="1.5"></rect><rect x="14.7" y="37.1" transform="matrix(0.7071 0.7071 -0.7071 0.7071 31.7025 -0.8228)" width="4.2" height="1.5"></rect><rect x="25" y="47.4" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 12.2855 101.3977)" width="4.2" height="1.5"></rect><rect x="19.9" y="42.3" transform="matrix(0.7071 0.7071 -0.7071 0.7071 36.8513 -2.9555)" width="4.2" height="1.5"></rect><rect x="11.7" y="40.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.9629 2.2207)" width="4.2" height="1.5"></rect><rect x="22" y="50.5" transform="matrix(-0.707 -0.7072 0.7072 -0.707 4.9277 104.4377)" width="4.2" height="1.5"></rect><rect x="16.8" y="45.3" transform="matrix(0.7071 0.7071 -0.7071 0.7071 38.1117 8.766792e-002)" width="4.2" height="1.5"></rect><rect x="8.6" y="43.2" transform="matrix(0.7071 0.7071 -0.7071 0.7071 34.2235 5.2638)" width="4.2" height="1.5"></rect><rect x="18.9" y="53.5" transform="matrix(-0.7072 -0.707 0.707 -0.7072 -2.4064 107.4868)" width="4.2" height="1.5"></rect><rect x="13.8" y="48.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 -7.5673 95.0498)" width="4.2" height="1.5"></rect><rect x="10.8" y="51.4" transform="matrix(-0.7072 -0.707 0.707 -0.7072 -14.9034 98.0997)" width="4.2" height="1.5"></rect><path d="M35.4,38.8c-1.1,1.1-2.4,1.7-3.9,1.9l0.2,1.5c1.8-0.2,3.5-1,4.8-2.3c1.3-1.3,2.1-3,2.3-4.8l-1.5-0.2 C37.1,36.4,36.5,37.8,35.4,38.8z"></path><path d="M31.7,26.2l-0.2,1.5c1.5,0.2,2.8,0.8,3.9,1.9c1.1,1.1,1.7,2.4,1.9,3.9l1.5-0.2c-0.2-1.8-1-3.5-2.3-4.8 C35.2,27.2,33.5,26.4,31.7,26.2z"></path><path d="M26.2,29.6c1.1-1.1,2.4-1.7,3.9-1.9l-0.2-1.5c-1.8,0.2-3.5,1-4.8,2.3c-1.3,1.3-2.1,3-2.3,4.8l1.5,0.2 C24.5,32,25.1,30.6,26.2,29.6z"></path><path d="M24.3,34.9l-1.5,0.2c0.2,1.8,1,3.5,2.3,4.8c1.3,1.3,3,2.1,4.8,2.3l0.2-1.5c-1.5-0.2-2.9-0.8-3.9-1.9 C25.1,37.8,24.5,36.4,24.3,34.9z"></path><path d="M43.4,0v1.5c11.1,0,20.1,9,20.1,20.1H65C65,9.7,55.3,0,43.4,0z"></path><path d="M43.4,7.4v1.5c7,0,12.7,5.7,12.7,12.7h1.5C57.6,13.8,51.2,7.4,43.4,7.4z"></path><path d="M48.6,21.6h1.5c0-3.7-3-6.7-6.7-6.7v1.5C46.3,16.4,48.6,18.7,48.6,21.6z"></path></g></svg>
<span>Jukebox</span>
</div>
<!-- <div class="side-nav-item my-waves" onclick="changeView(setupLayoutPanel, this);">
<div class="side-nav-item my-waves" onclick="changeView(setupLayoutPanel, this);">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24" fill="#FFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 3h8v8H3zm10 0h8v8h-8zM3 13h8v8H3zm15 0h-2v3h-3v2h3v3h2v-3h3v-2h-3z"/></svg>
<span>Layout</span>
</div> -->
</div>
<div class="side-nav-header">
<span>Navigation</span>
</div>
@ -284,7 +284,7 @@
<div class="row row-y" id="mstream-player">
<div class="col s12 m4 l3">
<div class="card aa-card">
<div class="card-image hide-on-small-only">
<div v-if="altLayout.moveMeta === false" class="card-image hide-on-small-only">
<img :src="albumArtPath" />
</div>
@ -306,7 +306,7 @@
</div>
</div>
<div class="col s12 m8 l9">
<div class="card data-card hide-on-small-only">
<div v-if="altLayout.moveMeta === false" class="card data-card hide-on-small-only">
<div class="card-content">
<p>
<b>Title:</b>
@ -331,11 +331,23 @@
</div>
</div>
<div class="flex">
<div class="button-block">
<div v-if="altLayout.audioBookCtrls === false" class="button-block">
<svg class="pointer margin-lr" v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" width="25" height="25"><path d="M17 2v3H6C4.3 5 3 6.3 3 8v6.813l2-1.626V8c0-.6.4-1 1-1h11v3l5-4-5-4zm4 7.188l-2 1.624V16c0 .6-.4 1-1 1H7v-3l-5 4 5 4v-3h11c1.7 0 3-1.3 3-3V9.187z"/></svg>
<svg class="pointer margin-lr" v-on:click="toggleShuffle" v-bind:class="{ 'aux-button-active': playerStats.shuffle }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" width="25" height="25"><path d="M17 2v3h-2.813c-1.1 0-2.187.588-2.687 1.688L6.594 16.5c-.1.3-.482.5-.782.5H2v2h3.813c1.1 0 2.187-.587 2.687-1.688L13.406 7.5c.1-.3.481-.5.781-.5H17v3l5-4-5-4zM2 5v2h3.813c.3 0 .675.194.875.594l1.718 3.312L9.5 8.687l-1-2C7.9 5.588 6.912 5 5.812 5H2zm9.594 8.094L10.5 15.313l1 2c.5 1 1.488 1.687 2.688 1.687H17v3l5-4-5-4v3h-2.813c-.3 0-.675-.194-.874-.594l-1.72-3.312z"/></svg>
<svg class="auto-dj" v-on:click="toggleAutoDJ" v-bind:class="{ 'aux-button-active': playerStats.autoDJ }" class="center" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" style="width:25px;webkit-logical-width:25px;webkit-logical-height:25px;user-select:none;transform-origin:12.5px 12.5px;r:0;perspective-origin:12.5px 12.5px;overflow-y:hidden;overflow-x:hidden;inline-size:25px;height:25px;d:none;block-size:25px;background:0% 0%/auto padding-box border-box" overflow="hidden" display="block" ><g transform="translate(-.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,-.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:7.9375px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:7.9375px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">D</text></g></g><g transform="translate(14.938 19.85)" style="y:0;user-select:none;transform:matrix(1,0,0,1,14.9375,19.85);perspective-origin:0 0"><g class="ld" style="y:0;x:0;user-select:none;transform-origin:5.5px 0;transform:none;r:0;perspective-origin:0 0;line-height:31.4286px;font:400 22px/31.4286px 'Varela Round','century gothic',verdana;d:none"><text style="y:0;user-select:none;r:0;perspective-origin:5.5px 0;line-height:31.4286px;font:400 22px/31.4286px Arial" white-space="nowrap" display="block">J</text></g></g></svg>
</div>
<div v-if="altLayout.audioBookCtrls === true" class="button-block">
<!-- Back 30 -->
<div v-on:click="goBack(30)">
<svg fill="#FFF" width="28" height="28" viewBox="0 0 487 487" xmlns="http://www.w3.org/2000/svg"><g class="layer"><path d="M261.397 17.983c-88.909 0-167.372 51.302-203.909 129.073L32.072 94.282 0 109.73l52.783 109.565 109.565-52.786-15.451-32.066-57.077 27.491c30.833-65.308 96.818-108.353 171.577-108.353 104.668 0 189.818 85.154 189.818 189.821s-85.15 189.824-189.818 189.824c-61.631 0-119.663-30.109-155.228-80.539l-29.096 20.521c42.241 59.87 111.143 95.613 184.324 95.613 124.286 0 225.407-101.122 225.407-225.419S385.684 17.983 261.397 17.983z"/><text font-family="Sans-serif" font-size="24" font-weight="bold" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" text-anchor="middle" transform="matrix(12.1089 0 0 8 -1472.63 -1268.31)" x="143.282" y="199.945">30</text></g></svg>
</div>
<div onclick="openPlaybackModal();">
{{playbackRate}}
</div>
<!-- Forward 30 -->
<div v-on:click="goForward(30)">
<svg fill="#FFF" width="28" height="28" viewBox="0 0 495 460" xmlns="http://www.w3.org/2000/svg"><g class="layer"><path d="M230.603 4.983c88.909 0 167.372 51.302 203.909 129.073l25.416-52.774L492 96.73l-52.783 109.565-109.565-52.786 15.451-32.066 57.077 27.491C371.347 83.626 305.362 40.581 230.603 40.581c-104.668 0-189.818 85.154-189.818 189.821s85.15 189.824 189.818 189.824c61.631 0 119.663-30.109 155.228-80.539l29.096 20.521c-42.241 59.87-111.143 95.613-184.324 95.613-124.286 0-225.407-101.122-225.407-225.419S106.316 4.983 230.603 4.983z"/><text font-family="Sans-serif" font-size="24" font-weight="bold" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" text-anchor="middle" transform="matrix(12.1089 0 0 8 -1472.63 -1268.31)" x="140.557" y="198.32">30</text></g></svg>
</div>
</div>
<div class="grow flex-center">
<svg v-on:click="fadeOverlay" style="cursor:pointer;" class="center" height="36" width="36" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M82.405 313.596c0 5.449-4.347 9.76-9.212 9.76H20.751c-5.419 0-9.736-4.311-9.736-9.76v-21.054c0-5.409 4.317-9.761 9.736-9.761h52.442c4.865 0 9.212 4.352 9.212 9.761v21.054zm0 49.759c0 5.411-4.347 9.763-9.212 9.763H20.751c-5.419 0-9.736-4.352-9.736-9.763v-21.05c0-5.459 4.317-9.76 9.736-9.76h52.442c4.865 0 9.212 4.301 9.212 9.76v21.05zm0 49.765c0 5.408-4.347 9.763-9.212 9.763H20.751c-5.419 0-9.736-4.354-9.736-9.763v-21.103c0-5.41 4.317-9.712 9.736-9.712h52.442c4.865 0 9.212 4.302 9.212 9.712v21.103zm164.946 0a9.726 9.726 0 0 1-9.751 9.763h-51.903a9.72 9.72 0 0 1-9.746-9.763v-21.103c0-5.41 4.327-9.712 9.746-9.712H237.6c5.419 0 9.751 4.302 9.751 9.712v21.103zm0-99.524c0 5.449-4.333 9.76-9.751 9.76h-51.903c-5.419 0-9.746-4.311-9.746-9.76v-21.054a9.719 9.719 0 0 1 9.746-9.761H237.6a9.723 9.723 0 0 1 9.751 9.761v21.054zm0-49.711c0 5.399-4.333 9.71-9.751 9.71h-51.903c-5.419 0-9.746-4.311-9.746-9.71v-21.104a9.718 9.718 0 0 1 9.746-9.761H237.6a9.722 9.722 0 0 1 9.751 9.761v21.104zm0-49.762c0 4.874-4.333 9.711-9.751 9.711h-51.903c-5.419 0-9.746-4.837-9.746-9.711v-21.628c0-4.885 4.327-9.186 9.746-9.186H237.6c5.419 0 9.751 4.301 9.751 9.186v21.628zm82.185 49.762c0 5.399-4.299 9.71-9.186 9.71h-52.451c-5.408 0-9.751-4.311-9.751-9.71v-21.104a9.73 9.73 0 0 1 9.751-9.761h52.451c4.887 0 9.186 4.351 9.186 9.761v21.104zm0 49.711c0 5.449-4.299 9.76-9.186 9.76h-52.451a9.704 9.704 0 0 1-9.751-9.76v-21.054a9.73 9.73 0 0 1 9.751-9.761h52.451c4.887 0 9.186 4.352 9.186 9.761v21.054zm0 49.759c0 5.411-4.299 9.763-9.186 9.763h-52.451a9.73 9.73 0 0 1-9.751-9.763v-21.05a9.698 9.698 0 0 1 9.751-9.76h52.451c4.887 0 9.186 4.301 9.186 9.76v21.05zm0 49.765c0 5.408-4.299 9.763-9.186 9.763h-52.451a9.732 9.732 0 0 1-9.751-9.763v-21.103c0-5.41 4.343-9.712 9.751-9.712h52.451c4.887 0 9.186 4.302 9.186 9.712v21.103zm82.752 0a9.72 9.72 0 0 1-9.761 9.763h-52.442c-4.852 0-9.185-4.354-9.185-9.763v-21.103c0-5.41 4.333-9.712 9.185-9.712h52.442c5.439 0 9.761 4.302 9.761 9.712v21.103zm0-49.765a9.719 9.719 0 0 1-9.761 9.763h-52.442c-4.852 0-9.185-4.352-9.185-9.763v-21.05c0-5.459 4.333-9.76 9.185-9.76h52.442c5.439 0 9.761 4.301 9.761 9.76v21.05zm0-49.759c0 5.449-4.321 9.76-9.761 9.76h-52.442c-4.852 0-9.185-4.311-9.185-9.76v-21.054c0-5.409 4.333-9.761 9.185-9.761h52.442a9.719 9.719 0 0 1 9.761 9.761v21.054zm88.698-196.278c0 5.408-4.333 9.187-9.743 9.187h-52.471c-4.855 0-9.188-3.778-9.188-9.187V95.691c0-4.876 4.332-9.227 9.188-9.227h52.471c5.41 0 9.743 4.351 9.743 9.227v21.627zm0 49.723a9.728 9.728 0 0 1-9.743 9.76h-52.471c-4.855 0-9.188-4.361-9.188-9.76v-21.629c0-4.834 4.332-9.187 9.188-9.187h52.471c5.41 0 9.743 4.353 9.743 9.187v21.629zm0 49.761c0 5.398-4.333 9.762-9.743 9.762h-52.471c-4.855 0-9.188-4.363-9.188-9.762V195.75c0-5.461 4.332-9.761 9.188-9.761h52.471c5.41 0 9.743 4.3 9.743 9.761v21.052zm0 49.761c0 5.401-4.333 9.712-9.743 9.712h-52.471c-4.855 0-9.188-4.311-9.188-9.712V245.46c0-5.408 4.332-9.71 9.188-9.71h52.471c5.41 0 9.743 4.302 9.743 9.71v21.103zm0 49.763c0 5.398-4.333 9.761-9.743 9.761h-52.471c-4.855 0-9.188-4.362-9.188-9.761v-21.104c0-5.409 4.332-9.711 9.188-9.711h52.471c5.41 0 9.743 4.302 9.743 9.711v21.104zm0 50.287c0 4.874-4.333 9.185-9.743 9.185h-52.471c-4.855 0-9.188-4.311-9.188-9.185v-21.628c0-5.41 4.332-9.765 9.188-9.765h52.471a9.724 9.724 0 0 1 9.743 9.765v21.628zm0 49.76c0 4.874-4.333 9.188-9.743 9.188h-52.471c-4.855 0-9.188-4.313-9.188-9.188v-21.625c0-5.41 4.332-9.189 9.188-9.189h52.471c5.41 0 9.743 3.779 9.743 9.189v21.625zm-335.845-53.018a9.728 9.728 0 0 1-9.746 9.763h-52.441c-5.419 0-9.211-4.352-9.211-9.763v-21.05c0-5.459 3.792-9.76 9.211-9.76h52.441c5.405 0 9.746 4.301 9.746 9.76v21.05zm0 49.765a9.73 9.73 0 0 1-9.746 9.763h-52.441c-5.419 0-9.211-4.354-9.211-9.763v-21.103c0-5.41 3.792-9.712 9.211-9.712h52.441c5.405 0 9.746 4.302 9.746 9.712v21.103zM82.405 263.885c0 5.399-4.347 9.71-9.212 9.71H20.751c-5.419 0-9.736-4.311-9.736-9.71v-21.104c0-5.41 4.317-9.761 9.736-9.761h52.442c4.865 0 9.212 4.351 9.212 9.761v21.104zm164.946 99.47a9.724 9.724 0 0 1-9.751 9.763h-51.903a9.72 9.72 0 0 1-9.746-9.763v-21.05c0-5.459 4.327-9.76 9.746-9.76H237.6c5.419 0 9.751 4.301 9.751 9.76v21.05z"/></svg>
@ -394,10 +406,10 @@
<div class="col col-y s12 m6 flex-x h1" id="playlist">
<div class="header-tab">
<div class="flex hide-on-small-only">
<div class="show-on-medium-and-up">
<h5>Now Playing</h5>
</div>
<div class="flex right" id="playlist-buttons">
<div class="flex grow flex-end" id="playlist-buttons">
<a title="Save Playlist" onclick="openSaveModal();">
<?xml version="1.0" encoding="iso-8859-1"?><svg width="27" height="27" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" style="enable-background:new 0 0 49 49"><path d="M27.5 5h6v10h-6z"/><path d="M39.914 0H.5v49h48V8.586L39.914 0zM10.5 2h26v16h-26V2zm29 45h-31V26h31v21z"/><path d="M13.5 32h7a1 1 0 1 0 0-2h-7a1 1 0 1 0 0 2zM13.5 36h10a1 1 0 1 0 0-2h-10a1 1 0 1 0 0 2zM26.5 36c.27 0 .52-.11.71-.29.18-.19.29-.45.29-.71s-.11-.521-.29-.71c-.37-.37-1.04-.37-1.41 0a.996.996 0 0 0-.3.71c0 .27.109.52.29.71.189.18.439.29.71.29z"/></svg>
</a>
@ -412,6 +424,28 @@
</a>
</div>
</div>
<div v-if="altLayout.moveMeta === true" style="background-color: #1a1a1a !important;" class="card card-mod data-card hide-on-small-only">
<div class="card-content flex">
<div class="custom-card-img">
<img :src="albumArtPath" />
</div>
<div class="card-meta">
<p>
<b>Title:</b>
{{ (meta.title) ? meta.title : '' }}
</p>
<p>
<b>Artist:</b>
<span class="pointer" v-on:click="goToArtist">{{ (meta.artist) ? meta.artist : '' }}</span>
</p>
<p>
<b>Album:</b>
<span class="pointer" v-on:click="goToAlbum">{{ (meta.album) ? meta.album : '' }}</span>
</p>
<p><b>Year:</b> {{ (meta.year) ? meta.year : '' }}</p>
</div>
</div>
</div>
<draggable class="collection scroll-auto" tag="ul" :list="playlist" handle=".drag-handle" @end="checkMove" >
<li v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :song="song">
</li>