120 | 
8 |
9 | ---
10 | ## Hosting
11 | Because is only a static website, you have a lot of free forever option for hosting. Use github page or cloudflare.
12 |
13 | ---
14 | ## Support
15 | It's not like i'm gonna use the money for the server or something.. only donate me if you appreciate this work
16 |
17 | 
18 |
19 | ---
20 | That's all, Bye 👋👋👋
--------------------------------------------------------------------------------
/search/search.js:
--------------------------------------------------------------------------------
1 | const searchInput = document.getElementById("search");
2 | const animeList = document.getElementById("resultContainer");
3 | const animecount = document.getElementById("animecount");
4 |
5 | const searchanime = async (searchBox) => {
6 | const res = await fetch("/search/data/anime.json");
7 | const animedata = await res.json();
8 |
9 | let fits = animedata.filter((anime) => {
10 | const regex = new RegExp(`^${searchBox}`, "gi");
11 | return (
12 | anime.name.match(regex));
13 | });
14 |
15 | if (searchBox.length === 0) {
16 | fits = [];
17 | animeList.innerHTML = "";
18 | }
19 |
20 | outputHtml(fits);
21 | };
22 |
23 | const outputHtml = (fits) => {
24 | if (fits.length > 0) {
25 | const animeFits = fits
26 | .map(
27 | (fit) =>
28 | `
29 | ${fit.name}
30 |
`
31 | )
32 | .join("");
33 | animeList.innerHTML = animeFits;
34 | }
35 | };
36 |
37 | searchInput.addEventListener("input", () => searchanime(search.value));
38 |
39 | fetch('/search/data/anime.json')
40 | .then(response => response.json())
41 | .then(data => {
42 | const count = Object.keys(data).length;
43 | console.log('Number of objects:', count);
44 | animecount.innerText = count;
45 | })
46 | .catch(error => console.error('Error fetching data:', error));
47 |
--------------------------------------------------------------------------------
/search/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
15 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/-media/fav2.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/player/plyr-hls.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", () => {
2 | const video = document.querySelector("video");
3 | const source = video.getElementsByTagName("source")[0].src;
4 |
5 | // For more options see: https://github.com/sampotts/plyr/#options
6 | // captions.update is required for captions to work with hls.js
7 | const defaultOptions = {
8 | controls: ['play-large', 'rewind', 'play', 'progress', 'current-time', 'duration', 'fast-forward', 'mute', 'volume', 'captions', 'settings', 'pip', 'fullscreen'],
9 | settings: ['captions', 'quality', 'speed', 'loop'],
10 | ratio: "16:9",
11 | tooltips: {
12 | controls: true,
13 | seek: true,
14 | },
15 | autoplay: true,
16 | };
17 |
18 | if (Hls.isSupported()) {
19 | // For more Hls.js options, see https://github.com/dailymotion/hls.js
20 | const hls = new Hls();
21 | hls.loadSource(source);
22 |
23 | // From the m3u8 playlist, hls parses the manifest and returns
24 | // all available video qualities. This is important, in this approach,
25 | // we will have one source on the Plyr player.
26 | hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
27 |
28 | // Transform available levels into an array of integers (height values).
29 | const availableQualities = hls.levels.map((l) => l.height)
30 |
31 | // Add new qualities to option
32 | defaultOptions.quality = {
33 | default: availableQualities[0],
34 | options: availableQualities,
35 | // this ensures Plyr to use Hls to update quality level
36 | forced: true,
37 | onChange: (e) => updateQuality(e),
38 | }
39 |
40 | // Initialize here
41 | const player = new Plyr(video, defaultOptions);
42 | });
43 | hls.attachMedia(video);
44 | window.hls = hls;
45 | } else {
46 | // default options with no quality update in case Hls is not supported
47 | const player = new Plyr(video, defaultOptions);
48 | }
49 |
50 | function updateQuality(newQuality) {
51 | window.hls.levels.forEach((level, levelIndex) => {
52 | if (level.height === newQuality) {
53 | console.log("Found quality match with " + newQuality);
54 | window.hls.currentLevel = levelIndex;
55 | }
56 | });
57 | }
58 | });
--------------------------------------------------------------------------------
/player/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Fast Search
16 |
17 |
19 |
20 |
21 |
22 | Total anime titles:
23 | counting.. | Last updated July, 9 2023.
24 | If any anime has been updated after this date, it will not be visible. If you are unable to find the anime you are
25 | looking for, please use the main search.
26 |
27 | Tip: Try japanese name!
Use "Shingeki no Kyojin" instead of "Attack on Titan".
28 |
78 |
80 |
82 |
83 |
84 |
94 |
95 |
96 |
97 |
98 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/oplayer/oplayer.css:
--------------------------------------------------------------------------------
1 | body,
2 | html {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | width: 100svw;
7 | height: 100vh;
8 | height: 100svh;
9 | font-family: Arial, Helvetica, sans-serif;
10 | }
11 |
12 | @media (min-width: 640px) {
13 | * {
14 | user-select: none !important;
15 | -webkit-user-select: none !important;
16 | -khtml-user-select: none !important;
17 | -moz-user-select: none !important;
18 | -ms-user-select: none !important;
19 | }
20 | }
21 |
22 | a,
23 | button,
24 | img {
25 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
26 | -webkit-tap-highlight-color: transparent !important;
27 | }
28 |
29 | button {
30 | border-radius: 0.35rem !important;
31 | }
32 |
33 | .spinner {
34 | animation: spinner 0.9s infinite linear;
35 | }
36 |
37 | @keyframes spinner {
38 | 0% {
39 | transform: rotate(0deg);
40 | }
41 |
42 | 100% {
43 | transform: rotate(360deg);
44 | }
45 | }
46 |
47 | #oplayer {
48 | width: 100% !important;
49 | height: 100% !important;
50 | }
51 |
52 | video {
53 | height: 100% !important;
54 | max-width: 100%;
55 | object-position: center;
56 | object-fit: contain !important;
57 | }
58 |
59 | /* overriding */
60 | .css-1ftojuw {
61 | --primary-color: white !important;
62 | }
63 |
64 | .css-1xk8bpn {
65 | width: calc(100% + 5px);
66 | margin-left: -2px;
67 | }
68 |
69 | .css-1gyrt30[aria-checked='true'] .css-l3w6ir {
70 | background-color: white !important;
71 | }
72 |
73 | #oplayer .css-l3w6ir::before {
74 | background-color: black;
75 | }
76 |
77 | #oplayer [aria-label='Setting'],
78 | #oplayer .playlist,
79 | #oplayer .css-fy6n4p {
80 | border-radius: 1rem;
81 | background-color: rgba(0, 0, 0, 0.75);
82 | /* backdrop-filter: blur(5px); */
83 | }
84 |
85 | #oplayer [role='menu'] {
86 | padding: 0.5rem;
87 | min-width: 18rem;
88 | }
89 |
90 | @media (min-width: 640px) {
91 | [role='menu'] {
92 | min-width: 20rem;
93 | }
94 | }
95 |
96 | @media (min-width: 1280px) {
97 | [role='menu'] {
98 | min-width: 22rem;
99 | }
100 | }
101 |
102 | [role='menuitem'] {
103 | border-radius: 0.7rem;
104 | overflow: hidden;
105 | height: 2.8rem;
106 | }
107 |
108 | [role='menuitem'] div {
109 | height: 100%;
110 | }
111 |
112 | #oplayer [role='menuitemradio'] {
113 | border-radius: 0.5rem;
114 | overflow: hidden;
115 | justify-content: start !important;
116 | gap: 1rem !important;
117 | height: 2.8rem;
118 | font-size: 0.85rem !important;
119 | }
120 |
121 | [role='menuitemradio'] svg {
122 | order: -9999 !important;
123 | -ms-flex-order: -9999 !important;
124 | display: block !important;
125 | opacity: 0;
126 | }
127 |
128 | [role='menuitemradio'][aria-checked='true'] svg {
129 | opacity: 1 !important;
130 | }
131 |
132 | [aria-label='Play'][type='button'] {
133 | background: transparent !important;
134 | }
135 |
136 | [aria-label='Play'][type='button']::before {
137 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath fill='white' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10' clip-rule='evenodd' opacity='0.4'/%3E%3Cpath fill='white' d='m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118'/%3E%3C/svg%3E");
138 | width: 4rem;
139 | height: 4rem;
140 | display: block;
141 | /* filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); */
142 | position: absolute;
143 | top: 50%;
144 | left: 50%;
145 | transform: translate(-50%, -50%);
146 | flex-shrink: 0;
147 | }
148 |
149 | @media (min-width: 1280px) {
150 | [aria-label='Play'][type='button']::before {
151 | width: 5rem;
152 | height: 5rem;
153 | }
154 | }
155 |
156 | @media (max-width: 640px) {
157 | [aria-label='Screenshot'] {
158 | display: none !important;
159 | }
160 | }
161 |
162 | #oplayer .playlist-list-item {
163 | margin: 0 0.5rem 0.5rem;
164 | border-radius: 0.7rem;
165 | border: none;
166 | }
167 |
168 | #oplayer .playlist-head {
169 | border-bottom: none;
170 | background: transparent;
171 | }
172 |
173 | .playlist-list-item-thumb,
174 | .playlist-list-item-thumb img {
175 | border-radius: 0.5rem;
176 | }
177 |
178 | .playlist-back {
179 | border-radius: 0.35rem !important;
180 | }
181 |
182 | .css-1y9tj12 {
183 | padding-top: 0.5em;
184 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | this service is no longer work! find an alternative at everythingmore.com
16 |
17 |
34 |
35 |
18 |
33 |
19 |
22 | Watch History
20 | 21 |-
23 | History empty
24 |
27 | The watch history feature can only save up to 10 lists and it is stored locally, meaning it can only be 28 | accessed on the current browser and not on any other device. If you wish to delete the watch history, 29 | you can click on Clear History, but please note that it is a permanent 30 | action and cannot be undone. 31 |
32 |
36 |
37 |
139 |
140 |
141 |
142 |
143 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-family: Open sans, Helvetica, sans-serif;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | background-color: #111;
8 | }
9 |
10 | .container {
11 | max-width: 768px;
12 | margin: 0 auto;
13 | display: flex;
14 | flex-direction: column;
15 | background: #222;
16 | }
17 |
18 | .video-container {
19 | background-color: #000;
20 | width: 100%;
21 | height: 0;
22 | padding-bottom: 56.25%;
23 | position: relative;
24 | }
25 |
26 | #player {
27 | position: absolute;
28 | top: 0;
29 | left: 0;
30 | width: 100%;
31 | height: 100%;
32 | }
33 |
34 | #videoTitle {
35 | font-weight: bold;
36 | display: block;
37 | font-size: 1.5rem;
38 | width: 100%;
39 | margin-bottom: 10px;
40 | color: #fff;
41 | }
42 |
43 | #videoDescription {
44 | margin: 15px 0px 15px 0px;
45 | font-size: 0.9rem;
46 | color: #999999;
47 | }
48 |
49 | #animeInfoContainer {
50 | background-color: #222222;
51 | padding: 0px 20px 0px 20px;
52 | }
53 |
54 | #animeInfoContainer span[id=subordub] {
55 | text-transform: uppercase;
56 | }
57 |
58 | #animeInfoContainer span[id=status] {
59 | background-color: coral;
60 | }
61 |
62 | #animeInfoContainer span {
63 | background-color: #333333;
64 | color: #fff;
65 | border-radius: 20px;
66 | padding: 5px 10px;
67 | margin-right: 2px;
68 | font-size: 0.8rem;
69 | font-weight: bold;
70 | }
71 |
72 |
73 | .container-search {
74 | display: flex;
75 | align-items: center;
76 | background-color: #222222;
77 | padding: 10px;
78 | flex-direction: row;
79 | justify-content: center;
80 | gap: 0.5rem;
81 | }
82 |
83 | .search-input {
84 | background-color: #333333;
85 | border: none;
86 | color: white;
87 | padding: 10px 20px;
88 | font-size: 1rem;
89 | flex: 1;
90 | border-radius: 5px;
91 |
92 | }
93 |
94 | .search-button {
95 | background-color: #32B4FE;
96 | color: white;
97 | border: none;
98 | padding: 10px 10px;
99 | cursor: pointer;
100 | border-radius: 5px;
101 | }
102 |
103 | .home-button {
104 | background-color: coral;
105 | color: white;
106 | border: none;
107 | padding: 10px 10px;
108 | cursor: pointer;
109 | border-radius: 5px;
110 | }
111 |
112 | .container-search svg {
113 | transform: scale(1.3);
114 | }
115 |
116 | .errorLine {
117 | display: flex;
118 | color: #fff;
119 | font-size: 0.7rem;
120 | padding: 5px 10px;
121 | background-color: #111;
122 | justify-content: center;
123 | }
124 |
125 | .errorLine a {
126 | color: #ccc;
127 | margin-left: 5px;
128 | }
129 |
130 | .select-container {
131 | display: flex;
132 | align-items: center;
133 | color: #fff;
134 | margin-bottom: 20px;
135 | }
136 |
137 | .left-text {
138 | margin-right: 10px;
139 | text-transform: uppercase;
140 | font-size: 0.9em;
141 | font-weight: bold;
142 | }
143 |
144 | #selectElement {
145 | padding: 10px 20px;
146 | border-radius: 25px;
147 | background-color: #333;
148 | color: #fff;
149 | border: none;
150 | outline: none;
151 | appearance: none;
152 | flex-grow: 1;
153 | margin-right: 10px;
154 | }
155 |
156 | #episodeButton {
157 | padding: 10px 20px;
158 | background-color: #32B4FE;
159 | color: #fff;
160 | border-radius: 25px;
161 | border: none;
162 | outline: none;
163 | cursor: pointer;
164 | font-weight: bold;
165 | text-transform: uppercase;
166 | }
167 |
168 | .container-sresult {
169 | padding: 10px 20px;
170 | display: flex;
171 | justify-content: center;
172 | align-items: center;
173 | flex-direction: column;
174 | }
175 |
176 | #animeContainer {
177 | display: grid;
178 | gap: 0.4rem;
179 | grid-template-columns: repeat(4, 24.333%);
180 | }
181 |
182 | #animeContainer>a {
183 | background-color: #1d1d1d;
184 | display: flex;
185 | color: #fff;
186 | align-items: center;
187 | flex-direction: column;
188 | border-radius: 0.2rem;
189 | text-decoration: none;
190 | cursor: pointer;
191 | }
192 |
193 | #animeContainer>a>img {
194 | width: 100%;
195 | height: 15rem;
196 | object-fit: cover;
197 | border-top-left-radius: 0.2rem;
198 | border-top-right-radius: 0.2rem;
199 | }
200 |
201 | #animeContainer>a>.label {
202 | display: flex;
203 | flex-direction: column;
204 | align-self: flex-start;
205 | overflow: hidden;
206 | padding: 0.75rem;
207 | }
208 |
209 | #animeContainer>a>.label> :is(.name, .url) {
210 | width: 100%;
211 | overflow: hidden;
212 | }
213 |
214 | #animeContainer>a>.label>.name {
215 | font-size: 0.8rem;
216 | color: #fff;
217 |
218 | -webkit-box-orient: vertical;
219 | display: block;
220 | display: -webkit-box;
221 | overflow: hidden !important;
222 | text-overflow: ellipsis;
223 | -webkit-line-clamp: 3;
224 | }
225 |
226 | #animeContainer>a>.label>.eps {
227 | font-size: 0.7rem;
228 | color: #ccc;
229 | }
230 |
231 |
232 | .fastsearchrow {
233 | display: flex;
234 | border-bottom: 1px solid #444;
235 | padding: 10px 30px;
236 | vertical-align: top;
237 | cursor: pointer;
238 | background-color: #222222;
239 | }
240 |
241 | .fastsearchrow a {
242 | color: #fff;
243 | text-decoration: none;
244 | }
245 |
246 | .fastsearchnotif {
247 | padding: 10px 50px 20px 50px;
248 | color: #999999;
249 | font-size: 0.8rem;
250 | justify-content: center;
251 | align-items: center;
252 | text-align: center;
253 | }
254 |
255 | h1.titleBig {
256 | color: #fff;
257 | display: flex;
258 | justify-content: center;
259 | margin: 50px 20px 40px 20px;
260 | text-align: center;
261 | }
262 |
263 | #resultContainer .row:nth-child(even), .fastsearchrow:nth-child(even) {
264 | background-color: #111;
265 | }
266 |
267 | #qualityContainer {
268 | display: inline;
269 | width: 100%;
270 | margin-bottom: 10px;
271 | }
272 |
273 | #qualityContainer span {
274 | padding: 0px;
275 | margin-right: 10px;
276 | background: none;
277 | text-transform: uppercase;
278 | font-size: 0.9em;
279 | font-weight: bold;
280 | }
281 |
282 | .pill-button {
283 | background-color: #333;
284 | color: #fff;
285 | border: none;
286 | padding: 5px 15px;
287 | font-size: 0.8rem;
288 | margin-right: 5px;
289 | margin-bottom: 10px;
290 | border-radius: 25px;
291 | cursor: pointer;
292 | display: inline-block;
293 | }
294 |
295 | #downloadButton {
296 | background-color: rgb(70, 79, 60);
297 | color: rgb(255, 255, 255);
298 | text-decoration: none;
299 | border: none;
300 | padding: 5px 15px;
301 | font-size: 0.8rem;
302 | margin-right: 5px;
303 | margin-bottom: 10px;
304 | border-radius: 25px;
305 | cursor: pointer;
306 | display: inline;
307 | }
308 |
309 | #serverSelect {
310 | display: inline;
311 | }
312 |
313 | #mainLoading {
314 | width: 100%;
315 | background-color: #222;
316 | display: flex;
317 | align-items: center;
318 | justify-content: center;
319 | padding: 10px 0px 20px 0px;
320 | }
321 |
322 | .modern-footer {
323 | background-color: #333;
324 | color: #fff;
325 | text-align: center;
326 | padding: 20px 0;
327 | font-size: 0.7rem;
328 | }
329 |
330 | .notif {
331 | background-color: #2E3829;
332 | color: #fff;
333 | text-align: center;
334 | padding: 10px 10px;
335 | font-size: 0.7rem;
336 | border-top: 1px solid #6A9169;
337 | border-bottom: 1px solid #6A9169;
338 | }
339 |
340 | .notif a {
341 | text-decoration: none;
342 | background-color: #6A9169;
343 | color: #2E3829;
344 | padding: 0px 5px;
345 | border-radius: 5px;
346 | margin-left: 5px;
347 | font-weight: bold;
348 | }
349 |
350 | .modern-footer .footer {
351 | display: flex;
352 | justify-content: center;
353 | align-items: center;
354 | height: 100%;
355 | }
356 |
357 | .footer a {
358 | color: #fff;
359 | text-decoration: none;
360 | font-weight: bold;
361 | margin: 0px 5px;
362 | cursor: pointer;
363 | }
364 |
365 | .counterDiv {
366 | background-color: rgb(16, 12, 12);
367 | display: flex;
368 | justify-content: center;
369 | align-items: center;
370 | height: 100%;
371 | margin: 0 auto;
372 | width: 100%;
373 | padding: 10px 0px 0px 0px;
374 | }
375 |
376 | .counterDiv img {
377 | filter: invert();
378 | transform: scale(0.3);
379 | }
380 |
381 | .recent-button {
382 | background-color: #1d1d1d;
383 | color: #fff;
384 | font-weight: bold;
385 | border: 0;
386 | width: 100%;
387 | padding: 20px 20px;
388 | border-radius: 5px;
389 | margin-top: -10px;
390 | }
391 |
392 | img {
393 | display: none;
394 | }
395 |
396 | .container img {
397 | display: block !important;
398 | }
399 |
400 | .app-container {
401 | display: flex;
402 | flex-direction: column;
403 | justify-content: center;
404 | align-items: center;
405 | padding: 40px 20px 20px 20px;
406 | background-color: #222222;
407 | color: #fff;
408 |
409 | }
410 |
411 | .app-container a {
412 | display: block;
413 | background-color: #32B4FE;
414 | padding: 5px 10px;
415 | border-radius: 5px;
416 | color: #fff;
417 | text-decoration: none;
418 | font-weight: bold;
419 | margin: 10px 0px 0px 0px;
420 | }
421 |
422 | .app-container a#windows {
423 | background-color: #6A9169;
424 | }
425 |
426 | .app-container a:hover {
427 | opacity: 0.9;
428 | }
429 |
430 | .app-container span {
431 | margin: 20px 30px 0px 30px;
432 | color: #999999;
433 | font-size: 12px;
434 | text-align: center;
435 | }
436 |
437 | .extraBtn {
438 | display: flex;
439 | justify-content: space-around;
440 | gap: 0.4rem;
441 | margin-bottom: 1rem;
442 | }
443 |
444 | .extraBtn button {
445 | flex: 1;
446 | padding: 0.3rem;
447 | background-color: #333;
448 | color: #fff;
449 | border: 0;
450 | border-radius: 30px;
451 | height: 30px;
452 | cursor: pointer;
453 | }
454 |
455 | #dim {
456 | position: absolute;
457 | display: flex;
458 | justify-content: center;
459 | align-items: center;
460 | width: 100%;
461 | height: 100vh;
462 | z-index: 1;
463 | background-color: rgba(0, 0, 0, .8);
464 | }
465 |
466 |
467 | .history {
468 | position: absolute;
469 | background-color: #222;
470 | max-width: 480px;
471 | margin: 0px 20px;
472 | padding: 10px 20px;
473 | border-radius: 10px;
474 | color: #fff;
475 | box-shadow: 3px 3px 3px #111;
476 | }
477 |
478 | .historyHead {
479 | display: flex;
480 | margin-bottom: 10px;
481 | }
482 |
483 | .historyHead h3 {
484 | flex: 1;
485 | }
486 |
487 | .historyHead button {
488 | background-color: #6A9169;
489 | color: #fff;
490 | border: 0;
491 | padding: 5px 10px;
492 | border-radius: 5px;
493 | }
494 |
495 | .historyList {
496 | list-style: '- ';
497 | padding-left: 20px;
498 | }
499 |
500 | .historyList .date {
501 | color: #8B8B8B;
502 | font-size: small;
503 | }
504 |
505 | .historyList a {
506 | color: #ccc;
507 | text-decoration: none;
508 | }
509 |
510 |
511 | .historyList a:hover {
512 | color: #fff;
513 | }
514 |
515 | p.historyDetail {
516 | color: #b7b7b7;
517 | padding: 10px 0px;
518 | font-size: small;
519 | }
520 |
521 | p.historyDetail a {
522 | color: #fff;
523 | cursor: pointer;
524 | }
525 |
526 |
527 | @media screen and (max-width: 768px) {
528 | .video-title {
529 | font-size: 1rem;
530 | }
531 |
532 | #animeContainer {
533 | display: grid;
534 | gap: 0.5rem;
535 | grid-template-columns: repeat(2, 49.555%);
536 |
537 | }
538 |
539 | #animeContainer>a {
540 | display: flex;
541 | gap: 0.5rem;
542 | padding-right: 0rem;
543 | flex-direction: column;
544 | }
545 |
546 | #animeContainer>a>img {
547 | width: 100%;
548 | object-fit: cover;
549 | border-radius: 0.2rem;
550 | border-bottom-right-radius: 0px;
551 | border-bottom-left-radius: 0px;
552 | }
553 |
554 |
555 | #animeContainer>a>.label {
556 | display: flex;
557 | flex-direction: column;
558 | align-self: flex-start;
559 | overflow: hidden;
560 | padding: 0px 0px 10px 10px;
561 | }
562 | }
563 |
564 | #watchingContainer {
565 | font-size: 20px;
566 | position: absolute;
567 | background-color: black;
568 | color: white;
569 | padding: 10px;
570 | z-index: 1;
571 | display: none;
572 | left: 50%;
573 | transform: translateX(-50%);
574 |
575 | }
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const queryInput = document.getElementById("queryInput");
2 | const homeBtn = document.getElementById("homeBtn");
3 | const searchBtn = document.getElementById("searchBtn");
4 | const recentBtn = document.getElementById("recentBtn");
5 | const resultContainer = document.getElementById("animeContainer");
6 | const sresultContainer = document.querySelector(".container-sresult");
7 |
8 | const animeInfoContainer = document.getElementById("animeInfoContainer");
9 | const watchContainer = document.getElementById("qualityContainer");
10 | const mainLoading = document.getElementById("mainLoading");
11 | const pageTitle = document.getElementById("title");
12 | const videoPlayer = document.getElementById("player")
13 | const watchBtn = document.getElementById("episodeButton");
14 |
15 | var dataTitle;
16 | var dataEpisode;
17 | var dataURL;
18 |
19 | const apiEndpoint = "api.consumet.org";
20 |
21 | // Randomly set player iframes to these video onLoad
22 | var youtubeLinks = [
23 | "https://www.youtube.com/embed/3yOVIxOHiaw",
24 | "https://www.youtube.com/embed/nfAPAvGGH4g",
25 | "https://www.youtube.com/embed/S7W135mNveI",
26 | "https://www.youtube.com/embed/X1M69l7ZGlw",
27 | "https://www.youtube.com/embed/IUtFAblCT1o",
28 | "https://www.youtube.com/embed/Wi6tTATXnaw",
29 | "https://www.youtube.com/embed/5xkzzO5nNow",
30 | "https://www.youtube.com/embed/PgAswqBtrUk",
31 | "https://www.youtube.com/embed/uwwU55zBYlQ"
32 | ];
33 | var randomLink = youtubeLinks[Math.floor(Math.random() * youtubeLinks.length)];
34 | videoPlayer.src = randomLink;
35 |
36 | // Check URL parameters
37 | function updateUrl(newUrl) {
38 | window.history.pushState({}, '', newUrl);
39 | }
40 |
41 | // Check if the site is visited using android app
42 | const urlParams = new URLSearchParams(window.location.search);
43 | let appParam = urlParams.get('app');
44 | if (appParam == 'true') {
45 | const playerContainer = document.getElementById("playerContainer");
46 | playerContainer.style.display = "none";
47 |
48 | const footerContainer = document.getElementById("footerContainer");
49 | footerContainer.style.display = "none";
50 | }
51 |
52 | // Detect if searchBtn is clicked
53 | searchBtn.addEventListener("click", async function () {
54 | animeInfoContainer.style.display = `none`;
55 | sresultContainer.style.display = `flex`;
56 | resultContainer.style.display = `grid`;
57 | mainLoading.style.display = "flex";
58 | pageTitle.innerHTML = `astream - watch anime`
59 | recentBtn.style.display = "none";
60 | resultContainer.innerHTML = "";
61 |
62 | updateUrl(`/`);
63 |
64 | const query = queryInput.value;
65 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/${query}?page=1`);
66 | const data = await res.json();
67 | displayResults(data.results);
68 | });
69 |
70 | // Confirm search by using an ENTER button
71 | async function getSearchByEnter(event) {
72 | if (event.keyCode === 13) {
73 | animeInfoContainer.style.display = `none`;
74 | sresultContainer.style.display = `flex`;
75 | resultContainer.style.display = `grid`;
76 | mainLoading.style.display = "flex";
77 | pageTitle.innerHTML = `astream - watch anime`
78 | recentBtn.style.display = "none";
79 | resultContainer.innerHTML = "";
80 |
81 | updateUrl(`/`);
82 |
83 | const query = queryInput.value;
84 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/${query}?page=1`);
85 | const data = await res.json();
86 | displayResults(data.results);
87 | }
88 | }
89 |
90 | // Detect if homeBtn is clicked
91 | homeBtn.addEventListener("click", function () {
92 | if (appParam == 'true') {
93 | window.location.href = "/?app=true";
94 | } else {
95 | window.location.href = "/";
96 | }
97 | });
98 |
99 |
100 | // Detect if recentBtn is clicked
101 | recentBtn.addEventListener("click", async function () {
102 | sresultContainer.style.display = `flex`;
103 | resultContainer.style.display = `grid`;
104 | mainLoading.style.display = "flex";
105 | recentBtn.style.display = "none";
106 |
107 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/recent-episodes`);
108 | const data = await res.json();
109 | displayRecent(data.results);
110 | });
111 |
112 |
113 | // Display Recent Result
114 | function displayRecent(results) {
115 | sresultContainer.style.display = `flex`;
116 | resultContainer.innerHTML = "";
117 | mainLoading.style.display = "none";
118 |
119 | results.forEach(result => {
120 | const resultDiv = document.createElement("a");
121 | subType = `
39 |
42 |
43 |
44 |
45 |
65 |
67 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
89 |
90 |
91 |
117 |
118 |
121 |
122 |
138 | SUB
`;
122 | episodeNumber = `${result.episodeNumber}`;
123 | if (!episodeNumber.length) {
124 | episodeNumber = '???';
125 | }
126 |
127 | resultDiv.innerHTML = `
128 |
130 | ${result.title.replace("(Dub)", "")}
131 | Episode ${episodeNumber} (Subbed)
132 |
133 | `;
134 |
135 | resultDiv.addEventListener("click", async function () {
136 | mainLoading.style.display = "flex";
137 | resultContainer.style.display = `none`;
138 |
139 | updateUrl(`/?anime=${result.id}`);
140 | dataURL = `${result.id}`
141 |
142 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/info/${result.id}`);
143 | const data = await res.json();
144 | displayAnimeInfo(data);
145 | });
146 | resultContainer.appendChild(resultDiv);
147 | });
148 | }
149 |
150 | // Display Search Result
151 | function displayResults(results) {
152 | resultContainer.innerHTML = "";
153 | sresultContainer.style.display = `flex`;
154 | mainLoading.style.display = "none";
155 |
156 | results.forEach(result => {
157 | const resultDiv = document.createElement("a");
158 | subType = `${result.subOrDub}
`;
159 | releaseDate = `${result.releaseDate.replace("Released: ", "")}`;
160 | if (!releaseDate.length) {
161 | releaseDate = '???';
162 | }
163 | resultDiv.innerHTML = `
164 |
166 | ${result.title.replace("(Dub)", "")}
167 | Year ${releaseDate} (${result.subOrDub.charAt(0).toUpperCase() + result.subOrDub.slice(1)}bed)
168 |
169 | `;
170 |
171 | resultDiv.addEventListener("click", async function () {
172 | mainLoading.style.display = "flex";
173 | resultContainer.style.display = `none`;
174 |
175 | updateUrl(`/?anime=${result.id}`);
176 | dataURL = `${result.id}`
177 |
178 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/info/${result.id}`);
179 | const data = await res.json();
180 | displayAnimeInfo(data);
181 | });
182 | resultContainer.appendChild(resultDiv);
183 | });
184 | }
185 |
186 | //Check if theres Anime Parameters
187 | let animeParam = urlParams.get('anime');
188 | fetchAnimeInfo()
189 | async function fetchAnimeInfo() {
190 | if (typeof animeParam !== 'undefined' && animeParam !== null) {
191 | recentBtn.style.display = "none";
192 | mainLoading.style.display = "flex";
193 |
194 | dataURL = `${animeParam}`
195 |
196 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/info/${animeParam}`);
197 | const data = await res.json();
198 | displayAnimeInfo(data);
199 | }
200 | }
201 |
202 |
203 | // Display Anime Info
204 | function displayAnimeInfo(data) {
205 | animeInfoContainer.style.display = `block`;
206 | resultContainer.style.display = `none`;
207 | sresultContainer.style.display = `none`;
208 | watchContainer.style.display = "none";
209 | mainLoading.style.display = "none";
210 |
211 | const title = document.getElementById("videoTitle");
212 | title.innerHTML = `${data.title}`;
213 | dataTitle = `${data.title}`;
214 | pageTitle.innerHTML = `${data.title.toLowerCase()} - astream`
215 |
216 | const status = document.getElementById("status");
217 | status.innerHTML = `${data.status}`;
218 |
219 | const subordub = document.getElementById("subordub");
220 | subordub.innerHTML = `${data.subOrDub}`;
221 |
222 | const type = document.getElementById("type");
223 | type.innerHTML = `${data.type}`;
224 |
225 | const description = document.getElementById("videoDescription");
226 | description.innerHTML = `${data.description.replace("\n", "")}`; 227 | 228 | const episodeSelect = document.getElementById("selectElement"); 229 | episodeSelect.innerHTML = ""; 230 | 231 | data.episodes.sort((a, b) => b.number - a.number); 232 | data.episodes.forEach((episode) => { 233 | const option = document.createElement("option"); 234 | option.value = episode.id; 235 | option.innerHTML = `Episode ${episode.number}`; 236 | episodeSelect.appendChild(option); 237 | }); 238 | 239 | watchBtn.addEventListener("click", async function () { 240 | const serverSelect = document.getElementById("serverSelect"); 241 | serverSelect.innerHTML = ""; 242 | watchContainer.style.display = "none"; 243 | mainLoading.style.display = "flex"; 244 | 245 | var selectElement = document.getElementById("selectElement"); 246 | var selectedOption = selectElement.options[selectElement.selectedIndex]; 247 | dataEpisode = selectedOption.innerText; 248 | addHistory(); 249 | 250 | const episodeId = document.getElementById("selectElement").value; 251 | const res = await fetch(`https://${apiEndpoint}/anime/gogoanime/watch/${episodeId}`); 252 | const episodeData = await res.json(); 253 | displayWatchInfo(episodeData); 254 | }); 255 | } 256 | 257 | // Display Episode List 258 | function displayWatchInfo(episodeData) { 259 | watchContainer.style.display = "block"; 260 | mainLoading.style.display = "none"; 261 | 262 | const download_button = document.getElementById("downloadButton"); 263 | download_button.href = episodeData.download; 264 | 265 | const serverSelect = document.getElementById("serverSelect"); 266 | serverSelect.innerHTML = ""; 267 | episodeData.sources.forEach((stream) => { 268 | const option = document.createElement("button"); 269 | option.value = stream.url; 270 | option.className = "pill-button"; 271 | let streamquality = stream.quality.replace("default", "auto"); 272 | option.innerHTML = `${streamquality}`; 273 | serverSelect.appendChild(option); 274 | }); 275 | 276 | const resoBtn = document.querySelectorAll(".pill-button"); 277 | for (let i = 0; i < resoBtn.length; i++) { 278 | resoBtn[i].addEventListener("click", function () { 279 | const serverUrl = this.value; 280 | let proxyweb = 'https://cute-cyan-millipede-coat.cyclic.app/' 281 | // let selectedServer = serverUrl.replace('https://', ''); 282 | // selectedServer = selectedServer.replace('http://', ''); 283 | let selectedServer = serverUrl; 284 | 285 | if (appParam == 'true') { 286 | updateUrl(`?playInApp=${selectedServer}`); 287 | } else { 288 | videoPlayer.src = `/player/?url=${selectedServer}`; 289 | } 290 | }); 291 | }; 292 | } 293 | 294 | // Donate Alert 295 | const spanElement = document.getElementById("spanDonate"); 296 | let contentDonate = [ 297 | "Support this website by making a donation starting from 1$!DONATE", 298 | "Dukung website ini dengan cara berdonasi mulai dari Rp1000!DONASI" 299 | ]; 300 | let indexDonate = 0; 301 | setInterval(function () { 302 | spanElement.innerHTML = contentDonate[indexDonate]; 303 | indexDonate = (indexDonate + 1) % contentDonate.length; 304 | }, 5000); 305 | 306 | // Format unicode date to a readable one (** hours ago) 307 | function getTimeDifference(date) { 308 | const currentDate = new Date(); 309 | const timestamp = new Date(date); 310 | const difference = currentDate - timestamp; 311 | 312 | const seconds = Math.floor(difference / 1000); 313 | const minutes = Math.floor(seconds / 60); 314 | const hours = Math.floor(minutes / 60); 315 | const days = Math.floor(hours / 24); 316 | const weeks = Math.floor(days / 7); 317 | const months = Math.floor(days / 30); 318 | const years = Math.floor(days / 365); 319 | 320 | let output; 321 | if (seconds < 60) { 322 | output = `${seconds} second${seconds === 1 ? '' : 's'} ago`; 323 | } else if (minutes < 60) { 324 | output = `${minutes} minute${minutes === 1 ? '' : 's'} ago`; 325 | } else if (hours < 24) { 326 | output = `${hours} hour${hours === 1 ? '' : 's'} ago`; 327 | } else if (days < 7) { 328 | output = `${days} day${days === 1 ? '' : 's'} ago`; 329 | } else if (weeks < 4) { 330 | output = `${weeks} week${weeks === 1 ? '' : 's'} ago`; 331 | } else if (months < 12) { 332 | output = `${months} month${months === 1 ? '' : 's'} ago`; 333 | } else { 334 | output = `${years} year${years === 1 ? '' : 's'} ago`; 335 | } 336 | 337 | return output; 338 | } 339 | 340 | // Eps Button Navigation 341 | const epsSelect = document.getElementById('selectElement'); 342 | function firstEps() { 343 | epsSelect.selectedIndex = epsSelect.options.length - 1; 344 | } 345 | function prevEps() { 346 | if (epsSelect.selectedIndex < epsSelect.options.length - 1) { 347 | epsSelect.selectedIndex++; 348 | } 349 | } 350 | function nextEps() { 351 | if (epsSelect.selectedIndex > 0) { 352 | epsSelect.selectedIndex--; 353 | } 354 | } 355 | function lastEps() { 356 | epsSelect.selectedIndex = 0; 357 | } 358 | 359 | // Hiding the Dim 360 | function closeHistory() { 361 | let dimDiv = document.getElementById('dim'); 362 | dimDiv.style.display = 'none'; 363 | } 364 | closeHistory() 365 | 366 | function showHistory() { 367 | let dimDiv = document.getElementById('dim'); 368 | dimDiv.style.display = 'flex'; 369 | historyReload(); 370 | window.scrollTo({ 371 | top: 0, 372 | behavior: 'smooth' 373 | }); 374 | 375 | } 376 | 377 | 378 | // Adding a History 379 | function addHistory() { 380 | let newDate = new Date(); 381 | 382 | const notes = { 383 | date: newDate, 384 | title: dataTitle + ' ' + dataEpisode, 385 | url: dataURL 386 | } 387 | 388 | let local = JSON.parse(localStorage.getItem('history')); 389 | 390 | if (local == null) { 391 | const arr = []; 392 | arr.push(notes); 393 | localStorage.setItem('history', JSON.stringify(arr)) 394 | } else { 395 | // Check if the number of items in the array is already 50 396 | if (local.length >= 10) { 397 | // Remove the oldest item from the array 398 | local.shift(); 399 | } 400 | local.push(notes); 401 | localStorage.setItem('history', JSON.stringify(local)) 402 | } 403 | } 404 | 405 | // Reloading the history data 406 | const historyLists = document.getElementById('historyList'); 407 | var timedifference; 408 | function historyReload() { 409 | let array = JSON.parse(localStorage.getItem('history')); 410 | 411 | if (array != null) { 412 | historyLists.innerHTML = ""; 413 | for (let i = array.length - 1; i >= 0; i--) { 414 | timedifference = getTimeDifference(array[i].date) 415 | historyLists.innerHTML += ` 416 |
`),s.style.left=`${l}%`,R(e)&&["mouseenter","mouseleave"].includes(e.type)&&a("mouseenter"===e.type)},timeUpdate(e){const t=!H(this.elements.display.duration)&&this.config.invertTime;We.updateTimeDisplay.call(this,this.elements.display.currentTime,t?this.duration-this.currentTime:this.currentTime,t),e&&"timeupdate"===e.type&&this.media.seeking||We.updateProgress.call(this,e)},durationUpdate(){if(!this.supported.ui||!this.config.invertTime&&this.currentTime)return;if(this.duration>=2**32)return ae(this.elements.display.currentTime,!0),void ae(this.elements.progress,!0);H(this.elements.inputs.seek)&&this.elements.inputs.seek.setAttribute("aria-valuemax",this.duration);const e=H(this.elements.display.duration);!e&&this.config.displayDuration&&this.paused&&We.updateTimeDisplay.call(this,this.elements.display.currentTime,this.duration),e&&We.updateTimeDisplay.call(this,this.elements.display.duration,this.duration),this.config.markers.enabled&&We.setMarkers.call(this),We.updateSeekTooltip.call(this)},toggleMenuButton(e,t){ae(this.elements.settings.buttons[e],!t)},updateSetting(e,t,i){const s=this.elements.settings.panels[e];let n=null,a=t;if("captions"===e)n=this.currentTrack;else{if(n=W(i)?this[e]:i,W(n)&&(n=this.config[e].default),!W(this.options[e])&&!this.options[e].includes(n))return void this.debug.warn(`Unsupported value of '${n}' for ${e}`);if(!this.config[e].options.includes(n))return void this.debug.warn(`Disabled value of '${n}' for ${e}`)}if(H(a)||(a=s&&s.querySelector('[role="menu"]')),!H(a))return;this.elements.settings.buttons[e].querySelector(`.${this.config.classNames.menu.value}`).innerHTML=We.getLabel.call(this,e,n);const l=a&&a.querySelector(`[value="${n}"]`);H(l)&&(l.checked=!0)},getLabel(e,t){switch(e){case"speed":return 1===t?He.get("normal",this.config):`${t}×`;case"quality":if($(t)){const e=He.get(`qualityLabel.${t}`,this.config);return e.length?e:`${t}p`}return Oe(t);case"captions":return Ye.getLabel.call(this);default:return null}},setQualityMenu(e){if(!H(this.elements.settings.panels.quality))return;const t="quality",i=this.elements.settings.panels.quality.querySelector('[role="menu"]');D(e)&&(this.options.quality=Ce(e).filter((e=>this.config.quality.options.includes(e))));const s=!W(this.options.quality)&&this.options.quality.length>1;if(We.toggleMenuButton.call(this,t,s),ie(i),We.checkMenu.call(this),!s)return;const n=e=>{const t=He.get(`qualityBadge.${e}`,this.config);return t.length?We.createBadge.call(this,t):null};this.options.quality.sort(((e,t)=>{const i=this.config.quality.options;return i.indexOf(e)>i.indexOf(t)?1:-1})).forEach((e=>{We.createMenuItem.call(this,{value:e,list:i,type:t,title:We.getLabel.call(this,"quality",e),badge:n(e)})})),We.updateSetting.call(this,t,i)},setCaptionsMenu(){if(!H(this.elements.settings.panels.captions))return;const e="captions",t=this.elements.settings.panels.captions.querySelector('[role="menu"]'),i=Ye.getTracks.call(this),s=Boolean(i.length);if(We.toggleMenuButton.call(this,e,s),ie(t),We.checkMenu.call(this),!s)return;const n=i.map(((e,i)=>({value:i,checked:this.captions.toggled&&this.currentTrack===i,title:Ye.getLabel.call(this,e),badge:e.language&&We.createBadge.call(this,e.language.toUpperCase()),list:t,type:"language"})));n.unshift({value:-1,checked:!this.captions.toggled,title:He.get("disabled",this.config),list:t,type:"language"}),n.forEach(We.createMenuItem.bind(this)),We.updateSetting.call(this,e,t)},setSpeedMenu(){if(!H(this.elements.settings.panels.speed))return;const e="speed",t=this.elements.settings.panels.speed.querySelector('[role="menu"]');this.options.speed=this.options.speed.filter((e=>e>=this.minimumSpeed&&e<=this.maximumSpeed));const i=!W(this.options.speed)&&this.options.speed.length>1;We.toggleMenuButton.call(this,e,i),ie(t),We.checkMenu.call(this),i&&(this.options.speed.forEach((i=>{We.createMenuItem.call(this,{value:i,list:t,type:e,title:We.getLabel.call(this,"speed",i)})})),We.updateSetting.call(this,e,t))},checkMenu(){const{buttons:e}=this.elements.settings,t=!W(e)&&Object.values(e).some((e=>!e.hidden));ae(this.elements.settings.menu,!t)},focusFirstMenuItem(e,t=!1){if(this.elements.settings.popup.hidden)return;let i=e;H(i)||(i=Object.values(this.elements.settings.panels).find((e=>!e.hidden)));const s=i.querySelector('[role^="menuitem"]');ue.call(this,s,t)},toggleMenu(e){const{popup:t}=this.elements.settings,i=this.elements.buttons.settings;if(!H(t)||!H(i))return;const{hidden:s}=t;let n=s;if(O(e))n=e;else if(F(e)&&"Escape"===e.key)n=!1;else if(R(e)){const s=j(e.composedPath)?e.composedPath()[0]:e.target,a=t.contains(s);if(a||!a&&e.target!==i&&n)return}i.setAttribute("aria-expanded",n),ae(t,!n),le(this.elements.container,this.config.classNames.menu.open,n),n&&F(e)?We.focusFirstMenuItem.call(this,null,!0):n||s||ue.call(this,i,F(e))},getMenuSize(e){const t=e.cloneNode(!0);t.style.position="absolute",t.style.opacity=0,t.removeAttribute("hidden"),e.parentNode.appendChild(t);const i=t.scrollWidth,s=t.scrollHeight;return te(t),{width:i,height:s}},showMenuPanel(e="",t=!1){const i=this.elements.container.querySelector(`#plyr-settings-${this.id}-${e}`);if(!H(i))return;const s=i.parentNode,n=Array.from(s.children).find((e=>!e.hidden));if(me.transitions&&!me.reducedMotion){s.style.width=`${n.scrollWidth}px`,s.style.height=`${n.scrollHeight}px`;const e=We.getMenuSize.call(this,i),t=e=>{e.target===s&&["width","height"].includes(e.propertyName)&&(s.style.width="",s.style.height="",be.call(this,s,z,t))};fe.call(this,s,z,t),s.style.width=`${e.width}px`,s.style.height=`${e.height}px`}ae(n,!0),ae(i,!1),We.focusFirstMenuItem.call(this,i,t)},setDownloadUrl(){const e=this.elements.buttons.download;H(e)&&e.setAttribute("href",this.download)},create(e){const{bindMenuItemShortcuts:t,createButton:i,createProgress:s,createRange:n,createTime:a,setQualityMenu:l,setSpeedMenu:o,showMenuPanel:r}=We;this.elements.controls=null,D(this.config.controls)&&this.config.controls.includes("play-large")&&this.elements.container.appendChild(i.call(this,"play-large"));const c=Z("div",ne(this.config.selectors.controls.wrapper));this.elements.controls=c;const h={class:"plyr__controls__item"};return Ce(D(this.config.controls)?this.config.controls:[]).forEach((l=>{if("restart"===l&&c.appendChild(i.call(this,"restart",h)),"rewind"===l&&c.appendChild(i.call(this,"rewind",h)),"play"===l&&c.appendChild(i.call(this,"play",h)),"fast-forward"===l&&c.appendChild(i.call(this,"fast-forward",h)),"progress"===l){const t=Z("div",{class:`${h.class} plyr__progress__container`}),i=Z("div",ne(this.config.selectors.progress));if(i.appendChild(n.call(this,"seek",{id:`plyr-seek-${e.id}`})),i.appendChild(s.call(this,"buffer")),this.config.tooltips.seek){const e=Z("span",{class:this.config.classNames.tooltip},"00:00");i.appendChild(e),this.elements.display.seekTooltip=e}this.elements.progress=i,t.appendChild(this.elements.progress),c.appendChild(t)}if("current-time"===l&&c.appendChild(a.call(this,"currentTime",h)),"duration"===l&&c.appendChild(a.call(this,"duration",h)),"mute"===l||"volume"===l){let{volume:t}=this.elements;if(H(t)&&c.contains(t)||(t=Z("div",X({},h,{class:`${h.class} plyr__volume`.trim()})),this.elements.volume=t,c.appendChild(t)),"mute"===l&&t.appendChild(i.call(this,"mute")),"volume"===l&&!Y.isIos){const i={max:1,step:.05,value:this.config.volume};t.appendChild(n.call(this,"volume",X(i,{id:`plyr-volume-${e.id}`})))}}if("captions"===l&&c.appendChild(i.call(this,"captions",h)),"settings"===l&&!W(this.config.settings)){const s=Z("div",X({},h,{class:`${h.class} plyr__menu`.trim(),hidden:""}));s.appendChild(i.call(this,"settings",{"aria-haspopup":!0,"aria-controls":`plyr-settings-${e.id}`,"aria-expanded":!1}));const n=Z("div",{class:"plyr__menu__container",id:`plyr-settings-${e.id}`,hidden:""}),a=Z("div"),l=Z("div",{id:`plyr-settings-${e.id}-home`}),o=Z("div",{role:"menu"});l.appendChild(o),a.appendChild(l),this.elements.settings.panels.home=l,this.config.settings.forEach((i=>{const s=Z("button",X(ne(this.config.selectors.buttons.settings),{type:"button",class:`${this.config.classNames.control} ${this.config.classNames.control}--forward`,role:"menuitem","aria-haspopup":!0,hidden:""}));t.call(this,s,i),fe.call(this,s,"click",(()=>{r.call(this,i,!1)}));const n=Z("span",null,He.get(i,this.config)),l=Z("span",{class:this.config.classNames.menu.value});l.innerHTML=e[i],n.appendChild(l),s.appendChild(n),o.appendChild(s);const c=Z("div",{id:`plyr-settings-${e.id}-${i}`,hidden:""}),h=Z("button",{type:"button",class:`${this.config.classNames.control} ${this.config.classNames.control}--back`});h.appendChild(Z("span",{"aria-hidden":!0},He.get(i,this.config))),h.appendChild(Z("span",{class:this.config.classNames.hidden},He.get("menuBack",this.config))),fe.call(this,c,"keydown",(e=>{"ArrowLeft"===e.key&&(e.preventDefault(),e.stopPropagation(),r.call(this,"home",!0))}),!1),fe.call(this,h,"click",(()=>{r.call(this,"home",!1)})),c.appendChild(h),c.appendChild(Z("div",{role:"menu"})),a.appendChild(c),this.elements.settings.buttons[i]=s,this.elements.settings.panels[i]=c})),n.appendChild(a),s.appendChild(n),c.appendChild(s),this.elements.settings.popup=n,this.elements.settings.menu=s}if("pip"===l&&me.pip&&c.appendChild(i.call(this,"pip",h)),"airplay"===l&&me.airplay&&c.appendChild(i.call(this,"airplay",h)),"download"===l){const e=X({},h,{element:"a",href:this.download,target:"_blank"});this.isHTML5&&(e.download="");const{download:t}=this.config.urls;!U(t)&&this.isEmbed&&X(e,{icon:`logo-${this.provider}`,label:this.provider}),c.appendChild(i.call(this,"download",e))}"fullscreen"===l&&c.appendChild(i.call(this,"fullscreen",h))})),this.isHTML5&&l.call(this,Le.getQualityOptions.call(this)),o.call(this),c},inject(){if(this.config.loadSprite){const e=We.getIconUrl.call(this);e.cors&&Ve(e.url,"sprite-plyr")}this.id=Math.floor(1e4*Math.random());let e=null;this.elements.controls=null;const t={id:this.id,seektime:this.config.seekTime,title:this.config.title};let i=!0;j(this.config.controls)&&(this.config.controls=this.config.controls.call(this,t)),this.config.controls||(this.config.controls=[]),H(this.config.controls)||_(this.config.controls)?e=this.config.controls:(e=We.create.call(this,{id:this.id,seektime:this.config.seekTime,speed:this.speed,quality:this.quality,captions:Ye.getLabel.call(this)}),i=!1);let s;i&&_(this.config.controls)&&(e=(e=>{let i=e;return Object.entries(t).forEach((([e,t])=>{i=_e(i,`{${e}}`,t)})),i})(e)),_(this.config.selectors.controls.container)&&(s=document.querySelector(this.config.selectors.controls.container)),H(s)||(s=this.elements.container);if(s[H(e)?"insertAdjacentElement":"insertAdjacentHTML"]("afterbegin",e),H(this.elements.controls)||We.findElements.call(this),!W(this.elements.buttons)){const e=e=>{const t=this.config.classNames.controlPressed;e.setAttribute("aria-pressed","false"),Object.defineProperty(e,"pressed",{configurable:!0,enumerable:!0,get:()=>oe(e,t),set(i=!1){le(e,t,i),e.setAttribute("aria-pressed",i?"true":"false")}})};Object.values(this.elements.buttons).filter(Boolean).forEach((t=>{D(t)||q(t)?Array.from(t).filter(Boolean).forEach(e):e(t)}))}if(Y.isEdge&&K(s),this.config.tooltips.controls){const{classNames:e,selectors:t}=this.config,i=`${t.controls.wrapper} ${t.labels} .${e.hidden}`,s=ce.call(this,i);Array.from(s).forEach((e=>{le(e,this.config.classNames.hidden,!1),le(e,this.config.classNames.tooltip,!0)}))}},setMediaMetadata(){try{"mediaSession"in navigator&&(navigator.mediaSession.metadata=new window.MediaMetadata({title:this.config.mediaMetadata.title,artist:this.config.mediaMetadata.artist,album:this.config.mediaMetadata.album,artwork:this.config.mediaMetadata.artwork}))}catch(e){}},setMarkers(){var e,t;if(!this.duration||this.elements.markers)return;const i=null===(e=this.config.markers)||void 0===e||null===(t=e.points)||void 0===t?void 0:t.filter((({time:e})=>e>0&&e
`)}this.showImageAtCurrentTime()}})),e(this,"endMove",(()=>{this.toggleThumbContainer(!1,!0)})),e(this,"startScrubbing",(e=>{(I(e.button)||!1===e.button||0===e.button)&&(this.mouseDown=!0,this.player.media.duration&&(this.toggleScrubbingContainer(!0),this.toggleThumbContainer(!1,!0),this.showImageAtCurrentTime()))})),e(this,"endScrubbing",(()=>{this.mouseDown=!1,Math.ceil(this.lastTime)===Math.ceil(this.player.media.currentTime)?this.toggleScrubbingContainer(!1):ye.call(this.player,this.player.media,"timeupdate",(()=>{this.mouseDown||this.toggleScrubbingContainer(!1)}))})),e(this,"listeners",(()=>{this.player.on("play",(()=>{this.toggleThumbContainer(!1,!0)})),this.player.on("seeked",(()=>{this.toggleThumbContainer(!1)})),this.player.on("timeupdate",(()=>{this.lastTime=this.player.media.currentTime}))})),e(this,"render",(()=>{this.elements.thumb.container=Z("div",{class:this.player.config.classNames.previewThumbnails.thumbContainer}),this.elements.thumb.imageContainer=Z("div",{class:this.player.config.classNames.previewThumbnails.imageContainer}),this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);const e=Z("div",{class:this.player.config.classNames.previewThumbnails.timeContainer});this.elements.thumb.time=Z("span",{},"00:00"),e.appendChild(this.elements.thumb.time),this.elements.thumb.imageContainer.appendChild(e),H(this.player.elements.progress)&&this.player.elements.progress.appendChild(this.elements.thumb.container),this.elements.scrubbing.container=Z("div",{class:this.player.config.classNames.previewThumbnails.scrubbingContainer}),this.player.elements.wrapper.appendChild(this.elements.scrubbing.container)})),e(this,"destroy",(()=>{this.elements.thumb.container&&this.elements.thumb.container.remove(),this.elements.scrubbing.container&&this.elements.scrubbing.container.remove()})),e(this,"showImageAtCurrentTime",(()=>{this.mouseDown?this.setScrubbingContainerSize():this.setThumbContainerSizeAndPos();const e=this.thumbnails[0].frames.findIndex((e=>this.seekTime>=e.startTime&&this.seekTime<=e.endTime)),t=e>=0;let i=0;this.mouseDown||this.toggleThumbContainer(t),t&&(this.thumbnails.forEach(((t,s)=>{this.loadedImages.includes(t.frames[e].text)&&(i=s)})),e!==this.showingThumb&&(this.showingThumb=e,this.loadImage(i)))})),e(this,"loadImage",((e=0)=>{const t=this.showingThumb,i=this.thumbnails[e],{urlPrefix:s}=i,n=i.frames[t],a=i.frames[t].text,l=s+a;if(this.currentImageElement&&this.currentImageElement.dataset.filename===a)this.showImage(this.currentImageElement,n,e,t,a,!1),this.currentImageElement.dataset.index=t,this.removeOldImages(this.currentImageElement);else{this.loadingImage&&this.usingSprites&&(this.loadingImage.onload=null);const i=new Image;i.src=l,i.dataset.index=t,i.dataset.filename=a,this.showingThumbFilename=a,this.player.debug.log(`Loading image: ${l}`),i.onload=()=>this.showImage(i,n,e,t,a,!0),this.loadingImage=i,this.removeOldImages(i)}})),e(this,"showImage",((e,t,i,s,n,a=!0)=>{this.player.debug.log(`Showing thumb: ${n}. num: ${s}. qual: ${i}. newimg: ${a}`),this.setImageSizeAndOffset(e,t),a&&(this.currentImageContainer.appendChild(e),this.currentImageElement=e,this.loadedImages.includes(n)||this.loadedImages.push(n)),this.preloadNearby(s,!0).then(this.preloadNearby(s,!1)).then(this.getHigherQuality(i,e,t,n))})),e(this,"removeOldImages",(e=>{Array.from(this.currentImageContainer.children).forEach((t=>{if("img"!==t.tagName.toLowerCase())return;const i=this.usingSprites?500:1e3;if(t.dataset.index!==e.dataset.index&&!t.dataset.deleting){t.dataset.deleting=!0;const{currentImageContainer:e}=this;setTimeout((()=>{e.removeChild(t),this.player.debug.log(`Removing thumb: ${t.dataset.filename}`)}),i)}}))})),e(this,"preloadNearby",((e,t=!0)=>new Promise((i=>{setTimeout((()=>{const s=this.thumbnails[0].frames[e].text;if(this.showingThumbFilename===s){let n;n=t?this.thumbnails[0].frames.slice(e):this.thumbnails[0].frames.slice(0,e).reverse();let a=!1;n.forEach((e=>{const t=e.text;if(t!==s&&!this.loadedImages.includes(t)){a=!0,this.player.debug.log(`Preloading thumb filename: ${t}`);const{urlPrefix:e}=this.thumbnails[0],s=e+t,n=new Image;n.src=s,n.onload=()=>{this.player.debug.log(`Preloaded thumb filename: ${t}`),this.loadedImages.includes(t)||this.loadedImages.push(t),i()}}})),a||i()}}),300)})))),e(this,"getHigherQuality",((e,t,i,s)=>{if(e