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>
pull/31/head
iGor milhit 2020-04-24 15:34:57 +02:00
parent 74abde3ad2
commit 9f142a22b4
Signed by: igor
GPG Key ID: 692D97C3D0228A99
4 changed files with 55 additions and 17 deletions

View File

@ -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;
}
}

View File

@ -11,6 +11,7 @@
@import '_layout.scss'; @import '_layout.scss';
@import '_lists.scss'; @import '_lists.scss';
@import '_main_body.scss'; @import '_main_body.scss';
@import '_medias.scss';
@import '_post.scss'; @import '_post.scss';
/* /*
@ -30,23 +31,6 @@ pre {
max-width: 95vw; 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 { .terms {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

View File

@ -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>

View File

@ -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>