working client

9 years ago · 35fdcdf889
parent 9a1a6f117f
commit 35fdcdf889
9 changed files with 120 additions and 6 deletions
--- a/client/static/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf
+++ b/client/static/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf
--- a/client/static/MaterialIcons.css
+++ b/client/static/MaterialIcons.css
@ -0,0 +1,20 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'), local('MaterialIcons-Regular'), url(2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+}
--- a/client/static/Roboto.css
+++ b/client/static/Roboto.css
@ -0,0 +1,24 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'), url(W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
+}
--- a/client/static/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf
+++ b/client/static/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf
--- a/client/static/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf
+++ b/client/static/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf
--- a/client/static/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf
+++ b/client/static/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf
--- a/client/static/index.html
+++ b/client/static/index.html
@ -7,10 +7,10 @@
  <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="Roboto.css"/>
  <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
  <link rel="stylesheet" href="style.css"/>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="MaterialIcons.css" rel="stylesheet">
 </head>

 <body layout="row" ng-controller="MpvRemote">
@ -70,7 +70,7 @@
          <md-button ng-hide="isMuted" class="md-fab" aria-label="Mute" ng-click="mute()">
            <md-icon class="material-icons">volume_off</md-icon>
          </md-button>
-          <md-slider flex="" min="0" ng-change="" max="130" ng-model="currentVolume" aria-label="VolumeSlider" id="volume-slider">
+          <md-slider flex="" min="0" ng-change="onVolumeChange()" max="130" ng-model="currentVolume" aria-label="VolumeSlider" id="volume-slider">
          </md-slider>
          <md-button class="md-fab" aria-label="Volume down" ng-click="volumeDown()">
            <md-icon class="material-icons">volume_down</md-icon>
@ -118,7 +118,7 @@
      return { command: 'seek', seekValue: targetDuration };
    };
    var changeVolumeCommand = function(targetVolume) {
-      return { command: 'changeVolume', seekValue: targetVolume };
+      return { command: 'volume', volume: targetVolume };
    };
    var chapterCommand = function(isForward) {
      var direction = isForward ? 'forward' : 'backward';
@ -200,8 +200,8 @@
    $scope.play = function() { sendCommand(playCommand) };
    $scope.pause = function() { sendCommand(pauseCommand) };
    $scope.forward = function() { sendCommand(seekCommand(Math.min($scope.totalDurationSeconds, $scope.currentDurationSeconds + 10))) };
-    $scope.volumeUp = function() { volume(5) };
-    $scope.volumeDown = function() { volume(-5) };
+    $scope.volumeUp = function() { sendCommand(changeVolumeCommand(Math.min(130, $scope.currentVolume + 3))) };
+    $scope.volumeDown = function() { sendCommand(changeVolumeCommand(Math.max(0, $scope.currentVolume - 3))) };
    $scope.mute = function() { sendCommand(muteCommand) };
    $scope.unmute = function() { sendCommand(unmuteCommand) };

--- a/client/static/style.css
+++ b/client/static/style.css
@ -0,0 +1,70 @@
+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;
+}
+
+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; }
+
+.dont-break-out {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+
+  -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;
+}
--- a/client/static/zN7GBFwfMP4uA6AR0HCoLQ.ttf
+++ b/client/static/zN7GBFwfMP4uA6AR0HCoLQ.ttf