black toolbar for media-player

europeana · Oct 16, 2024 · a2157fa · a2157fa
1 parent 449e37f
commit a2157fa
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/packages/portal/src/components/item/ItemMediaPresentation.vue b/packages/portal/src/components/item/ItemMediaPresentation.vue
@@ -57,6 +57,7 @@
       </div>
       <div
         class="iiif-viewer-toolbar d-flex flex-wrap flex-lg-nowrap align-items-center"
+        :class="{ black: resource?.isPlayableMedia }"
       >
         <!-- TODO: Refactor into separate ItemMediaToolbar component -->
         <b-button
@@ -76,7 +77,7 @@
         </b-button>
         <div
           v-if="resourceCount >= 2"
-          class="iiif-viewer-toolbar-pagination d-flex w-100 w-lg-auto"
+          class="iiif-viewer-toolbar-pagination d-flex ml-lg-auto"
           :class="{ closed: !showPages }"
         >
           <PaginationNavInput
@@ -323,13 +324,29 @@
         color: $blue;
       }
     }
+
+    &.black {
+      background-color: transparent;
+
+      .sidebar-toggle,
+      .pages-toggle {
+        color: $white;
+      }
+    }
   }
 
   .iiif-viewer-toolbar-pagination {
     padding: 0.875rem 1rem;
+    background-color: rgba($white, 0.95);
+    width: 13rem;
+
+    &.closed {
+      background-color: transparent;
+    }
 
     @media(max-width: ($bp-large - 1px)) {
       border-top: 1px solid $bodygrey;
+      width: auto;
 
       &.closed {
         border-bottom: 1px solid $bodygrey;

diff --git a/packages/portal/src/components/media/MediaAudioVisualPlayer.vue b/packages/portal/src/components/media/MediaAudioVisualPlayer.vue
@@ -1,15 +1,17 @@
 <template>
-  <div
-    class="media-player-wrapper col-lg-10 col-12"
-  >
-    <iframe
-      data-qa="media player"
-      allowfullscreen="true"
-      :src="localePath({ name: 'media', query: { id: itemId, mediaUrl: url, mediaType: format } })"
-      class="media-player"
-      :title="$t('record.mediaPlayer')"
-    />
-  </div>
+  <b-container class="h-100">
+    <div
+      class="media-player-wrapper col-lg-10 col-12"
+    >
+      <iframe
+        data-qa="media player"
+        allowfullscreen="true"
+        :src="localePath({ name: 'media', query: { id: itemId, mediaUrl: url, mediaType: format } })"
+        class="media-player"
+        :title="$t('record.mediaPlayer')"
+      />
+    </div>
+  </b-container>
 </template>
 
 <script>
@@ -42,6 +44,8 @@
     margin: 0 auto;
     overflow: hidden;
     min-width: 19rem;
+    z-index: 3;
+    // max-width: ;
 
     iframe {
       border: 0;