Skip to content

Commit 0b2964a

Browse files
dewanakldewanakl
authored
Merge pull request #75 from dewanakl/fix-video
Fix video
2 parents 1eebb4d + 29dc69c commit 0b2964a

4 files changed

Lines changed: 76 additions & 58 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ <h2 class="font-esthetic text-center py-2 mb-2" style="font-size: 2.125rem;">Kis
249249
<!-- Jika tidak ingin menggunakan video, hapus seluruh tag dengan id="video-love-story" di bawah ini. -->
250250
<!-- If you don't want to use the video, remove the entire tag with id="video-love-story" below. -->
251251

252-
<div id="video-love-stroy" class="position-relative rounded-4 mb-1 pb-0" data-src="./assets/video/265501_tiny.mp4" data-vid-class="w-100 rounded-4 shadow-sm m-0 p-0">
252+
<div id="video-love-stroy" class="position-relative rounded-4 mb-2 pb-0" data-src="./assets/video/265501_tiny.mp4" data-vid-class="w-100 rounded-4 shadow-sm m-0 p-0">
253253
<div class="position-absolute d-flex flex-column justify-content-center align-items-center top-50 start-50 translate-middle w-100 h-100 bg-overlay-auto rounded-4 z-3" id="video-love-stroy-loading">
254254
<div class="progress w-25" role="progressbar" style="height: 0.5rem;" aria-label="progress bar">
255255
<div class="progress-bar" id="progress-bar-video-love-stroy" style="width: 0%;"></div>

