nebukadneza
/
MPVRemote
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

more consistent indentation and quotes

Browse Source
master
Jing Sun 9 years ago
parent 681c80c9ce
commit e0beb7390b
1 changed files with 210 additions and 346 deletions
Show Stats Download Patch File Download Diff File

556
client/static/index.html
Unescape View File

@ -1,135 +1,26 @@
<!DOCTYPE html>
<html lang="en" ng-app="StarterApp">
<head>
<title>mpv remote</title>
<style type="text/css">
md-content {
background-color: #eee;
}
md-card {
background-color: #fff;
text-align: center;
}
md-card h2:first-of-type {
margin-top: 0;
}
h2 {
font-weight: 400;
}
.md-toolbar-tools-bottom {
font-size: small;
}
.md-toolbar-tools-bottom :last-child {
opacity: 0.8;
}
#status {
color: #c60008;
}
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
/* now the element will fade out before it is removed from the DOM */
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
section {
background: #ffffff;
border-radius: 3px;
text-align: center;
margin: 0.5em;
position: relative !important;
padding-bottom: 5px; }
section .md-button {
margin-top: 10px;
margin-bottom: 1px; }
.label {
position: absolute;
top: 10px;
left: 10px;
font-size: 14px;
opacity: 0.84; }
.status-container {
height: 50px;
}
.dont-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.overlay {
height: 0;
width: 100%;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5);
overflow-x: hidden;
transition: 0.5s;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<html lang="en" ng-app="MpvRemoteApp">
<head>
<title>mpv remote</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body layout="row" ng-controller="MpvRemote">
<div id="overlay" class="overlay">
</div>
<div id="overlay" class="overlay"></div>
<div layout="column" class="relative" layout-fill role="main">
<md-toolbar>
<div class="md-toolbar-tools">
<h3>
mpv remote
</h3>
<md-chips><md-chip>{{connectionStatus}}</md-chip></md-chips>
<h3>mpv remote</h3>
<md-chips><md-chip>{{connectionStatus}}</md-chip></md-chips>
<span flex></span>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
@ -140,248 +31,221 @@ height: 50px;
<md-content flex md-scroll-y>
<ui-view layout="column" layout-fill layout-padding>
<label class="dont-break-out" layout="column" layout-align="center center">{{fileName}}</label>
<section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-fab" aria-label="Play" ng-click="">
<md-icon class="material-icons" ng-hide="isPlaying" ng-click="play()">play_arrow</md-icon>
<md-icon class="material-icons" ng-show="isPlaying" ng-click="pause()">pause</md-icon>
</md-button>
<md-slider flex="" min="0" ng-change="onDurationChange()" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider">
</md-slider>
</section>
<label layout="column" layout-align="center center">{{currentDurationSeconds | toMinSec}}/{{totalDurationSeconds | toMinSec}}</label>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div class="label">Skip</div>
<md-button class="md-fab" aria-label="Back" ng-click="back()">
<md-icon class="material-icons">fast_rewind</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Forward" ng-click="forward()">
<md-icon class="material-icons">fast_forward</md-icon>
</md-button>
</section>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div class="label">Chapter</div>
<md-button class="md-fab" aria-label="Previous chapter" ng-click="previousChapter()">
<md-icon class="material-icons">skip_previous</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Next chapter" ng-click="nextChapter()">
<md-icon class="material-icons">skip_next</md-icon>
</md-button>
</section>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<label class="dont-break-out" layout="column" layout-align="center center">{{fileName}}</label>
<section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-fab" aria-label="Play" ng-click="">
<md-icon class="material-icons" ng-hide="isPlaying" ng-click="play()">play_arrow</md-icon>
<md-icon class="material-icons" ng-show="isPlaying" ng-click="pause()">pause</md-icon>
</md-button>
<md-slider flex="" min="0" ng-change="onDurationChange()" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider"></md-slider>
</section>
<label layout="column" layout-align="center center">{{currentDurationSeconds | toMinSec}}/{{totalDurationSeconds | toMinSec}}</label>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div class="label">Skip</div>
<md-button class="md-fab" aria-label="Back" ng-click="back()">
<md-icon class="material-icons">fast_rewind</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Forward" ng-click="forward()">
<md-icon class="material-icons">fast_forward</md-icon>
</md-button>
</section>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div class="label">Chapter</div>
<md-button class="md-fab" aria-label="Previous chapter" ng-click="previousChapter()">
<md-icon class="material-icons">skip_previous</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Next chapter" ng-click="nextChapter()">
<md-icon class="material-icons">skip_next</md-icon>
</md-button>
</section>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button ng-show="isMuted" class="md-fab" aria-label="Unmute" ng-click="unmute()">
<md-icon class="material-icons">volume_mute</md-icon>
</md-button>
<md-button ng-hide="isMuted" class="md-fab" aria-label="Mute" ng-click="mute()">
<md-icon class="material-icons">volume_off</md-icon>
</md-button>
<md-slider flex="" min="0" ng-change="" max="130" ng-model="currentVolume" aria-label="VolumeSlider" id="volume-slider">
</md-slider>
<md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
<md-icon class="material-icons">volume_down</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Volume up" ng-click="volumeUp()">
<md-icon class="material-icons">volume_up</md-icon>
</md-button>
</section>
<md-icon class="material-icons">volume_mute</md-icon>
</md-button>
<md-button ng-hide="isMuted" class="md-fab" aria-label="Mute" ng-click="mute()">
<md-icon class="material-icons">volume_off</md-icon>
</md-button>
<md-slider flex="" min="0" ng-change="" max="130" ng-model="currentVolume" aria-label="VolumeSlider" id="volume-slider">
</md-slider>
<md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
<md-icon class="material-icons">volume_down</md-icon>
</md-button>
<md-button class="md-fab" aria-label="Volume up" ng-click="volumeUp()">
<md-icon class="material-icons">volume_up</md-icon>
</md-button>
</section>
<div class="status-container">
<div class="ng-scope fade" ng-if="status" id="status">
<b layout="row" layout-align="center center" class="md-padding ng-binding layout-align-center-center layout-row">
{{status}}
</b>
</div>
</div>
</ui-view>
</md-content>
</div>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
<script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
<script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
function openOverlay() {
document.getElementById('overlay').style.height = "100%";
}
function openOverlay() {
document.getElementById('overlay').style.height = '100%';
}
function closeOverlay() {
document.getElementById('overlay').style.height = "0%";
}
function closeOverlay() {
document.getElementById('overlay').style.height = '0%';
}
var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
app.filter('toMinSec', function(){
return function(input){
var minutes = parseInt(input/60, 10);
var seconds = input%60;
if (seconds < 10) {
var app = angular.module('MpvRemoteApp', ['ngMaterial', 'ngMdIcons']);
app.filter('toMinSec', function(){
return function(input){
var minutes = parseInt(input/60, 10);
var seconds = input%60;
if (seconds < 10) {
seconds = '0' + seconds;
}
return minutes + ':' + seconds;
}
return minutes + ':' + seconds;
}
})
app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
// functions
var showStatus = function(text) {
$scope.status = text;
$timeout(function() {$scope.status = ''; }, 2000);
};
// Commands
var seekCommand = function(targetDuration) {
return {
command: 'seek',
seekValue: targetDuration
};
};
var changeVolumeCommand = function(targetVolume) {
return {
command: 'changeVolume',
seekValue: targetDuration
};
};
var chapterCommand = function(isForward) {
var direction = isForward ? 'forward' : 'backward';
return {
command: 'seekChapter',
direction: direction
};
};
var playCommand = { command: 'play' };
var pauseCommand = { command: 'pause' };
var muteCommand = { command: 'mute' };
var unmuteCommand = { command: 'unmute' };
// ---------------------------------------------------------
$scope.status = '';
$scope.currentDurationSeconds = 0;
$scope.totalDurationSeconds = 1;
$scope.currentVolume = 0;
$scope.isPlaying = false;
$scope.isMuted = false;
$scope.fileName = '';
$scope.connectionStatus = '';
$scope.alert = '';
})
app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
// Commands
var seekCommand = function(targetDuration) {
return { command: 'seek', seekValue: targetDuration };
};
var changeVolumeCommand = function(targetVolume) {
return { command: 'changeVolume', seekValue: targetVolume };
};
var chapterCommand = function(isForward) {
var direction = isForward ? 'forward' : 'backward';
return { command: 'seekChapter', direction: direction };
};
var playCommand = { command: 'play' };
var pauseCommand = { command: 'pause' };
var muteCommand = { command: 'mute' };
var unmuteCommand = { command: 'unmute' };
// ---------------------------------------------------------
$scope.status = '';
$scope.currentDurationSeconds = 0;
$scope.totalDurationSeconds = 1;
$scope.currentVolume = 0;
$scope.isPlaying = false;
$scope.isMuted = false;
$scope.fileName = '';
$scope.connectionStatus = '';
$scope.alert = '';
// Socket stuff
//var socket = new WebSocket('ws://echo.websocket.org');
var socket;
var connect = function() {
socket = new WebSocket('ws://192.168.1.42:8000');
socket.onmessage = function(event) {
console.log(event.data);
var serverMessage = JSON.parse(event.data);
if (serverMessage.type === 'status') {
updateState(serverMessage);
// Socket stuff
var socket;
var connect = function() {
socket = new WebSocket('ws://192.168.1.42:8000');
socket.onmessage = function(event) {
console.log(event.data);
var serverMessage = JSON.parse(event.data);
if (serverMessage.type === 'status') {
updateState(serverMessage);
}
}
socket.onopen = function(event) {
console.log('connected');
reconnectTimer = 2000;
$scope.connectionStatus = 'Connected';
$scope.$apply();
closeOverlay();
};
socket.onclose = function(event) {
$scope.connectionStatus = 'Disconnected';
$scope.$apply();
openOverlay();
tryReconnect();
};
};
var sendCommand = function(command) {
socket.send(JSON.stringify(command));
}
}
socket.onopen = function(event) {
console.log('connected');
reconnectTimer = 2000;
$scope.connectionStatus = 'Connected';
$scope.$apply();
closeOverlay();
};
socket.onclose = function(event) {
$scope.connectionStatus = 'Disconnected';
$scope.$apply();
openOverlay();
tryReconnect();
};
};
var sendCommand = function(command) {
socket.send(JSON.stringify(command));
}
var reconnectTimer = 2000;
var tryReconnect = function() {
console.log('Reconnecting in ' + reconnectTimer/1000 + 's');
setTimeout(connect, reconnectTimer);
reconnectTimer = reconnectTimer*2;
};
var updateState = function(state) {
$scope.currentDurationSeconds = state.currentDuration;
$scope.totalDurationSeconds = state.totalDuration;
$scope.isPlaying = state.isPlaying;
$scope.fileName = state.fileName;
$scope.isMuted = state.isMuted;
$scope.currentVolume = state.volume;
$scope.$apply();
};
connect();
$scope.onDurationChange = function() {
console.log($scope.currentDurationSeconds);
sendCommand(seekCommand($scope.currentDurationSeconds));
};
$scope.previousChapter = function() { sendCommand(chapterCommand(false)) };
$scope.nextChapter = function() { sendCommand(chapterCommand(true)) };
$scope.back = function() { sendCommand(seekCommand(Math.max(0, $scope.currentDurationSeconds - 10))) };
$scope.play = function() {
$scope.isPlaying = true;
sendCommand(playCommand);
};
$scope.pause = function() {
$scope.isPlaying = false;
sendCommand(pauseCommand);
};
$scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
$scope.volumeUp = function() { volume(5) };
$scope.volumeDown = function() { volume(-5) };
$scope.mute = function() { sendCommand(muteCommand) };
$scope.unmute = function() { sendCommand(unmuteCommand) };
var reconnectTimer = 2000;
var tryReconnect = function() {
console.log('Reconnecting in ' + reconnectTimer/1000 + 's');
setTimeout(connect, reconnectTimer);
reconnectTimer = reconnectTimer*2;
};
var updateState = function(state) {
$scope.currentDurationSeconds = state.currentDuration;
$scope.totalDurationSeconds = state.totalDuration;
$scope.isPlaying = state.isPlaying;
$scope.fileName = state.fileName;
$scope.isMuted = state.isMuted;
$scope.currentVolume = state.volume;
$scope.$apply();
};
connect();
$scope.onDurationChange = function() {
console.log($scope.currentDurationSeconds);
sendCommand(seekCommand($scope.currentDurationSeconds));
};
$scope.onVolumeChange = function() {
console.log($scope.currentVolume);
sendCommand(changeVolumeCommand($scope.currentVolume));
};
$scope.previousChapter = function() { sendCommand(chapterCommand(false)) };
$scope.nextChapter = function() { sendCommand(chapterCommand(true)) };
$scope.back = function() { sendCommand(seekCommand(Math.max(0, $scope.currentDurationSeconds - 10))) };
$scope.play = function() { sendCommand(playCommand) };
$scope.pause = function() { sendCommand(pauseCommand) };
$scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
$scope.volumeUp = function() { volume(5) };
$scope.volumeDown = function() { volume(-5) };
$scope.mute = function() { sendCommand(muteCommand) };
$scope.unmute = function() { sendCommand(unmuteCommand) };
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
controller: 'ListBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
$scope.alert = clickedItem.name + ' clicked!';
});
};
}]);
app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
template: '<md-bottom-sheet class="md-list md-has-header"> <md-subheader>Settings</md-subheader> <md-list> <md-item ng-repeat="item in items"><md-item-content md-ink-ripple flex class="inset"> <a flex aria-label="{{item.name}}" ng-click="listItemClick($index)"> <span class="md-inline-list-icon-label">{{ item.name }}</span> </a></md-item-content> </md-item> </md-list></md-bottom-sheet>',
controller: 'ListBottomSheetCtrl',
targetEvent: $event
}).then(function(clickedItem) {
$scope.alert = clickedItem.name + ' clicked!';
app.config(function($mdThemingProvider) {
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50'],
'50': 'ffffff'
});
};
}]);
app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
};
});
app.config(function($mdThemingProvider) {
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
'contrastDefaultColor': 'light',
'contrastDarkColors': ['50'],
'50': 'ffffff'
});
$mdThemingProvider.definePalette('customBlue', customBlueMap);
$mdThemingProvider.theme('default')
$mdThemingProvider.definePalette('customBlue', customBlueMap);
$mdThemingProvider.theme('default')
.primaryPalette('customBlue', {
'default': '500',
'hue-1': '50'
})
.accentPalette('red');
$mdThemingProvider.theme('input', 'default')
.primaryPalette('grey');
});
$mdThemingProvider.theme('input', 'default')
.primaryPalette('grey');
});
</script>
</script>
</body>
</body>
</html>

Write Preview
Loading…
Cancel
Save