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

54
client/static/index.html
Unescape View File

@ -75,7 +75,7 @@ margin-bottom: 1px; }
height: 50px;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
@ -84,10 +84,11 @@ height: 50px;
<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>
<body layout="row" ng-controller="MpvRemote">
<div layout="column" class="relative" layout-fill role="main">
<md-toolbar>
<div class="md-toolbar-tools">
@ -100,13 +101,19 @@ height: 50px;
</md-button>
</div>
</md-toolbar>
<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
</md-button>
<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>
@ -118,7 +125,7 @@ height: 50px;
<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()">
@ -129,7 +136,7 @@ height: 50px;
</md-button>
</section>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<div class="label">Volume</div>
<md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
@ -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">
@ -152,7 +160,7 @@ height: 50px;
</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>
@ -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
@ -204,16 +221,21 @@ var chapter = function(isNext) {
showStatus(direction + " chapter: Success");
}, function errorCallback(response) {
showStatus(direction + " chapter: Error");
});
});
};
// ---------------------------------------------------------
// ---------------------------------------------------------
$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'
@ -236,7 +258,7 @@ $scope.toggleMute = function() {
showStatus("Toggle mute: Error");
});
};
$scope.showListBottomSheet = function($event) {
$scope.alert = '';
$mdBottomSheet.show({
@ -248,12 +270,12 @@ $scope.toggleMute = function() {
});
};
}]);
app.controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
$scope.items = [
{ name: 'Share', icon: 'share' },
];
$scope.listItemClick = function($index) {
var clickedItem = $scope.items[$index];
$mdBottomSheet.hide(clickedItem);
@ -278,6 +300,6 @@ app.config(function($mdThemingProvider) {
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save