‎js/app/guest/progress.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export const progress = (() => {
1313
let total = 0;
1414
let loaded = 0;
1515
let valid = true;
16-
let isDone = false;
1716

1817
/**
1918
* @type {Promise<void>|null}
@@ -49,7 +48,7 @@ export const progress = (() => {
4948
bar.style.width = Math.min((loaded / total) * 100, 100).toString() + '%';
5049

5150
if (loaded === total) {
52-
isDone = true;
51+
valid = false;
5352
document.dispatchEvent(new Event('undangan.progress.done'));
5453
}
5554
};
@@ -59,7 +58,7 @@ export const progress = (() => {
5958
* @returns {void}
6059
*/
6160
const invalid = (type) => {
62-
if (valid && !isDone) {
61+
if (valid) {
6362
valid = false;
6463
bar.style.backgroundColor = 'red';
6564
info.innerText = `Error loading ${type} ${showInformation()}`;

‎js/app/guest/video.js‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,26 @@ export const video = (() => {
3131
vid.className = wrap.getAttribute('data-vid-class');
3232
vid.loop = true;
3333
vid.muted = true;
34-
vid.controls = true;
34+
vid.controls = false;
3535
vid.autoplay = false;
3636
vid.playsInline = true;
3737
vid.preload = 'metadata';
38-
vid.disableRemotePlayback = true;
39-
vid.disablePictureInPicture = true;
40-
vid.controlsList = 'noremoteplayback nodownload noplaybackrate';
4138

4239
const observer = new IntersectionObserver((es) => es.forEach((e) => e.isIntersecting ? vid.play() : vid.pause()));
4340

41+
vid.addEventListener('error', () => progress.invalid('video'));
42+
vid.addEventListener('loadedmetadata', () => {
43+
const height = vid.getBoundingClientRect().width * (vid.videoHeight / vid.videoWidth);
44+
vid.style.height = `${height}px`;
45+
wrap.style.height = `${height}px`;
46+
});
47+
4448
/**
4549
* @param {Response} res
4650
* @returns {Promise<Response>}
4751
*/
4852
const resToVideo = (res) => {
4953
vid.addEventListener('loadedmetadata', () => {
50-
vid.style.removeProperty('height');
5154
document.getElementById('video-love-stroy-loading')?.remove();
5255
}, { once: true });
5356

@@ -64,56 +67,50 @@ export const video = (() => {
6467
const bar = document.getElementById('progress-bar-video-love-stroy');
6568
const inf = document.getElementById('progress-info-video-love-stroy');
6669

67-
return request(HTTP_GET, src)
68-
.withCancel(new Promise((re) => vid.addEventListener('undangan.video.prefetch', re, { once: true })))
69-
.default({ 'Range': 'bytes=0-1' })
70-
.then((res) => {
71-
vid.dispatchEvent(new Event('undangan.video.prefetch'));
70+
return request(HTTP_GET, src).withNoBody().default({ 'Range': 'bytes=0-1' }).then((res) => {
7271

73-
if (res.status === HTTP_STATUS_OK) {
74-
wrap.appendChild(vid);
75-
return Promise.resolve();
76-
}
72+
if (res.status === HTTP_STATUS_OK) {
73+
vid.preload = 'none';
74+
vid.src = util.escapeHtml(src);
75+
wrap.appendChild(vid);
7776

78-
if (res.status !== HTTP_STATUS_PARTIAL_CONTENT) {
79-
throw new Error('failed to fetch video');
80-
}
77+
return Promise.resolve();
78+
}
8179

82-
vid.addEventListener('error', () => progress.invalid('video'), { once: true });
83-
const loaded = new Promise((r) => vid.addEventListener('loadedmetadata', r, { once: true }));
80+
if (res.status !== HTTP_STATUS_PARTIAL_CONTENT) {
81+
throw new Error('failed to fetch video');
82+
}
8483

85-
vid.src = util.escapeHtml(src);
86-
wrap.appendChild(vid);
84+
const loaded = new Promise((r) => vid.addEventListener('loadedmetadata', r, { once: true }));
85+
86+
vid.src = util.escapeHtml(src);
87+
wrap.appendChild(vid);
88+
89+
return loaded;
90+
}).then(() => {
91+
vid.pause();
92+
progress.complete('video');
93+
94+
return request(HTTP_GET, src).withRetry().withProgressFunc((a, b) => {
95+
const result = Number((a / b) * 100).toFixed(0) + '%';
96+
97+
bar.style.width = result;
98+
inf.innerText = result;
99+
}).default().then(resToVideo);
100+
}).then((res) => {
101+
vid.controls = true;
102+
vid.disableRemotePlayback = true;
103+
vid.disablePictureInPicture = true;
104+
vid.controlsList = 'noremoteplayback nodownload noplaybackrate';
87105

88-
return loaded;
89-
})
90-
.then(() => {
91-
progress.complete('video');
92-
93-
const height = vid.getBoundingClientRect().width * (vid.videoHeight / vid.videoWidth);
94-
vid.style.height = `${height}px`;
95-
96-
return request(HTTP_GET, src)
97-
.withProgressFunc((a, b) => {
98-
const result = Number((a / b) * 100).toFixed(0) + '%';
99-
100-
bar.style.width = result;
101-
inf.innerText = result;
102-
})
103-
.withRetry()
104-
.default()
105-
.then(resToVideo)
106-
.then((v) => {
107-
vid.load();
108-
observer.observe(vid);
109-
return v;
110-
})
111-
.catch((err) => {
112-
bar.style.backgroundColor = 'red';
113-
inf.innerText = `Error loading video`;
114-
console.error(err);
115-
});
116-
});
106+
vid.load();
107+
observer.observe(vid);
108+
return res;
109+
}).catch((err) => {
110+
bar.style.backgroundColor = 'red';
111+
inf.innerText = `Error loading video`;
112+
console.error(err);
113+
});
117114
};
118115

119116
if (!window.isSecureContext) {
@@ -125,10 +122,10 @@ export const video = (() => {
125122
return c.del(src).then(fetchBasic).then((r) => c.set(src, r));
126123
}
127124

128-
progress.complete('video');
129125
return resToVideo(res).then(() => {
130126
wrap.appendChild(vid);
131127
observer.observe(vid);
128+
progress.complete('video');
132129
});
133130
});
134131
};

‎js/connection/request.js‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ export const request = (method, path) => {
136136
let reqRetry = 0;
137137
let reqDelay = 0;
138138
let reqAttempts = 0;
139+
let reqNoBody = false;
139140
let reqForceCache = false;
140141

141142
/**
@@ -168,6 +169,15 @@ export const request = (method, path) => {
168169
* @returns {Promise<Response>}
169170
*/
170171
const wrapperFetch = () => window.fetch(input, req).then(async (res) => {
172+
if (reqNoBody) {
173+
ac.abort();
174+
return new Response(null, {
175+
status: res.status,
176+
statusText: res.statusText,
177+
headers: new Headers(res.headers),
178+
});
179+
}
180+
171181
if (!res.ok || !callbackFunc) {
172182
return res;
173183
}
@@ -201,7 +211,7 @@ export const request = (method, path) => {
201211
});
202212
});
203213

204-
if (reqTtl === 0 || !window.isSecureContext) {
214+
if (reqTtl === 0 || !window.isSecureContext || reqNoBody) {
205215
return wrapperFetch();
206216
}
207217

@@ -219,7 +229,7 @@ export const request = (method, path) => {
219229
}));
220230
};
221231

222-
if (reqRetry === 0 && reqDelay === 0) {
232+
if (reqRetry === 0 || reqDelay === 0) {
223233
return abstractFetch();
224234
}
225235

@@ -343,10 +353,22 @@ export const request = (method, path) => {
343353
return this;
344354
},
345355
/**
356+
* @param {number} [ttl=21600000]
346357
* @returns {ReturnType<typeof request>}
347358
*/
348-
withForceCache() {
359+
withForceCache(ttl = 1000 * 60 * 60 * 6) {
349360
reqForceCache = true;
361+
if (reqTtl === 0) {
362+
reqTtl = ttl;
363+
}
364+
365+
return this;
366+
},
367+
/**
368+
* @returns {ReturnType<typeof request>}
369+
*/
370+
withNoBody() {
371+
reqNoBody = true;
350372

351373
return this;
352374
},

0 commit comments

Comments
 (0)