From 9f142a22b4ef12326d11f77a59e670bad85373e8 Mon Sep 17 00:00:00 2001
From: iGor milhit <igor@milhit.ch>
Date: Fri, 24 Apr 2020 15:34:57 +0200
Subject: [PATCH] shortcodes: add shortcodes for audio & streaming

* Adds the two shortcodes.
* Styles the figure and figcaption around the player

Co-Authored-by: Igor Milhit <igor@milhit.ch>
---
 assets/scss/_medias.scss       | 30 ++++++++++++++++++++++++++++++
 assets/scss/main.scss          | 18 +-----------------
 layouts/shortcodes/audio.html  | 15 +++++++++++++++
 layouts/shortcodes/stream.html |  9 +++++++++
 4 files changed, 55 insertions(+), 17 deletions(-)
 create mode 100644 assets/scss/_medias.scss
 create mode 100644 layouts/shortcodes/audio.html
 create mode 100644 layouts/shortcodes/stream.html

diff --git a/assets/scss/_medias.scss b/assets/scss/_medias.scss
new file mode 100644
index 0000000..c6383b8
--- /dev/null
+++ b/assets/scss/_medias.scss
@@ -0,0 +1,30 @@
+.audio, .stream {
+  audio {
+    width: 100%;
+    border-radius: .5rem;
+  }
+  figcaption p {
+    text-align: left;
+    font-size: $font-size-small;
+    padding-left: .5rem;
+  }
+  > p {
+    font-size: $font-size-small;
+    font-variant: small-caps;
+  }
+}
+
+figure {
+  background-color: lightgrey;
+  padding: .4rem;
+  border-radius: 5px;
+  margin-right: .4rem;
+  margin-left: .4rem;
+  img {
+  width: 100%;
+  }
+  p {
+    text-align: center;
+    margin: .2rem 0;
+  }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 30bc88e..b144ea2 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -11,6 +11,7 @@
 @import '_layout.scss';
 @import '_lists.scss';
 @import '_main_body.scss';
+@import '_medias.scss';
 @import '_post.scss';
 
 /*
@@ -30,23 +31,6 @@ pre {
   max-width: 95vw;
 }
 
-figure {
-  background-color: lightgrey;
-  padding: .4rem;
-  border-radius: 5px;
-  margin-right: .4rem;
-  margin-left: .4rem;
-}
-
-figure img {
-  width: 100%;
-}
-
-figure p {
-  text-align: center;
-  margin: .2rem 0;
-}
-
 .terms {
   display: flex;
   flex-wrap: wrap;
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
new file mode 100644
index 0000000..21853db
--- /dev/null
+++ b/layouts/shortcodes/audio.html
@@ -0,0 +1,15 @@
+<figure class="audio">
+    <figcaption><p>{{ .Get "legend" }}</p></figcaption>
+    <audio controls preload="metadata">
+        <source src="/medias/{{ .Get "src" }}.opus" type="audio/opus" codecs="opus">
+        <source src="/medias/{{ .Get "src" }}.ogg" type="audio/ogg" codecs="vorbis">
+        <source src="/medias/{{ .Get "src" }}.mp3" type="audio/mpeg">
+        Your browser does not support the audio tag, you can download the audio
+        with <a href="/medias/{{ .Get "src" }}.mp3">this link</a>
+    </audio>
+    <p>
+        <a href="/medias/{{ .Get "src" }}.opus">opus</a> /
+        <a href="/medias/{{ .Get "src" }}.ogg">ogg</a> /
+        <a href="/medias/{{ .Get "src" }}.mp3">mp3</a>
+    </p>
+</figure>
diff --git a/layouts/shortcodes/stream.html b/layouts/shortcodes/stream.html
new file mode 100644
index 0000000..db28df2
--- /dev/null
+++ b/layouts/shortcodes/stream.html
@@ -0,0 +1,9 @@
+<figure class="stream">
+    <figcaption><p>{{ .Get "legend" }}</p></figcaption>
+    <audio controls>
+        <source src="https://id-libre.org/live/stream.ogg" type="audio/ogg">
+        <source src="https://id-libre.org/live/stream.mp3" type="audio/mpeg">
+        Your browser does not support the audio tag, you can access the stream
+        directly with <a href="https://id-libre.org/live/stream.mp3">this link</a>
+    </audio>
+</figure>