fullscreen background colors... update ui with section name

3 files changed, 26 insertions, 5 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
index 6ca6d79..15525f4 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.image.js
@@ -1,16 +1,21 @@
 import React from 'react'
 
 export const FullscreenImage = ({ element, media, transitionDuration }) => {
+  const { color } = element
   const item = media.lookup[element.settings.media_id]
   const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
     transitionDuration,
-    backgroundImage: 'url(' + item.settings.display.url + ')',
   }
   return (
     <div
       className='fullscreen-element image'
       style={style}
     >
+      <div style={{
+        backgroundImage: 'url(' + item.settings.display.url + ')',
+      }} />
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
index 9122426..6ca7ec8 100644
--- a/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.fullscreen/fullscreen.video.js
@@ -2,17 +2,27 @@ import React from 'react'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
 export const FullscreenVideo = ({ element, media, transitionDuration }) => {
+  const { color } = element
   const item = media.lookup[element.settings.media_id]
   const style = {
+    backgroundColor: color.backgroundColor,
+    color: color.textColor,
     transitionDuration,
-    backgroundImage: 'url(' + item.settings.display.url + ')',
   }
+  console.log(item, window.innerWidth, window.innerHeight)
   return (
     <div
       className='fullscreen-element video'
       style={style}
     >
-      <VimeoPlayer video={data.url} autoplay muted />
+      <VimeoPlayer
+        video={item.url}
+        autoplay muted
+        controls={false}
+        byline={false}
+        width={window.innerWidth}
+        height={window.innerHeight}
+      />
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
index fb4d8af..8d38fa0 100644
--- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
+++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css
@@ -38,12 +38,18 @@
   height: 100%;
   top: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .viewer-fullscreen .curtain {
 }
 
-.viewer-fullscreen .image {
-  background-size: cover;
+.viewer-fullscreen .image div {
+  width: 90%;
+  height: 90%;
+  background-size: contain;
+  background-repeat: no-repeat;
   background-position: center center;
 }