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.
155 lines
4.7 KiB
155 lines
4.7 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;
|
|
}
|
|
|
|
md-toolbar .md-button.md-default-theme {
|
|
border-radius: 99%;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.md-toolbar-tools-bottom {
|
|
font-size: small;
|
|
}
|
|
.md-toolbar-tools-bottom :last-child {
|
|
opacity: 0.8;
|
|
}
|
|
</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>
|
|
<div class="inset" hide-sm></div>
|
|
<div role="tabpanel" id="tab1-content" aria-labelledby="tab1" layout="row" layout-align="center center">
|
|
<md-card flex-gt-sm="90" flex-gt-md="80">
|
|
<md-card-content>
|
|
<h2 ng-show=true>Current status: {{status}}</h2>
|
|
<md-button class="md-fab" aria-label="To start of file">
|
|
<<
|
|
</md-button>
|
|
<md-button class="md-fab" aria-label="Back 1 min">
|
|
<
|
|
</md-button>
|
|
|
|
<md-button class="md-fab" aria-label="Pause">
|
|
||
|
|
</md-button>
|
|
<md-button class="md-fab" aria-label="Forward 1 min" ng-click="forward()">
|
|
>
|
|
</md-button>
|
|
<md-button class="md-fab" aria-label="To end of file">
|
|
>>
|
|
</md-button>
|
|
</md-card-content>
|
|
</md-card>
|
|
</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', function($scope, $mdBottomSheet, $http){
|
|
$scope.status = 'Playing';
|
|
$scope.alert = 'FFFFF';
|
|
$scope.forward = function() {
|
|
$http({
|
|
method: 'GET',
|
|
url: '/seek/10'
|
|
}).then(function successCallback(response) {
|
|
alert("success");
|
|
}, function errorCallback(response) {
|
|
alert("fail");
|
|
});
|
|
}
|
|
$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('pink');
|
|
$mdThemingProvider.theme('input', 'default')
|
|
.primaryPalette('grey');
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|