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

improved client with reconnect, slider works sorta

Browse Source
master
Jing Sun 9 years ago
parent c923b6358d
commit ead6d5533f
1 changed files with 136 additions and 66 deletions
Show Stats Download Patch File Download Diff File

202
client/static/index.html
Unescape View File

@ -74,6 +74,38 @@ margin-bottom: 1px; }
.status-container { .status-container {
height: 50px; 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> </style>
<meta charset="utf-8"> <meta charset="utf-8">
@ -88,13 +120,16 @@ height: 50px;
</head> </head>
<body layout="row" ng-controller="MpvRemote"> <body layout="row" ng-controller="MpvRemote">
<div id="overlay" class="overlay">
</div>
<div layout="column" class="relative" layout-fill role="main"> <div layout="column" class="relative" layout-fill role="main">
<md-toolbar> <md-toolbar>
<div class="md-toolbar-tools"> <div class="md-toolbar-tools">
<h3> <h3>
mpv remote control mpv remote
</h3> </h3>
<md-chips><md-chip>{{connectionStatus}}</md-chip></md-chips>
<span flex></span> <span flex></span>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon> <ng-md-icon icon="more_vert"></ng-md-icon>
@ -105,12 +140,14 @@ height: 50px;
<md-content flex md-scroll-y> <md-content flex md-scroll-y>
<ui-view layout="column" layout-fill layout-padding> <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> <section layout="row" layout-align="center center" layout-wrap>
<md-button class="md-fab" aria-label="Play" ng-click=""> <md-button class="md-fab" aria-label="Play" ng-click="">
<md-icon class="material-icons" ng-hide="isPlaying" ng-click="togglePlay()">play_arrow</md-icon> <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="togglePlay()">pause</md-icon> <md-icon class="material-icons" ng-show="isPlaying" ng-click="pause()">pause</md-icon>
</md-button> </md-button>
<md-slider flex="" min="0" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider"> <md-slider flex="" min="0" ng-change="onDurationChange()" max="{{totalDurationSeconds}}" ng-model="currentDurationSeconds" aria-label="Progress" id="progress-slider">
</md-slider> </md-slider>
</section> </section>
<label layout="column" layout-align="center center">{{currentDurationSeconds | toMinSec}}/{{totalDurationSeconds | toMinSec}}</label> <label layout="column" layout-align="center center">{{currentDurationSeconds | toMinSec}}/{{totalDurationSeconds | toMinSec}}</label>
@ -168,6 +205,15 @@ height: 50px;
<script src="http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.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 closeOverlay() {
document.getElementById('overlay').style.height = "0%";
}
var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']); var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
app.filter('toMinSec', function(){ app.filter('toMinSec', function(){
return function(input){ return function(input){
@ -187,77 +233,101 @@ var showStatus = function(text) {
$timeout(function() {$scope.status = ''; }, 2000); $timeout(function() {$scope.status = ''; }, 2000);
}; };
var seek = function(seconds) { // Commands
var direction = seconds < 0 ? "Back" : "Forward"; var seekCommand = function(targetDuration) {
$http({ return {
method: 'GET', command: 'seek',
url: '/seek/' + seconds seekValue: targetDuration
}).then(function successCallback(response) { };
showStatus(direction + ": Success");
}, function errorCallback(response) {
showStatus(direction + ": Error");
});
}; };
var changeVolumeCommand = function(targetVolume) {
var volume = function(delta) { return {
var direction = delta < 0 ? "down" : "up"; command: 'changeVolume',
$http({ seekValue: targetDuration
method: 'GET', };
url: '/volume/' + delta
}).then(function successCallback(response) {
showStatus("Volume " + direction + ": Success");
}, function errorCallback(response) {
showStatus("Volume " + direction + ": Error");
});
}; };
var chapterCommand = function(isForward) {
var chapter = function(isNext) { var direction = isForward ? 'forward' : 'backward';
var direction = isNext ? "Next" : "Previous"; return {
var delta = isNext ? 1 : -1; command: 'seekChapter',
$http({ direction: direction
method: 'GET', };
url: '/seekChapter/' + delta
}).then(function successCallback(response) {
showStatus(direction + " chapter: Success");
}, function errorCallback(response) {
showStatus(direction + " chapter: Error");
});
}; };
var playCommand = { command: 'play' };
var pauseCommand = { command: 'pause' };
// --------------------------------------------------------- // ---------------------------------------------------------
$scope.status = ''; $scope.status = '';
$scope.currentDurationSeconds = 50; $scope.currentDurationSeconds = 0;
$scope.totalDurationSeconds = 530; $scope.totalDurationSeconds = 1;
$scope.isPlaying = true; $scope.isPlaying = false;
$scope.fileName = '';
$scope.connectionStatus = '';
$scope.alert = ''; $scope.alert = '';
$scope.previousChapter = function() { chapter(false) };
$scope.nextChapter = function() { chapter(true) }; // Socket stuff
$scope.back = function() { seek(-10) }; //var socket = new WebSocket('ws://echo.websocket.org');
$scope.togglePlay = function() { var socket;
$scope.isPlaying = !$scope.isPlaying; var connect = function() {
socket = new WebSocket('ws://192.168.1.42:8000');
$http({ socket.onmessage = function(event) {
method: 'GET', console.log(event.data);
url: '/playpause' var serverMessage = JSON.parse(event.data);
}).then(function successCallback(response) { if (serverMessage.type === 'status') {
showStatus("Toggle play: Success"); updateState(serverMessage);
}, function errorCallback(response) { }
showStatus("Toggle play: Error"); }
}); 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();
};
}; };
$scope.forward = function() { seek(10) }; 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.$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() {};
$scope.play = function() {
$scope.isPlaying = true;
sendCommand(playCommand);
};
$scope.pause = function() {
$scope.isPlaying = false;
sendCommand(pauseCommand);
};
$scope.forward = function() {};
$scope.volumeUp = function() { volume(5) }; $scope.volumeUp = function() { volume(5) };
$scope.volumeDown = function() { volume(-5) }; $scope.volumeDown = function() { volume(-5) };
$scope.toggleMute = function() { $scope.toggleMute = function() { };
$http({
method: 'GET',
url: '/muteunmute'
}).then(function successCallback(response) {
showStatus("Toggle mute: Success");
}, function errorCallback(response) {
showStatus("Toggle mute: Error");
});
};
$scope.showListBottomSheet = function($event) { $scope.showListBottomSheet = function($event) {
$scope.alert = ''; $scope.alert = '';

Write Preview
Loading…
Cancel
Save