Play-on-click, layout improvements.

1 files changed, 52 insertions, 5 deletions

diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 510fe6d2..adef67ff 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -1,8 +1,31 @@
 <template>
-  <div
-    class="Flash"
-    ref="cunt"
-  />
+  <div class="Flash">
+    <div
+      v-if="player"
+      ref="cunt"
+      class="player"
+      :class="{ hidden: player === 'hidden' }"
+    />
+    <button
+      v-if="player === false || player === 'hidden'"
+      @click="openPlayer"
+      class="button-unstyled placeholder"
+    >
+      <span v-if="player === 'hidden'" class="label">
+        {{ $t('general.loading') }}
+      </span>
+      <span v-else class="label">
+        {{ $t('general.flash_content') }}
+      </span>
+    </button>
+    <button
+      v-if="player"
+      class="button-unstyled hider"
+      @click="closePlayer"
+    >
+      <FAIcon icon="stop" />
+  </button>
+</div>
 </template>
 
 <script src="./flash.js"></script>
@@ -10,6 +33,30 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .Flash {
-  display: block;
+  width: 100%;
+  height: 260px;
+  position: relative;
+
+  .player {
+    height: 100%;
+    width: 100%;
+  }
+
+  .hider {
+    top: 0;
+  }
+
+  .hidden {
+    display: none;
+    visibility: 'hidden';
+  }
+
+  .placeholder {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>