You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
6.6 KiB
241 lines
6.6 KiB
<!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; }
|
|
|
|
|
|
</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"/>
|
|
|
|
</head>
|
|
|
|
<body layout="row" ng-controller="MpvRemote">
|
|
<div layout="column" class="relative" layout-fill role="main">
|
|
<md-toolbar>
|
|
<div class="md-toolbar-tools">
|
|
<h3>
|
|
mpv remote control
|
|
</h3>
|
|
<span flex></span>
|
|
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
|
|
<ng-md-icon icon="more_vert"></ng-md-icon>
|
|
</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="pause()">Pause</md-button>
|
|
|
|
<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-button>
|
|
|
|
<md-button class="md-fab" aria-label="Forward" ng-click="forward()">
|
|
>
|
|
</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="">
|
|
<
|
|
</md-button>
|
|
<md-button class="md-fab" aria-label="">
|
|
>
|
|
</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()">
|
|
-
|
|
</md-button>
|
|
<md-button class="md-fab" aria-label="Volume up" ng-click="volumeUp()">
|
|
+
|
|
</md-button>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
</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 type="text/javascript">
|
|
var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons']);
|
|
|
|
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);
|
|
};
|
|
|
|
var seek = function(seconds) {
|
|
var direction = seconds < 0 ? "Back" : "Forward";
|
|
$http({
|
|
method: 'GET',
|
|
url: '/seek/' + seconds
|
|
}).then(function successCallback(response) {
|
|
showStatus(direction + ": Success");
|
|
}, function errorCallback(response) {
|
|
showStatus(direction + ": Error");
|
|
});
|
|
};
|
|
|
|
var volume = function(delta) {
|
|
var direction = delta < 0 ? "down" : "up";
|
|
$http({
|
|
method: 'GET',
|
|
url: '/volume/' + delta
|
|
}).then(function successCallback(response) {
|
|
showStatus("Volume " + direction + ": Success");
|
|
}, function errorCallback(response) {
|
|
showStatus("Volume " + direction + ": Error");
|
|
});
|
|
};
|
|
|
|
$scope.status = '';
|
|
|
|
$scope.alert = '';
|
|
$scope.back = function() { seek(-10) };
|
|
$scope.pause = function() {};
|
|
$scope.forward = function() { seek(10) };
|
|
$scope.volumeUp = function() { volume(5) };
|
|
$scope.volumeDown = function() { volume(-5) };
|
|
|
|
$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);
|
|
};
|
|
});
|
|
|
|
app.config(function($mdThemingProvider) {
|
|
var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
|
|
'contrastDefaultColor': 'light',
|
|
'contrastDarkColors': ['50'],
|
|
'50': 'ffffff'
|
|
});
|
|
$mdThemingProvider.definePalette('customBlue', customBlueMap);
|
|
$mdThemingProvider.theme('default')
|
|
.primaryPalette('customBlue', {
|
|
'default': '500',
|
|
'hue-1': '50'
|
|
})
|
|
.accentPalette('red');
|
|
$mdThemingProvider.theme('input', 'default')
|
|
.primaryPalette('grey');
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|