fix: add partials for api settings and preview URL and refactor

Signed-off-by: Patrick Kollitsch <patrick@davids-neighbour.com>
davidsneighbour · Nov 21, 2024 · f6ad7a8 · f6ad7a8
1 parent 22e75a8
commit f6ad7a8
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 71 deletions.
diff --git a/modules/youtube/config/_default/params.toml b/modules/youtube/config/_default/params.toml
@@ -6,6 +6,12 @@ thumbnail_source = 1
 # disabled = false
 # verbose = true
 
+[dnb.youtube.apiparams]
+# see https://developers.google.com/youtube/player_parameters#Parameters
+iv_load_policy = 3
+controls = 0
+rel = 0
+
 [dnb.youtube.config.plugins.js]
 imports = ["import LiteYTEmbed from './lite-yt-embed';"]        # es6, in flux
 calls = ["customElements.define('lite-youtube', LiteYTEmbed);"]

diff --git a/modules/youtube/layouts/partials/func/getYTPreviewUrl.html b/modules/youtube/layouts/partials/func/getYTPreviewUrl.html
@@ -0,0 +1,14 @@
+{{- $config := site.Params.dnb.youtube -}}
+
+{{- $id := . -}}
+
+{{- $url := "https://i.ytimg.com/vi" -}}
+{{- if compare.Eq (collections.Index $config "thumbnail_source" | compare.Default 1) 1 -}}
+  {{- $url = "https://ytimg.googleusercontent.com/vi" -}}
+{{- end -}}
+
+{{- $output := dict
+  "maxres" (printf "%s/%s/maxresdefault.jpg" $url $id)
+  "lowres" (printf "%s/%s/sddefault.jpg" $url $id) -}}
+
+{{- return $output -}}
diff --git a/modules/youtube/layouts/partials/func/prepareApiParams.html b/modules/youtube/layouts/partials/func/prepareApiParams.html
@@ -0,0 +1,7 @@
+{{- $params := site.Params.dnb.youtube.apiparams -}}
+{{- $params = collections.Merge (dict "hl" site.Language.Lang) $params -}}
+{{- $paramsCollected := "" -}}
+{{- range $key, $value := $params -}}
+    {{- $paramsCollected = fmt.Printf "%s&%s=%s" $paramsCollected $key $value -}}
+{{- end -}}
+{{- return $params -}}
diff --git a/modules/youtube/layouts/partials/getYoutubePreviewUrl.html b/modules/youtube/layouts/partials/getYoutubePreviewUrl.html
diff --git a/modules/youtube/layouts/partials/youtube.html b/modules/youtube/layouts/partials/youtube.html
@@ -1,12 +1,5 @@
 {{- /*
 
-  see
-  - https://web.dev/iframe-lazy-loading/ (not used collections.In this shortcode, just for
-  learning purposes)
-  - https://github.com/paulirish/lite-youtube-embed
-  - https://developers.google.com/youtube/player_parameters#Parameters (check for
-  parameters that can be used with the youtube player)
-
 - @todo background image locally instead of URL
 - @todo config param for JS inline or via external file
 - @todo documentation about $pc.Disable
@@ -15,36 +8,20 @@
 
   */
 -}}
-{{- $params := dict
-  "modestbranding" "2"
-  "iv_load_policy" "3"
-  "controls" "0"
-  "rel" "0"
-  "hl" site.Language.Lang
--}}
-{{- $paramsCollected := "" -}}
-{{- range $key, $value := $params -}}
-  {{- $paramsCollected = fmt.Printf "%s&%s=%s" $paramsCollected $key $value -}}
-{{- end -}}
+
 {{- $pc := site.Config.Privacy.YouTube -}}
 {{- if not $pc.Disable -}}
   {{- $id     := .id -}}
+  {{- $jsapi  := .jsapi | compare.Default false -}}
   {{- $class  := .class | compare.Default "" -}}
   {{- $title  := .title | compare.Default "" -}}
-  {{- $params := .params | compare.Default $paramsCollected -}}
+  {{- $playlabel := .playlabel | compare.Default "Play video" -}}
+  {{- $params := .params | compare.Default (partialCached "func/prepareApiParams.html" .) -}}
   {{- $config := site.Params.dnb.youtube -}}
-  {{- $thumbnailUrl := "https://i.ytimg.com/vi/%s/maxresdefault.jpg" -}}
-  {{- $thumbnailLowResUrl := "https://i.ytimg.com/vi/%s/sddefault.jpg" -}}
-
-  {{- if compare.Eq (collections.Index $config "thumbnail_source" | compare.Default 1) 2 -}}
-    {{- $thumbnailUrl = "https://ytimg.googleusercontent.com/vi/%s/maxresdefault.jpg" -}}
-    {{- $thumbnailLowResUrl = "https://ytimg.googleusercontent.com/vi/%s/sddefault.jpg" -}}
-  {{- end -}}
-  {{- $remoteThumbnailUrl := fmt.Printf $thumbnailUrl $id -}}
-  {{- $remoteThumbnailLowresUrl := fmt.Printf $thumbnailLowResUrl $id -}}
   {{- $remoteThumbnail := "" -}}
