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

replaced play/pause button added duration slider

Browse Source
master
Jing Sun 9 years ago
parent 257b18a879
commit 52d3c0b1af
1 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File

28
client/static/index.html
Unescape View File

@ -88,6 +88,7 @@ height: 50px;
</head>
<body layout="row" ng-controller="MpvRemote">
<div layout="column" class="relative" layout-fill role="main">
<md-toolbar>
<div class="md-toolbar-tools">
@ -104,9 +105,15 @@ height: 50px;
<md-content flex md-scroll-y>
<ui-view layout="column" layout-fill layout-padding>
<md-button class="md-raised md-primary" ng-click="togglePlay()">
Play/Pause
<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="togglePlay()">play_arrow</md-icon>
<md-icon class="material-icons" ng-show="isPlaying" ng-click="togglePlay()">pause</md-icon>
</md-button>
<md-slider flex="" min="0" 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>
@ -142,6 +149,7 @@ height: 50px;
<md-icon class="material-icons">volume_off</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">
@ -161,7 +169,16 @@ height: 50px;
<script type="text/javascript">
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) {
seconds = '0' + seconds;
}
return minutes + ':' + seconds;
}
})
app.controller('MpvRemote', ['$scope', '$mdBottomSheet', '$http', '$timeout', function($scope, $mdBottomSheet, $http, $timeout){
// functions
@ -208,12 +225,17 @@ var chapter = function(isNext) {
};
// ---------------------------------------------------------
$scope.status = '';
$scope.currentDurationSeconds = 50;
$scope.totalDurationSeconds = 530;
$scope.isPlaying = true;
$scope.alert = '';
$scope.previousChapter = function() { chapter(false) };
$scope.nextChapter = function() { chapter(true) };
$scope.back = function() { seek(-10) };
$scope.togglePlay = function() {
$scope.isPlaying = !$scope.isPlaying;
$http({
method: 'GET',
url: '/playpause'

Write Preview
Loading…
Cancel
Save