-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (67 loc) · 4.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html ng-app="codycast" ng-csp="">
<head>
<meta charset='utf-8' name='viewport' content='width=device-width, height=device-height, initial-scale=1'>
<title>Codycast</title>
<!--Chromecast-->
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
<!--CSS-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/app.css" type='text/css'>
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<!--JS-->
<script src="js/lib/jquery-2.1.3.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</head>
<body id="controller" ng-controller="pageController">
<div id="menu-disconnect">
<!-- <div id="menu"><span class="glyphicon glyphicon-align-justify"></span></div> -->
<div id="disconnect" ng-if="cast.session" ng-click="disconnect()"><span class="glyphicon glyphicon-remove"></span></div>
</div>
<div id="title" class='row' title="Made by Cody Heffner.">
<h1>{{pageState.title}}</h1>
<h2 ng-if='pageState.device'>{{cast.playerState}} on {{pageState.device}}</h2>
</div>
<div id="select-file-container" class='row' ng-if='!pageState.selected' title="Select a video to play.">
<span class="glyphicon glyphicon-play-circle">
<input id="select-file" type="file" accept="video/*" ng-model="selectedVideo" onchange="angular.element(this).scope().handlePlayVideo(this)" />
</div>
<div id="queue" ng-if="pageState.selected">
<div class='title row'>
<h3 class='col-xs-9'>Queue</h3>
<div id="add-to-queue" class='col-xs-3' title="Select video to play after the current one.">
<span class="glyphicon glyphicon-plus"></span>
<!-- <input id="select-another-file" type="file" accept="video/*" ng-model="selectedVideo" onchange="angular.element(this).scope().addQueueItem(this)" /> -->
</div>
</div>
<div id="queue-item" class='row' ng-class="{active : $index === cast.currentMediaIndex}" ng-if="queue.files.length > 0" ng-repeat='title in queue.files'>
<!-- <div id="removeQueueItem" style="width:50px;height:50px;background-color:red;" ng-click="removeQueueItem(video.index)"></div> -->
<h4 ng-if="$index < 10">{{$index+1}}) {{title}}</h4>
</div>
</div>
<div id="playback-buttons" class="row" ng-if='pageState.selected && pageState.currentTime'>
<div class='emptySpace col-xs-3'></div>
<div id="back30" class='col-xs-2' ng-click="seek(pageState.currentTime-30)" title="Go back 30 seconds."><span class="glyphicon glyphicon-step-backward"></span></div>
<div id="playPause" class='col-xs-2' ng-click="playPause()">
<div id="play" class="playPause" ng-if='cast.playerState != "PLAYING"'><span class="glyphicon glyphicon-play"></span></div>
<div id="pause" class="playPause" ng-if='cast.playerState === "PLAYING"'><span class="glyphicon glyphicon-pause"></span></div>
</div>
<!-- <div id="stop" ng-click="stop()" ng-if='pageState.selected'>stop</div> -->
<div id="forward30" class='col-xs-2' ng-click="seek(pageState.currentTime+30)" title="Go forward 30 seconds."><span class="glyphicon glyphicon-step-forward"></span></div>
<div class='emptySpace col-xs-3'></div>
</div>
<div id="status" class='row' ng-if='pageState.selected && pageState.currentTime'>
<div id="currentTime" class='col-xs-2'>{{humanReadableTime(pageState.currentTime)}}</div>
<input type="range" class='col-xs-8' min='0' value='{{pageState.currentTime}}' max='{{cast.session.media[cast.currentMediaIndex].media.duration}}' ng-mousedown='seeking()' ng-mouseup='seek(pageState.currentTime)' ng-model='pageState.currentTime'>
<!-- <input type="range" class='col-xs-8'> -->
<div id="maxTime" class='col-xs-2'>{{humanReadableTime(cast.session.media[cast.currentMediaIndex].media.duration)}}</div>
</div>
<div id="volume" class='row'><span class="glyphicon glyphicon-volume-up"></span></div>
</body>
</html>
<!--
<script src="http://www.gstatic.com/cv/js/sender/v1/cast_sender.js" type="text/javascript"></script>
-->