-
Notifications
You must be signed in to change notification settings - Fork 0
/
list.html
121 lines (103 loc) · 3.14 KB
/
list.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
<!doctype html5>
<html>
<head>
<title>Video Test - List</title>
<style type="text/css">
h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
font-family: 'Verdana', 'Tahoma';
}
.container {
width: 75%;
margin: auto;
}
#player {
max-width: 75%;
float: left;
}
.comment-container {
display: inline-block;
width: 24%;
margin-left: 1%;
}
hr {
border: none;
border-bottom: 1px solid #ccc;
margin: .5em .5%;
}
.time {
color: #777;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<h1>Video List</h1>
<ul id='list'>
</ul>
</div>
<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>
<script type="text/javascript">
firebase.initializeApp({
apiKey: "AIzaSyBI36DZed2XcTLb6RW4jjsAHeNVvzMIHUc",
authDomain: "video-comments-b7efa.firebaseapp.com",
databaseURL: "https://video-comments-b7efa.firebaseio.com"
});
var fb = firebase.database().ref();
var list = document.getElementById('list');
fb.on('value', function(snapshot) {
var videos = snapshot.val();
console.log(videos);
for (var key in videos) {
// If the video is not in the list, make a link for it
if (videos.hasOwnProperty(key) && !videoList[key]) {
var link = document.createElement('li');
link.title = videos[key].title;
link.numComments = videos[key].data ? videos[key].data.length : 0;
link.innerHTML = '<a href="video.html#' + key + '">' + videos[key].title + '</a> - <span id="' + key + '-num">' + link.numComments + '</span> comment(s)';
videoList[key] = link;
// Otherwise, just update its num comments
} else if(videos.hasOwnProperty(key)) {
var link = videoList[key];
link.numComments = videos[key].data ? videos[key].data.length : 0;
document.getElementById(key + '-num').innerText = link.numComments;
}
sortList();
}
});
var videoList = {};
// Simple sort method to keep the list in order
var sortList = function() {
// Fill an array with the links
var sortedList = [];
for (var key in videoList) {
if (videoList.hasOwnProperty(key)) {
sortedList.push(videoList[key]);
}
}
// Sort the array, first by number of comments
// and then by title
sortedList.sort(function(a, b) {
if (a.numComments == b.numComments) {
return a.title.localeCompare(b.title);
}
return b.numComments - a.numComments;
});
// Use a fragment to append the links in bulk
var frag = document.createDocumentFragment();
for (var i = 0; i<sortedList.length; i++) {
frag.appendChild(sortedList[i]);
}
list.innerHTML = '';
list.appendChild(frag);
}
</script>
</body>
</html>