Merge pull request #351 from geichelberger/preview-content

Allow configuring preview-content background color
polimediaupv · Apr 18, 2024 · 52cae4a · 52cae4a
2 parents 9606e56 + f650016
commit 52cae4a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/src/css/PreviewContainer.css b/src/css/PreviewContainer.css
@@ -0,0 +1,12 @@
+.preview-container {
+    background-color: var(--preview-container-background-color);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
diff --git a/src/css/colors.css b/src/css/colors.css
@@ -10,6 +10,7 @@
     --main-bg-gradient: linear-gradient(0deg, rgba(32,32,32,1) 0%, rgba(32,32,32,0.49531687675070024) 72%, rgba(32,32,32,0.08355217086834732) 100%);
     --main-border-color: rgba(125,125,125,0.4);
     --video-container-background-color: #e4e4e4;
+    --preview-container-background-color: #e4e4e4;
     --base-video-rect-background-color: #8a8a8a;
     --main-outline-color: var(--highlight-bg-color-hover);
 }
diff --git a/src/js/core/PreviewContainer.js b/src/js/core/PreviewContainer.js
@@ -1,18 +1,8 @@
 
 import { DomClass, createElementWithHtmlText } from './dom';
 
-const g_style = `
-    background-color: #e4e4e4;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%); 
-`
+import 'paella-core/styles/PreviewContainer.css';
+
 const g_imgStyle = `
     width: 100%;
 `;
@@ -51,7 +41,6 @@ export default class PreviewContainer extends DomClass {
     constructor(player, parentElement,backgroundImage,backgroundImagePortrait) {
         const attributes = {
             "class": "preview-container",
-            "style": g_style,
             "role": "button",
             "aria-label": "Play video"
         };