+  {{- $thumbnailUrl := partials.IncludeCached "func/getYTPreviewUrl.html" $id $id -}}
 
-  {{ with resources.GetRemote $remoteThumbnailUrl }}
+  {{ with resources.GetRemote $thumbnailUrl.maxres }}
     {{ with .Err }}
       {{ warnf "%s" . }}
     {{ else }}
@@ -54,7 +31,7 @@
       {{ end -}}
     {{ end }}
   {{ else }}
-    {{ with resources.GetRemote $remoteThumbnailLowresUrl }}
+    {{ with resources.GetRemote $thumbnailUrl.lowres }}
       {{ with .Err }}
         {{ warnf "%s" . }}
       {{ else }}
@@ -75,14 +52,15 @@
   <div class="shortcode--youtube {{ with $class -}}{{- . -}}{{- end -}}">
     <lite-youtube
       videoid="{{- $id -}}"
+      {{ with $jsapi -}}jsapi{{- end }}
       {{ with $title -}}
-        playlabel="{{- . -}}"
+        title="{{- . -}}"
       {{- end -}}
       params="{{- $params -}}"
       style="background-image: url('{{- $remoteThumbnail.Permalink -}}');"
     >
-      <button type="button" class="lty-playbtn" aria-label="Play video">
-        {{- with $title -}}
+      <button type="button" class="lty-playbtn" aria-label="{{- $playlabel -}}">
+        {{- with $playlabel -}}
           <span class="lyt-visually-hidden">{{- . -}}</span>
         {{- end -}}
       </button>

diff --git a/modules/youtube/layouts/shortcodes/youtube.html b/modules/youtube/layouts/shortcodes/youtube.html
@@ -16,34 +16,23 @@
 Maybe do the whole implementation via partials.Include that can be reused by the youtube partials.Include and shortcode
 
 */ -}}
-{{- $paramScratch := newScratch -}}
-{{- $paramScratch.SetInMap "params" "modestbranding" 2 -}}
-{{- $paramScratch.SetInMap "params" "iv_load_policy" 3 -}}
-{{- $paramScratch.SetInMap "params" "controls" 0 -}}
-{{- $paramScratch.SetInMap "params" "rel" 0 -}}
-{{- $paramScratch.SetInMap "params" "hl" .Site.Language.Lang -}}
-{{- $params := $paramScratch.Get "params" -}}
-{{- $paramsCollected := "" -}}
-{{- range $key, $value := $params -}}
-    {{- $paramsCollected = fmt.Printf "%s&%s=%s" $paramsCollected $key $value -}}
-{{- end -}}
+
 {{- $pc := site.Config.Privacy.YouTube -}}
 {{- if not $pc.Disable -}}
-    {{- $id     := .Get "id"    | compare.Default (.Get 0) -}}
-    {{- $class  := .Get "class" | compare.Default (.Get 1) -}}
-    {{- $title  := .Get "title" | compare.Default (.Get 2) -}}
-    {{- $params := .Get "params" | compare.Default $paramsCollected -}}
-    {{- $thumbnailUrl := partials.IncludeCached "getYoutubePreviewUrl.html" . -}}
-    {{- $remoteThumbnailUrl := fmt.Printf $thumbnailUrl $id -}}
-    <div class="shortcode--youtube {{ with $class -}}{{- . -}}{{- end -}}">
-        <lite-youtube
-            videoid="{{- $id -}}" {{ with $title -}}
-            playlabel="{{- . -}}"{{- end -}}
-            params="{{- $params -}}"
-            style="background-image: url('{{- $remoteThumbnailUrl -}}');">
-            <button type="button" class="lty-playbtn" aria-label="Play video">
-                {{- with $title -}}<span class="lyt-visually-hidden">{{- . -}}</span>{{- end -}}
-            </button>
-        </lite-youtube>
-    </div>
+  {{- $id     := .Get "id"    | compare.Default (.Get 0) -}}
+  {{- $class  := .Get "class" | compare.Default (.Get 1) -}}
+  {{- $title  := .Get "title" | compare.Default (.Get 2) -}}
+  {{- $params := .Get "params" | compare.Default (partialCached "func/prepareApiParams.html" .) -}}
+  {{- $thumbnailUrl := partials.IncludeCached "func/getYTPreviewUrl.html" $id $id -}}
+  <div class="shortcode--youtube {{ with $class -}}{{- . -}}{{- end -}}">
+    <lite-youtube
+      videoid="{{- $id -}}" {{ with $title -}}
+      playlabel="{{- . -}}" title="{{- . -}}" {{ end -}}
+      params="{{- $params -}}"
+      style="background-image: url('{{- $thumbnailUrl.maxres -}}');">
+      <button type="button" class="lty-playbtn" aria-label="Play video">
+        {{- with $title -}}<span class="lyt-visually-hidden">{{- . -}}</span>{{- end -}}
+      </button>
+    </lite-youtube>
+  </div>
 {{- end -}}