-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
125 lines (120 loc) · 6.6 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html ng-app="main">
<head>
<script src="../node_modules/howler/dist/howler.js"></script>
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="../node_modules/angularjs-slider/dist/rzslider.js"></script>
<script type="text/javascript" src="../node_modules/ng-slider/dist/ng-slider.min.js"></script>
<script src="scripts/setup.js"></script>
<script src="scripts/controllers/recents-controller.js"></script>
<script src="scripts/controllers/podcast-view-controller.js"></script>
<script src="scripts/controllers/controls-controller.js"></script>
<script src="scripts/script.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
<link rel="stylesheet" href="../node_modules/angularjs-slider/dist/rzslider.css">
<link rel="stylesheet" href="styles/main-style.css">
<link rel="stylesheet" href="styles/new-podcast-style.css">
<link rel="stylesheet" href="styles/now-playing-style.css">
<link rel="stylesheet" href="styles/podcast-view.css">
<link rel="stylesheet" type="text/css" href="../node_modules/ng-slider/dist/css/ng-slider.min.css">
</head>
<body>
<div id="main-containter" ng-keydown="onKeyDown($event)" ng-controller="podcast-view" ng-show="open">
<div id="podcast-stuff">
<img id="podcast-exit" ng-src="./res/podcast-exit-icon.png" ng-click="open=false"></img>
<div id="overlay" ng-mouseenter="blur = 'blur'; visible = 'visible'" ng-mouseleave="blur = 'no-blur'; visible = 'invisible'">
<img id="podcast-image" ng-src="{{imageUrl}}" ng-click="blur = 'no-blur'" ng-class="blur"></img>
<button id="remove-button" ng-show="visible == 'visible'" ng-click="removeClicked(title)">remove</button>
</div>
<div id="podcast-info">
<div id="podcast-view-title" >
{{title}}
</div>
<br>
<br>
<div id="description">
{{description}}
</div>
</div>
</div>
<div id="podcast-episodes">
<input id="episode-filter" ng-model="entryFilter" type="text" placeholder="Filter"></input>
<div right-click class="entry-data" ng-repeat="entry in entries | filter: entryFilter">
<img class="play-button" ng-click="episodeClicked(entry)" src="./res/list-play-button.png">
</img>
<div class="entry-name" onclick="start(this)">
<div class="marquee">{{entry.title}}</div>
</div>
<img class="entry-option" src="./res/options-button.png"
onmouseover="this.src='./res/options-button-mouseover.png'"
onmouseout="this.src='./res/options-button.png'"></img>
<div convert class="entry-duration"></div>
</div>
</div>
</div>
<div class="side-scroll" id="recents-row" ng-controller="recents-controller">
<div id="floating">
<div id="title">Reach</div>
<input id="filter" ng-model="query" ng-keydown="filterKeyDown($event)" ng-keyup="filterKeyUp($event)" type="text" placeholder="Filter">
<button id="add" class="top-button" ng-click="addButtonClicked()"><img class="button-icon" src="./res/plus-icon.png"></img></button>
<div id="new-podcast">
<input id="url-input" type="text" placeholder="RSS URL" ng-keydown="keyDown($event)" ng-show="clicked || edit" ng-blur="edit = false;" ng-model="inputUrl"></input>
</div>
</div>
<br>
<br>
<div class="row-item" ng-repeat="podcast in recents | filter: query as filtered track by $index">
<img class="row-podcast-image" ng-click="imageClicked(podcast.title,podcast.author,podcast.imageUrl,podcast.description,podcast.entries)" ng-src="{{podcast.imageUrl}}"></img>
<div class="row-podcast-title">{{podcast.title}}</div>
<div class="row-podcast-author">{{podcast.author}}</div>
</div>
<div class="info-message" id="no-recents" ng-show="recents.length == 0">
<span class="message">Uh Oh!<i data-feather="watch"></i></span>
<div id="explanation">It looks like you haven't listened to any podcasts yet</div>
<br>
<br>
<br>
<div id="directions">To start listening, click the '+' symbol in the top right corner, and paste the URL of the RSS feed of your favorite podcast</div>
</div>
<div class="info-message" id="no-results" ng-show="filtered.length == 0 && recents.length >= 1">
<div class="message">Yikes!</div>
<div id="explanation">There seems to be nothing here</div>
<br>
<br>
<br>
<div id="directions">Try adding the RSS feed of the podcast you're looking for by clicking the '+' button in the top right corner</div>
</div>
</div>
<div id="now-playing-row" ng-controller="controls" ng-keydown="keyDown($event)">
<img id="now-playing" ng-src="{{playingImage}}"></img>
<rzslider id="seek" rz-slider-model="slider.options.value" rz-slider-options="slider.options"></rzslider>
<div id="bottom-right">
<div id="info">
<div id="now-playing-name">{{playingTitle}}</div>
<br>
<br>
<div id="now-playing-author">{{playingAuthor}}</div>
</div>
<div id="control-side">
<div id="controls">
<div class="control-button-container">
<img class="control-button" id="previous-button" ng-click="nextClicked()" ng-src="./res/control-buttons/next-icon.png"></img>
</div>
<div class="control-button-container">
<img class="control-button" id="pause-button" ng-click="pauseClicked()" ng-src="./res/control-buttons/play-icon.png"></img>
</div>
<div class="control-button-container">
<img class="control-button" id="next-button" ng-click="previousClicked()" ng-src="./res/control-buttons/previous-icon.png"></img>
</div>
</div>
<div id="volume-box">
<rzslider id="volume-slider" rz-slider-model="volume.options.value" rz-slider-options="volume.options"></rzslider>
</div>
</div>
</div>
</div>
</body>
</html>