Browse Source

(Experimental) external video integration using hls.js

master
Jan-Lukas Else 1 month ago
parent
commit
2b1346e8d5
  1. 1
      Dockerfile
  2. 12
      externalVideo.go
  3. 1
      hlsjs/hls.js
  4. 2
      httpMiddlewares.go
  5. 3
      httpRouters.go
  6. 32
      templates/assets/js/video.js
  7. 2
      ui.go
  8. 10
      uiComponents.go

1
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/

12
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) != ""
}

1
hlsjs/hls.js

File diff suppressed because one or more lines are too long

2
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)
})
}

3
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)

32
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)
})()

2
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

10
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")
}

Loading…
Cancel
Save