Browse Source

feat(shortcode/video): add video shortcode

re #20, re #81
Josh Habdas 2 months ago
parent
commit
ace4c7ca73
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74

+ 1
- 1
docs/content/_index.md View File

@@ -57,7 +57,7 @@ images = [
57 57
     <tr>
58 58
       <td><a href="./feature/">37</a></td>
59 59
       <td><a href="./module/">4</a></td>
60
-      <td><a href="./shortcode/">26+</a></td>
60
+      <td><a href="./shortcode/">27+</a></td>
61 61
       <td><a href="./extra/">2</a></td>
62 62
     </tr>
63 63
   </table>

BIN
docs/content/shortcode/video/assets/sample.mp4 View File


+ 44
- 0
docs/content/shortcode/video/index.md View File

@@ -0,0 +1,44 @@
1
++++
2
+title = "Video"
3
+description = "Lazy-load videos and control playback options."
4
+categories = ["experience"]
5
+tags = []
6
+html_attributes = ["class", "autoplay", "controls", "crossorigin", "height", "loop", "muted", "preload", "intrinsicsize", "poster", "src", "width", "playsinline"]
7
+custom_attributes = []
8
+snippets_used = []
9
+[[copyright]]
10
+  owner = "Josh Habdas"
11
+  date = "2019"
12
+  license = "agpl-3.0-or-later"
13
++++
14
+
15
+Basic usage:
16
+
17
+```html
18
+{{</* video autoplay="true" loop="true" src="assets/sample.mp4" */>}}
19
+```
20
+
21
+{{< video autoplay="true" loop="true" src="assets/sample.mp4" >}}
22
+
23
+Assumes the following directory structure:
24
+
25
+```
26
+├── assets
27
+├── content
28
+│   └── videos
29
+│       └── gifs
30
+│           ├── assets
31
+│           │   └── sample.mp4
32
+│           └── index.md
33
+├── content
34
+```
35
+
36
+With controls:
37
+
38
+```html
39
+{{</* video controls="true" src="assets/sample.mp4" */>}}
40
+```
41
+
42
+{{< video controls="true" src="assets/sample.mp4" >}}
43
+
44
+Absolute `src` and `poster` URLs also possible. Absolute URLs must include a scheme such as `http` or `https`. Root-relative URLs not currently possible.

+ 52
- 0
layouts/partials/components/video.html View File

@@ -0,0 +1,52 @@
1
+{{/*
2
+Copyright (C) 2019  Josh Habdas <jhabdas@protonmail.com>
3
+
4
+This file is part of After Dark.
5
+
6
+After Dark is free software: you can redistribute it and/or modify
7
+it under the terms of the GNU Affero General Public License as published by
8
+the Free Software Foundation, either version 3 of the License, or
9
+(at your option) any later version.
10
+
11
+After Dark is distributed in the hope that it will be useful,
12
+but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+GNU Affero General Public License for more details.
15
+
16
+You should have received a copy of the GNU Affero General Public License
17
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
18
+*/ -}}
19
+
20
+{{ $path := (path.Base .node.RelPermalink) }}
21
+{{ $is_src_relative := not (urls.Parse .src).Host }}
22
+{{ $has_poster := ne .poster nil }}
23
+{{ $is_poster_relative := not (urls.Parse .poster).Host }}
24
+
25
+<video
26
+  class="lazyload{{ with .class }} {{ . }}{{ end }}"
27
+  {{ with .autoplay }} autoplay{{ end }}
28
+  {{ with .controls }} controls{{ end }}
29
+  {{ with .crossorigin }}crossorigin="{{ . }}"{{ end }}
30
+  {{ with .height }} height="{{ . }}"{{ end }}
31
+  {{ with .loop }} loop{{ end }}
32
+  {{ with .muted }} muted{{ end }}
33
+  {{ with .playsinline }} {{ . }}{{ end }}
34
+  {{ with .preload }} preload="{{ . }}"{{ end }}
35
+  {{ with .intrinsicsize }} intrinsicsize="{{ . }}"{{ end }}
36
+  {{ if $has_poster }}
37
+    {{ if $is_poster_relative -}}
38
+      poster="{{ relref .node $path }}{{ .poster }}"
39
+    {{- else }}
40
+      poster="{{ .poster }}"
41
+    {{ end }}
42
+  {{ end }}
43
+  {{ with .poster }} poster="{{ . }}"{{ end }}
44
+  {{ if $is_src_relative -}}
45
+    src="{{ relref .node $path }}{{ .src }}"
46
+  {{- else -}}
47
+    src="{{ .src }}"
48
+  {{- end }}
49
+  {{ with .width }} width="{{ . }}"{{ end }}
50
+>
51
+  Your browser doesn't support HTML5 video. <a href="{{ if .is_src_relative }}{{ relref .node $path }}{{ .src }}{{ else }}{{ .src }}{{ end }}">Download video</a> instead.
52
+</video>

+ 34
- 0
layouts/shortcodes/video.html View File

@@ -0,0 +1,34 @@
1
+{{/*
2
+Copyright (C) 2019  Josh Habdas <jhabdas@protonmail.com>
3
+
4
+This file is part of After Dark.
5
+
6
+After Dark is free software: you can redistribute it and/or modify
7
+it under the terms of the GNU Affero General Public License as published by
8
+the Free Software Foundation, either version 3 of the License, or
9
+(at your option) any later version.
10
+
11
+After Dark is distributed in the hope that it will be useful,
12
+but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+GNU Affero General Public License for more details.
15
+
16
+You should have received a copy of the GNU Affero General Public License
17
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
18
+*/ -}}
19
+
20
+{{ $class := .Get "class" }}
21
+{{ $autoplay := .Get "autoplay" }}
22
+{{ $controls := .Get "controls" }}
23
+{{ $crossorigin := .Get "crossorigin" }}
24
+{{ $height := .Get "height" }}
25
+{{ $loop := .Get "loop" }}
26
+{{ $muted := .Get "muted" }}
27
+{{ $preload := .Get "preload" }}
28
+{{ $intrinsicsize := .Get "intrinsicsize" }}
29
+{{ $poster := .Get "poster" }}
30
+{{ $src := .Get "src" }}
31
+{{ $width := .Get "width" }}
32
+{{ $playsinline := .Get "playsinline" }}
33
+
34
+{{ partial "components/video.html" (dict "class" $class "autoplay" $autoplay "controls" $controls "crossorigin" $crossorigin "height" $height "loop" $loop "muted" $muted "preload" $preload "intrinsicsize" $intrinsicsize "poster" $poster "src" $src "width" $width "playsinline" $playsinline "node" .Page) }}

Loading…
Cancel
Save