mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
165 lines
6.2 KiB
HTML
165 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>mStream Music</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../../assets/fav/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../../assets/fav/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/fav/favicon-16x16.png">
|
|
<link rel="manifest" href="../../assets/fav/site.webmanifest">
|
|
<link rel="mask-icon" href="../../assets/fav/safari-pinned-tab.svg" color="#5bbad5">
|
|
<link rel="shortcut icon" href="../../assets/fav/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="msapplication-config" content="../../assets/fav/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<!-- This empty script tag gets replaced with a preloaded variable 'sharedPlaylist' -->
|
|
<script></script>
|
|
|
|
<!-- iziToast -->
|
|
<script src="../../assets/js/lib/izi-toast.js"></script>
|
|
<link rel="stylesheet" href="../../assets/css/izi-toast.css">
|
|
|
|
<!-- Materialize for Styling-->
|
|
<link rel="stylesheet" href="../../assets/css/materialize.css">
|
|
|
|
<!-- Dependencies -->
|
|
<script src="../../assets/js/lib/axios.js"></script>
|
|
<script src="../../assets/js/lib/vue2.js"></script>
|
|
|
|
<!-- mStream Player -->
|
|
<script src="../../assets/js/mstream.player.js"></script>
|
|
<script defer src="../../assets/js/mstream.vue.player.js"></script>
|
|
|
|
<!-- Boot Up App -->
|
|
<script defer>
|
|
// load the playlist
|
|
sharedPlaylist.playlist.forEach(item => {
|
|
const newSong = {
|
|
url: `/media/${item}?token=${sharedPlaylist.token}`,
|
|
filepath: item,
|
|
authToken: sharedPlaylist.token,
|
|
metadata: {
|
|
"artist": "",
|
|
"album": "",
|
|
"track": "",
|
|
"title": "",
|
|
"year": "",
|
|
"album-art": ""
|
|
}
|
|
};
|
|
|
|
MSTREAMPLAYER.addSong(newSong, true);
|
|
|
|
axios.post('/db/metadata', {
|
|
'filepath': item,
|
|
'token': sharedPlaylist.token
|
|
})
|
|
.then((response) => {
|
|
// handle success
|
|
if (response.data.metadata) {
|
|
newSong.metadata = response.data.metadata;
|
|
MSTREAMPLAYER.resetCurrentMetadata();
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// iziToast.warning({
|
|
// title: 'Metadata Lookup Failed',
|
|
// message: err.responseJSON.error ? err.responseJSON.error : '',
|
|
// position: 'topCenter',
|
|
// timeout: 3500
|
|
// });
|
|
})
|
|
});
|
|
</script>
|
|
<style>
|
|
.row-mod {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.playing {
|
|
background-color: #E6EBFA !important;
|
|
}
|
|
|
|
.aa-card {
|
|
max-width: 220px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.playError {
|
|
background-color: lightcoral !important;
|
|
}
|
|
|
|
.aux-button-active{
|
|
fill:rgb(102, 132, 178) !important;
|
|
color: rgb(102, 132, 178) !important;
|
|
}
|
|
|
|
.playlist-text {
|
|
width: calc(100% - 25px);
|
|
display: inline-block;
|
|
}
|
|
|
|
.secondary-content {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mstream-player" class="container">
|
|
<div class="row">
|
|
<div class="col s12 m3">
|
|
<div class="card aa-card">
|
|
<div class="card-image">
|
|
<img :src="albumArtPath" />
|
|
</div>
|
|
<div class="card-action">
|
|
<div class="row row-mod">
|
|
<div v-on:click="previousSong" class="col s4 pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="28" width="100%" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
|
|
</div>
|
|
<div class="col s4 pointer" v-on:click="playPause">
|
|
<svg v-if="playerStats.playing === false" xmlns="http://www.w3.org/2000/svg" height="24" width="100%" viewBox="0 0 24 24" ><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" height="28" width="100%" viewBox="0 0 24 24" ><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
|
|
</div>
|
|
<div class="col s4 pointer" v-on:click="nextSong">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="28" width="100%" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s12 m9 hide-on-small-only">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p><b>Title:</b> {{ (meta.title) ? meta.title : '' }}</p>
|
|
<p><b>Artist:</b> {{ (meta.artist) ? meta.artist : '' }}</p>
|
|
<p><b>Album:</b> {{ (meta.album) ? meta.album : '' }}</p>
|
|
<p><b>Year:</b> {{ (meta.year) ? meta.year : '' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<h4>Now Playing</h4>
|
|
<span>
|
|
<svg class="pointer" 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" 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>
|
|
</span>
|
|
</div>
|
|
<div class="row">
|
|
<ul class="collection">
|
|
<li v-for="(song, index) in playlist" is="playlist-item" :key="index" :index="index" :song="song"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body> |