mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
216 lines
9.0 KiB
HTML
216 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>mStream Remote</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>
|
|
|
|
<link rel="stylesheet" href="./index.css">
|
|
<link rel="stylesheet" href="../assets/css/materialize.css">
|
|
|
|
<script src="../assets/js/lib/axios.js"></script>
|
|
<script src="../assets/js/lib/vue2.js"></script>
|
|
<script src="./index.js"></script>
|
|
|
|
<script>
|
|
if (typeof remoteProperties === 'undefined') {
|
|
var remoteProperties = {
|
|
code: 0,
|
|
error: false,
|
|
token: false
|
|
};
|
|
} else {
|
|
MSTREAMAPI.getCurrentDirectoryContents();
|
|
}
|
|
|
|
// Function to send commands to server
|
|
async function sendCommandToServer(command, file = false) {
|
|
try {
|
|
const postData = {
|
|
code: remoteProperties.code,
|
|
command: command
|
|
}
|
|
|
|
if (file) { postData.file = file; }
|
|
|
|
await axios({
|
|
method: 'POST',
|
|
url: '/api/v1/jukebox/push-to-client',
|
|
headers: { 'x-access-token': remoteProperties.token },
|
|
data: postData
|
|
});
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
|
|
// Auto Focus
|
|
Vue.directive('focus', {
|
|
// When the bound element is inserted into the DOM...
|
|
inserted: function (el) {
|
|
// Focus the element
|
|
el.focus()
|
|
}
|
|
})
|
|
|
|
window.onload = function () {
|
|
// Prompt user for code
|
|
// Check code against server
|
|
// Store code
|
|
|
|
|
|
|
|
var loginPanel = new Vue({
|
|
el: '#login-overlay',
|
|
data: {
|
|
remote: remoteProperties,
|
|
},
|
|
methods: {
|
|
submitCode: async function () {
|
|
try {
|
|
const loginCode = document.getElementById('login-code').value;
|
|
const res = await axios.post('/api/v1/jukebox/does-code-exist', { code: loginCode });
|
|
if (res.data.status !== true) { throw 'Failed to Connect'; }
|
|
|
|
// Initialize
|
|
remoteProperties.error = false;
|
|
remoteProperties.code = loginCode;
|
|
remoteProperties.token = res.data.token;
|
|
MSTREAMAPI.getCurrentDirectoryContents();
|
|
}catch (err) {
|
|
console.log(err)
|
|
remoteProperties.error = 'Code Not Found';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Template for data items
|
|
Vue.component('browser-item', {
|
|
data: function () {
|
|
return { }
|
|
},
|
|
template: '<div v-on:click="handleClick($event)" class="browser-item">{{displayText}}</div>',
|
|
props: ['type', 'item'],
|
|
methods: {
|
|
handleClick: function (event) {
|
|
// get data type
|
|
var thisType = this.type;
|
|
// do something based on data type
|
|
if (this.type === 'file') {
|
|
sendCommandToServer('addSong', this.item.path);
|
|
} else if (this.type === 'directory') {
|
|
MSTREAMAPI.goToNextDirectory(this.item.name);
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
displayText: function () {
|
|
return this.item.name;
|
|
}
|
|
}
|
|
});
|
|
|
|
var browserPanel = new Vue({
|
|
el: '#browser-container',
|
|
data: {
|
|
dataList: MSTREAMAPI.dataList,
|
|
currentProperties: MSTREAMAPI.currentProperties,
|
|
fileExplorer: MSTREAMAPI.fileExplorerArray
|
|
},
|
|
methods: {
|
|
goBack: function() {
|
|
MSTREAMAPI.goBackDirectory();
|
|
}
|
|
},
|
|
computed: {
|
|
titleText: function () {
|
|
return 'File Explorer';
|
|
},
|
|
|
|
filepath: function () {
|
|
if (this.fileExplorer.length === 1) {
|
|
return '/';
|
|
}
|
|
|
|
var directoryString = '';
|
|
for (var i = 0; i < this.fileExplorer.length; i++) {
|
|
// Ignore root directory
|
|
if (this.fileExplorer[i].name !== '/') {
|
|
directoryString += "/" + this.fileExplorer[i].name;
|
|
}
|
|
}
|
|
|
|
return directoryString;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div v-if="remote.code === 0" id="login-overlay" class="login-overlay">
|
|
<div class="container">
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 612 153" xml:space="preserve"><style>.st0,.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#264679}.st1{fill:#6684b2}</style><path class="st0" d="M179.9 45.5c-6.2 0-11.5 1.7-15.9 5s-6.5 8.1-6.5 14.4c0 4.9 1.3 9.1 3.8 12.4 2.5 3.4 5.7 5.8 9.3 7.3 3.7 1.5 7.3 2.8 11 3.8s6.8 2.3 9.3 3.9c2.5 1.5 3.8 3.5 3.8 5.8 0 4.8-4.4 7.2-13.1 7.2h-24.1V118h24.1c17.1 0 25.6-6.7 25.6-20.2 0-1.9-.2-3.8-.6-5.8-.4-2-1.2-4-2.6-6-1.3-2.1-3.3-3.7-5.8-4.9-2.5-1.2-6.4-2.7-11.5-4.5l-8.8-3.1c-.7-.2-1.7-.7-2.9-1.3-1.3-.7-2.2-1.3-2.8-1.9-.6-.6-1.1-1.4-1.6-2.3-.5-.9-.7-2-.7-3.2 0-2 1-3.5 2.9-4.6 1.9-1.1 4.3-1.6 7-1.6h24.6V45.5h-24.5zM226.4 58.3v31c0 10.2 2.5 17.6 7.6 22 5.1 4.4 13 6.6 23.7 6.6v-12.8c-2.7 0-4.9-.2-6.8-.4-1.8-.3-3.7-.9-5.8-1.9-2-.9-3.6-2.6-4.7-4.9-1.1-2.3-1.6-5.2-1.6-8.7V58.3h18.8V45.5h-18.8V31.6L214 58.3h12.4zM281.1 118V76.8c0-7.2.9-12 2.6-14.5 1-1.3 2.2-2.2 3.6-2.8 1.4-.6 2.6-1 3.6-1.1 1-.1 2.5-.1 4.3-.1H310V45.5h-12.2c-3.6 0-6.5.1-8.6.3-2.1.2-4.5.9-7.3 2s-5.1 2.8-7.1 5c-4 4.4-6 12.4-6 24V118h12.3zM326.2 53.8c-6.2 7.4-9.3 17-9.3 28.9 0 10.7 3.2 19.4 9.5 26.2s14.7 10.1 25.3 10.1c8.7 0 16.3-2.7 22.7-8.1L366 102c-3.7 2.1-8.5 3.2-14.3 3.2-6.5 0-11.8-2.3-15.8-6.9-4-4.6-6-10.5-6-17.9 0-7 1.9-12.9 5.6-17.9 3.8-5 8.9-7.5 15.5-7.5 3.3 0 6.1.8 8.2 2.4 2.1 1.6 3.2 4 3.2 7.2 0 5-1.2 8.5-3.6 10.6-2.4 2.1-6.7 3.2-12.9 3.2h-6.7v11.7h5.7c20.3 0 30.5-8.5 30.5-25.4 0-13.6-7.9-20.7-23.7-21.5-10.8-.2-19.3 3.3-25.5 10.6zM412.3 73.2c-7.4 0-13.6 1.9-18.5 5.7-4.9 3.8-7.4 9.4-7.4 16.7 0 7.3 2.3 12.9 7 16.7 4.6 3.8 10.9 5.7 18.8 5.7h31V73.6c0-9.1-2.4-16-7.2-20.8-4.8-4.8-11.7-7.2-20.7-7.2h-22.9v12.8h22.3c10.9 0 16.4 6.1 16.4 18.2v28.7h-18.4c-9.1 0-13.6-3.2-13.6-9.8 0-3.3 1.2-5.9 3.6-7.8 2.4-1.8 5.8-2.7 10.2-2.7 5.1 0 9.4 1.4 12.9 4.3v-14c-4.9-1.4-9.3-2.1-13.5-2.1zM458.8 118H471V58.3h24.4V118h12.2V58.3h5.7c6.8 0 11.3.7 13.5 2 4.3 2.5 6.5 7.7 6.5 15.5V118h12.2V75.7c0-6-.6-11.2-1.9-15.5-1.2-4.3-3.9-7.8-7.9-10.6-3.9-2.7-9.1-4.1-15.7-4.1h-61.4V118z"/><path class="st1" d="M75 118.5v-83l21 13v70z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#26477b" d="M99 118.5v-69l11.5 7 10.5-7v69z"/><path class="st1" d="M124 118.5v-70l21-13v83z"/></svg>
|
|
|
|
|
|
<form class="login-form" v-on:submit.prevent="submitCode($event)">
|
|
<div>
|
|
<label>Code</label>
|
|
<input v-focus required type="text" class="form-control" id="login-code">
|
|
</div>
|
|
<button type="submit" class="btn">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Browser -->
|
|
<div id="browser-container" class="container">
|
|
<!-- Controls -->
|
|
<div class="row">
|
|
<div class="col s4 pointer" onclick="sendCommandToServer('previous')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="100%" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
|
|
</div>
|
|
<div onclick="sendCommandToServer('playPause')" class="col s4 pointer" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="100%" viewBox="0 0 24 24" ><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>
|
|
</div>
|
|
<div onclick="sendCommandToServer('next')" class="col s4 pointer" >
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="32" 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>
|
|
|
|
<!-- Browser Header -->
|
|
<h5>{{titleText}}</h5>
|
|
|
|
<!-- ToolBar -->
|
|
<div class="row">
|
|
<div v-on:click="goBack()" class="back-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="25" height="25"><path d="M13.281 6.781l-8.5 8.5-.687.719.687.719 8.5 8.5 1.438-1.438L7.938 17H28v-2H7.937l6.782-6.781L13.28 6.78z" color="#000" overflow="visible"/></svg>
|
|
</div>
|
|
<div class="filepath">{{filepath}}</div>
|
|
</div>
|
|
|
|
<!-- List Area -->
|
|
<div id="browser" class="browser row">
|
|
<div v-for="(item, index) in dataList" :item="item" :type="item.type" is="browser-item" :key="index">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body> |