# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1597502429 -7200
# Node ID 672b6137ef2905e3ae11e49ad990250bfceaf75b
# Parent  4efd3d23de178f53a283f6537f49dc30c031e068
bulma (components): template for the alternative media player

diff -r 4efd3d23de17 -r 672b6137ef29 sat_templates/templates/bulma/components/video_player.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/video_player.html	Sat Aug 15 16:40:29 2020 +0200
@@ -0,0 +1,36 @@
+<div class="video_player">
+    <div class="video_elt"></div>
+    <div class="video_overlay_play is-flex has-items-centered">
+        <span class="icon">
+            <i class="icon-play-circled"></i>
+        </span>
+    </div>
+    <div class="video_controls columns is-mobile has-items-vcentered">
+        <div class="column is-narrow">
+            <span class="icon is-medium click_to_play">
+                <i class="icon-play video_play is-size-4"></i>
+                <i class="icon-pause video_pause is-size-4"></i>
+            </span>
+        </div>
+        <div class="column">
+            <progress class="progress" value="0"></progress>
+        </div>
+        <div class="column is-narrow">
+            <div class="content timer click_to_change_timer_mode">
+                0:00/0:00
+            </div>
+        </div>
+        <div class="column is-narrow">
+            <span class="icon is-medium click_to_change_volume">
+                <i class="icon-volume-up video_sound_on is-size-4"></i>
+                <i class="icon-volume-off video_sound_off is-size-4"></i>
+            </span>
+        </div>
+        <div class="column is-narrow">
+            <span class="icon is-medium click_to_fullscreen">
+                <i class="icon-resize-full video_resize_full is-size-4"></i>
+                <i class="icon-resize-small video_resize_small is-size-4"></i>
+            </span>
+        </div>
+    </div>
+</div>
diff -r 4efd3d23de17 -r 672b6137ef29 sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Fri Aug 14 08:47:06 2020 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Sat Aug 15 16:40:29 2020 +0200
@@ -206,6 +206,102 @@
     transition: width 0.3s ease-out;
 }
 
+/****************
+ * video player *
+ ****************/
+
+div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs {
+    width: 100%;
+}
+
+div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs {
+    height: 100%;
+}
+
+div.video_player {
+    position: relative;
+    background-color: black;
+}
+
+div.video_player>div.video_overlay_play {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+div.video_player>div.video_overlay_play>.icon {
+    height: 12rem;
+    width: 12rem;
+    font-size: 10rem;
+    color: #eee;
+}
+
+div.video_player .video_pause, div.video_player .video_sound_off,
+div.video_player .video_resize_small {
+    display: none;
+}
+
+div.video_player.playing .video_pause {
+    display: inline-block;
+}
+
+div.video_player.playing .video_play {
+    display: none;
+}
+
+div.video_player.muted .video_sound_off {
+    display: inline-block;
+}
+
+div.video_player.muted .video_sound_on {
+    display: none;
+}
+
+div.video_player:fullscreen .video_resize_small {
+    display: inline-block;
+}
+
+div.video_player:fullscreen .video_resize_full {
+    display: none;
+}
+
+div.video_controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    background-color: #000A;
+    color: #eee;
+}
+
+div.video_player.playing:hover>.video_controls,
+div.video_player.playing>.video_controls.hidden:hover
+{
+    opacity: 1;
+    transition: opacity 0.5s;
+}
+
+div.video_player.playing>.video_controls,
+div.video_player.playing>.video_controls.hidden {
+    opacity: 0;
+    transition: opacity 2s;
+}
+
+div.video_player .video_controls .icon:hover {
+    background-color: #777;
+    cursor: pointer;
+}
+
+div.video_player .timer {
+    cursor: pointer;
+    width: 5em;
+    text-align: center;
+}
+
+
 /*************
  * slideshow *
  *************/