-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplayer.html
190 lines (173 loc) · 5.38 KB
/
player.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8" />
<title>InfinityStream</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="table.js"></script>
</head>
<body id="player">
<header>
<h1 onclick="document.getElementsByTagName('sidebar')[0].style.display = 'block';">InfinityStream</h1>
<input id="searchBar" type="text" placeholder="Search your movie" onkeydown="search(this.value)">
</header>
<iframe src="" allowfullscreen allow="autoplay"></iframe>
<sidebar>
<ul id="labelList"></ul>
<h2>searchResult</h2>
<ul id="searchResult"></ul>
<a href="index.html">
<p>Home</p>
</a>
</sidebar>
<main></main>
</body>
<script type="text/javascript">
// load the movie in the iframe
function loadIframe() {
// get the movie name
urlParams = new URLSearchParams(window.location.search);
name = decodeURI(urlParams.get("name"));
// get the movie
movie = movies.find(movie => movie.name == name);
// if the movie doesn't exist go to the index
if (!movie) {
window.open("index.html", "_self")
}
// display the movie
document.getElementsByTagName("iframe")[0].src = movie.link;
}
loadIframe();
SELECTEDLABELS = [];
// display movies with the selected labels
function displayMovies(labels = []) {
for (var i = movies.length - 1; i >= 0; i--) {
movies[i].sort = Math.random();
}
movies.sort(function(a, b) {
return a.sort - b.sort;
});
// add movies to the page
for (var i = movies.length - 1; i >= 0; i--) {
if (labels.length == 0 || labels.every(label => movies[i].label.includes(label))) {
// create the movie
document.getElementsByTagName("main")[0].innerHTML += (`
<div class='movie' onclick="window.open(\`player.html?name=${encodeURI(movies[i].name)}\`, '_self')">
<img src='${movies[i].picture}' />
<p>${movies[i].name}</p>
</div>
`);
}
}
}
displayMovies();
// display labels
function displayLabels() {
labels = [];
for (var i = movies.length - 1; i >= 0; i--) {
label = movies[i].label.split(" ");
for (var j = label.length - 1; j >= 0; j--) {
if (labels.indexOf(label[j]) == -1) {
labels.push(label[j]);
}
}
}
for (var i = labels.length - 1; i >= 0; i--) {
document.getElementById("labelList").innerHTML += (`
<li onclick="selectLabel('${labels[i]}')" id="${labels[i]}">
${labels[i]}
</li>
`);
}
document.getElementById("labelList").innerHTML += (`
<li onclick="selectLabel('')">
all
</li>
`);
}
displayLabels();
// select or unselect a label
function selectLabel(label) {
// clear the page
document.getElementsByTagName("main")[0].innerHTML = "";
// if the label is empty, select all the labels
if (label == "") {
for (i =SELECTEDLABELS.length - 1; i >= 0; i--) {
document.getElementById(SELECTEDLABELS[i]).style.border = "solid 1px #000";
}
SELECTEDLABELS = [];
// add the label to the selected labels or remove it
} else if (SELECTEDLABELS.indexOf(label) == -1) {
SELECTEDLABELS.push(label);
document.getElementById(label).style.border = "solid 1px #fff";
} else {
SELECTEDLABELS.splice(SELECTEDLABELS.indexOf(label), 1);
document.getElementById(label).style.border = "solid 1px #000";
}
// display the movies
displayMovies(SELECTEDLABELS);
}
// levenshtein distance between two strings
function levenshteinDistance(str1, str2) {
const track = Array(str2.length + 1).fill(null).map(() =>
Array(str1.length + 1).fill(null));
for (let i = 0; i <= str1.length; i += 1) {
track[0][i] = i;
}
for (let j = 0; j <= str2.length; j += 1) {
track[j][0] = j;
}
for (let j = 1; j <= str2.length; j += 1) {
for (let i = 1; i <= str1.length; i += 1) {
const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
track[j][i] = Math.min(
track[j][i - 1] + 1,
track[j - 1][i] + 1,
track[j - 1][i - 1] + indicator,
);
}
}
return (track[str2.length][str1.length]);
}
// search a movie
function search(text) {
// clear the search result
document.getElementById("searchResult").innerHTML = "";
document.getElementsByTagName('sidebar')[0].style.display = 'block';
// for each movie
for (var i = movies.length - 1; i >= 0; i--) {
// if the movie name contains the search text
if (movies[i].name.toLowerCase().includes(text.toLowerCase())) {
// add the movie to the search result
document.getElementById("searchResult").innerHTML += (`
<li onclick="window.open(\`player.html?name=${movies[i].name}\`, '_self')">
${movies[i].name}
</li>
`);
}
// if the movie name doesn't contain the search text
else {
// if the movie name is close to the search text
if (levenshteinDistance(movies[i].name.toLowerCase(), text.toLowerCase()) < 3) {
// add the movie to the search result
document.getElementById("searchResult").innerHTML += (`
<li onclick="window.open(\`player.html?name=${movies[i].name}\`, '_self')">
${movies[i].name}
</li>
`);
}
}
}
}
// hide the sidebar when the user clicks outside of it
document.getElementsByTagName("body")[0].onclick = function() {
// if the click is outside the sidebar
if (event.target.tagName != "SIDEBAR" && event.target.tagName != "UL" && event.target.tagName != "LI" && event.target.tagName != "P" && event.target.tagName != "BUTTON" && event.target.tagName != "H1") {
// close the sidebar
document.getElementsByTagName('sidebar')[0].style.display = 'none';
}
}
</script>
</html>