diff options
Diffstat (limited to 'bskyweb')
| -rw-r--r-- | bskyweb/cmd/bskyweb/server.go | 1 | ||||
| -rw-r--r-- | bskyweb/static/iframe/youtube.html | 49 | ||||
| -rw-r--r-- | bskyweb/templates/base.html | 46 |
3 files changed, 77 insertions, 19 deletions
diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go index c4a12a2fa..76b7bcc06 100644 --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -159,6 +159,7 @@ func serve(cctx *cli.Context) error { e.GET("/security.txt", func(c echo.Context) error { return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt") }) + e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler)) e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc { return func(c echo.Context) error { path := c.Request().URL.Path diff --git a/bskyweb/static/iframe/youtube.html b/bskyweb/static/iframe/youtube.html new file mode 100644 index 000000000..f2ada2ec5 --- /dev/null +++ b/bskyweb/static/iframe/youtube.html @@ -0,0 +1,49 @@ +<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1" /> +<style> + body { + margin: 0; + } + .container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + } + .video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +</style> +<div class="container"><div class="video" id="player"></div></div> +<script> + const url = new URL(window.location) + const viewport = document.querySelector("meta[name=viewport]") + + const tag = document.createElement("script") + tag.src = "https://www.youtube.com/iframe_api" + const firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + + let player + function onYouTubeIframeAPIReady() { + player = new YT.Player('player', { + width: "1000", + height: "1000", + videoId: url.searchParams.get('videoId'), + playerVars: { + autoplay: 1, + start: url.searchParams.get('start'), + rel: 0, + loop: 0, + playsinline: 1, + origin: url.origin + }, + }); + } + function onPlayerReady(event) { + event.target.playVideo(); + } +</script> diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 0df5ce944..1f25743aa 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -1,13 +1,13 @@ -<!DOCTYPE html> +<!DOCTYPE html> <html lang="en"> -<head> +<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover"> <meta name="referrer" content="origin-when-cross-origin"> <title>{%- block head_title -%}Bluesky{%- endblock -%}</title> <!-- Hello Humans! API docs at https://atproto.com --> - + <style> /** * Extend the react-native-web reset: @@ -40,31 +40,39 @@ } /* Color theming */ + /* Default will always be white */ :root { - --text: black; - --background: white; - --backgroundLight: hsl(211, 20%, 95%); - } - html.colorMode--dark { - --text: white; - --background: hsl(211, 20%, 4%); - --backgroundLight: hsl(211, 20%, 20%); - color-scheme: dark; - } - @media (prefers-color-scheme: light) { - html.colorMode--system { --text: black; --background: white; --backgroundLight: hsl(211, 20%, 95%); - } } + /* This gives us a black background when system is dark and we have not loaded the theme/color scheme values in JS */ @media (prefers-color-scheme: dark) { - html.colorMode--system { + :root { + --text: white; + --background: black; + --backgroundLight: hsl(211, 20%, 20%); + color-scheme: dark; + } + } + + /* Overwrite those preferences with the selected theme */ + html.theme--light { + --text: black; + --background: white; + --backgroundLight: hsl(211, 20%, 95%); + } + html.theme--dark { --text: white; - --background: hsl(211, 20%, 4%); + --background: black; --backgroundLight: hsl(211, 20%, 20%); color-scheme: dark; - } + } + html.theme--dim { + --text: white; + --background: hsl(211, 20%, 4%); + --backgroundLight: hsl(211, 20%, 10%); + color-scheme: dark; } /* Remove autofill styles on Webkit */ |