(Experimental) external video integration using hls.js

Dockerfile

@@ -9,6 +9,7 @@ ADD pkgs/ /app/pkgs/
 ADD testdata/ /app/testdata/
 ADD templates/ /app/templates/
 ADD leaflet/ /app/leaflet/
+ADD hlsjs/ /app/hlsjs/
 ADD dbmigrations/ /app/dbmigrations/
 ADD strings/ /app/strings/
 

externalVideo.go

@@ -0,0 +1,12 @@
+package main
+
+import "embed"
+
+const videoPlaylistParam = "videoplaylist"
+
+//go:embed hlsjs/*
+var hlsjsFiles embed.FS
+
+func (p *post) hasVideoPlaylist() bool {
+	return p.firstParameter(videoPlaylistParam) != ""
+}

httpMiddlewares.go

@@ -59,7 +59,7 @@ func (a *goBlog) securityHeaders(next http.Handler) http.Handler {
 		w.Header().Set("X-Content-Type-Options", "nosniff")
 		w.Header().Set("X-Frame-Options", "SAMEORIGIN")
 		w.Header().Set("X-Xss-Protection", "1; mode=block")
-		w.Header().Set("Content-Security-Policy", "default-src 'self'"+cspDomains+"; img-src 'self' "+cspDomains+" data:")
+		w.Header().Set("Content-Security-Policy", "default-src 'self' blob:"+cspDomains+"; img-src 'self'"+cspDomains+" data:")
 		next.ServeHTTP(w, r)
 	})
 }

httpRouters.go

@@ -104,6 +104,9 @@ func (a *goBlog) otherRoutesRouter(r chi.Router) {
 	r.With(noIndexHeader).Get("/tiles/{s}/{z}/{x}/{y}.png", a.proxyTiles())
 	r.With(cacheLoggedIn, a.cacheMiddleware, noIndexHeader).HandleFunc("/leaflet/*", a.serveFs(leafletFiles, "/-/"))
 
+	// Hlsjs
+	r.With(cacheLoggedIn, a.cacheMiddleware, noIndexHeader).HandleFunc("/hlsjs/*", a.serveFs(hlsjsFiles, "/-/"))
+
 	// Reactions
 	if a.reactionsEnabled() {
 		r.Get("/reactions", a.getReactions)

templates/assets/js/video.js

@@ -0,0 +1,32 @@
+(function () {
+    function loadVideo() {
+        // Get video div element
+        let videoDivEl = document.getElementById('video')
+
+        // External Video URL
+        let videoUrl = videoDivEl.dataset.url
+
+        // Create video element
+        let videoEl = document.createElement('video')
+        videoEl.controls = true
+        videoEl.classList.add('fw')
+
+        // Load video
+        if (Hls.isSupported()) {
+            let hls = new Hls()
+            hls.loadSource(videoUrl)
+            hls.attachMedia(videoEl)
+        } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+            videoEl.src = videoUrl
+        }
+
+        // Add video element
+        videoDivEl.appendChild(videoEl)
+    }
+
+    // JS
+    let script = document.createElement('script')
+    script.src = '/-/hlsjs/hls.js?v=1.1.5'
+    script.onload = loadVideo
+    document.head.appendChild(script)
+})()

ui.go

@@ -906,6 +906,8 @@ func (a *goBlog) renderPost(hb *htmlBuilder, rd *renderData) {
 				a.postHtmlToWriter(hb, p, false)
 				hb.writeElementClose("div")
 			}
+			// External Videp
+			a.renderPostVideo(hb, p)
 			// GPS Track
 			a.renderPostGPX(hb, p, rd.Blog)
 			// Taxonomies

uiComponents.go

@@ -481,3 +481,13 @@ func (a *goBlog) renderPostReactions(hb *htmlBuilder, p *post) {
 	hb.writeElementOpen("script", "defer", "", "src", a.assetFileName("js/reactions.js"))
 	hb.writeElementClose("script")
 }
+
+func (a *goBlog) renderPostVideo(hb *htmlBuilder, p *post) {
+	if !p.hasVideoPlaylist() {
+		return
+	}
+	hb.writeElementOpen("div", "id", "video", "data-url", p.firstParameter(videoPlaylistParam))
+	hb.writeElementClose("div")
+	hb.writeElementOpen("script", "defer", "", "src", a.assetFileName("js/video.js"))
+	hb.writeElementClose("script")
+}