Monorepo for Tangled
appview/pages: load up hls.js to render videos from bsky posts in homepage
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jun 29, 2026, 2:46 PM +0100)
9f7f20dc
698036da
+45
-3
+45
-3
appview/pages/templates/timeline/home.html
+45
-3
appview/pages/templates/timeline/home.html
···
19
19
<!-- Additional SEO -->
20
20
<meta name="description" content="The next-generation social coding platform. Host repositories on your infrastructure with knots, use stacked pull requests, and run CI with spindles." />
21
21
<link rel="canonical" href="https://tangled.org" />
22
+
23
+
<!-- hls.js: play bluesky video embeds -->
24
+
<script>
25
+
document.addEventListener('DOMContentLoaded', () => {
26
+
const videos = document.querySelectorAll('video[data-hls]');
27
+
if (!videos.length) return;
28
+
29
+
const attach = () => {
30
+
videos.forEach((video) => {
31
+
const src = video.dataset.hls;
32
+
if (video.canPlayType('application/vnd.apple.mpegurl')) {
33
+
// safari can play HLS natively
34
+
video.src = src;
35
+
} else if (window.Hls && Hls.isSupported()) {
36
+
const hls = new Hls();
37
+
hls.loadSource(src);
38
+
hls.attachMedia(video);
39
+
}
40
+
});
41
+
};
42
+
43
+
// only fetch hls.js when a browser actually needs it
44
+
const needsHls = Array.from(videos).some(
45
+
(v) => !v.canPlayType('application/vnd.apple.mpegurl')
46
+
);
47
+
if (!needsHls) {
48
+
attach();
49
+
return;
50
+
}
51
+
52
+
const script = document.createElement('script');
53
+
script.src = '/static/hls.min.js';
54
+
script.onload = attach;
55
+
document.head.appendChild(script);
56
+
});
57
+
</script>
22
58
{{ end }}
23
59
24
60
···
475
511
</div>
476
512
</a>
477
513
{{ else if .Embed.EmbedVideo_View }}
478
-
<div class="rounded overflow-hidden bg-gray-100 dark:bg-gray-700 aspect-video flex items-center justify-center">
479
-
<span class="text-gray-500 dark:text-gray-400 text-sm">Video embed</span>
480
-
</div>
514
+
<video
515
+
class="rounded w-full h-auto max-h-[32rem] bg-black border border-gray-200 dark:border-gray-700"
516
+
controls
517
+
preload="none"
518
+
playsinline
519
+
{{ with .Embed.EmbedVideo_View.Thumbnail }}poster="{{ . }}"{{ end }}
520
+
{{ with .Embed.EmbedVideo_View.Alt }}aria-label="{{ . }}"{{ end }}
521
+
data-hls="{{ .Embed.EmbedVideo_View.Playlist }}"
522
+
></video>
481
523
{{ end }}
482
524
{{ end }}
483
525