mirror of
https://github.com/IrosTheBeggar/mStream.git
synced 2025-10-27 07:31:02 +00:00
128 lines
5.2 KiB
HTML
128 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<meta content="yes" name="mobile-web-app-capable">
|
|
<meta content="yes" name="apple-mobile-web-app-capable">
|
|
<meta content="black" name="apple-mobile-web-app-status-bar-style">
|
|
|
|
<title>mStream Media Player - All your media. Everywhere you go.</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="57x57" href="/public/favicon/apple-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="/public/favicon/apple-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="/public/favicon/apple-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="/public/favicon/apple-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="/public/favicon/apple-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="/public/favicon/apple-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="/public/favicon/apple-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/public/favicon/apple-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/public/favicon/apple-icon-180x180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/public/favicon/android-icon-192x192.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/public/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="96x96" href="/public/favicon/favicon-96x96.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/public/favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="/public/favicon/manifest.json">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="msapplication-TileImage" content="/public/favicon/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
|
|
|
|
<!-- GOAL: Remove jquery dependancy
|
|
Currently mstream.js and mstream.api.js use it -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
|
<!-- Cookie Library -->
|
|
<script type="text/javascript" src="/public/js/lib/cookie.js"></script>
|
|
<!-- Vue JS -->
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
<!-- Sortable JS
|
|
Used to add drag and drop re-arranging to queue -->
|
|
<script src="https://unpkg.com/sortablejs@latest"></script>
|
|
<!-- https://github.com/SortableJS/Vue.Draggable - v2.6 -->
|
|
<script src="/public/js/lib/vue-sortable.js"></script>
|
|
|
|
|
|
|
|
<!--
|
|
This is the mStream Player and Queue code
|
|
It must be loaded before all aother mstream libraries because it's a dependancy of those libraries
|
|
DO NOT Change to order these are loaded in
|
|
-->
|
|
<script src="/public/js/lib/aurora.js"></script>
|
|
<script src="/public/js/lib/flac.js"></script>
|
|
<script src="/public/js/lib/howler.core.js"></script>
|
|
<script src="/public/js/mstream.player.js"></script>
|
|
<!-- END PLAYE AND QUEUE CODE -->
|
|
|
|
|
|
<!-- This API library must be loaded after the player
|
|
This library provides a convenient way to call the server's API -->
|
|
<script src="/public/js/mstream.api.js"></script>
|
|
<!-- Jukebox Control Code -- >
|
|
<script src="/public/js/mstream.jukebox.js"></script>
|
|
|
|
|
|
<!-- This file is a bunch of jquery that handles the browser -->
|
|
<!-- It needs to be replaced with vue code.
|
|
I'm keeping it here for a reference. A lot of code for parsing AJAX responses can be recycled -->
|
|
<!-- <script type="text/javascript" src="/public/js/mstream.js"></script> -->
|
|
|
|
<!-- This is the file that will replace mstream.js -->
|
|
<script type="text/javascript" src="/public/js/mstream.vue-browser.js"></script>
|
|
|
|
|
|
<!-- Vue Player and Queue controls
|
|
NOTE: This file is what wires up the MSTREAMPLAYER object to the html
|
|
Uncomment it once the html has been contructed -->
|
|
<!-- <script src="/public/js/mstream.vue-player-controls.js"></script> -->
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,800" rel="stylesheet">
|
|
<link rel="stylesheet" href="/public/css/style.css">
|
|
<script>
|
|
// Run Vue code once the page has been loaded
|
|
$(document).ready(function(){
|
|
// // invoke vueplayer
|
|
// Uncomment once player html is constructed
|
|
// VUEPLAYER();
|
|
|
|
VUEBROWSER();
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<!-- Login Overlay -->
|
|
<div id="login-overlay" class="login-overlay hide">
|
|
|
|
|
|
<div class="login-panel">
|
|
<img class="login-icon" src="/public/img/mstream-icon.svg">
|
|
<form id="login-form" v-on:submit.prevent="submitCode($event)">
|
|
<label class="label--magic">
|
|
<input v-focus type="text" required id="login-username">
|
|
<span>Username</span>
|
|
</label>
|
|
<label class="label--magic">
|
|
<input required type="password" required id="login-password">
|
|
<span>Password</span>
|
|
</label>
|
|
<button id="login-submit" type="submit" :disabled="pending === true ? true : false">Login</button>
|
|
</form>
|
|
|
|
<div v-show="error" id="login-alert" class="">{{errorMessage}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
The rest of the webapp goes here
|
|
</div>
|
|
</body>
|