From 417ffc21deeb4be5e2644846f2818ec63b4cbaa6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 28 Oct 2020 18:05:04 +0100
Subject: poster image size

---
 .../annotations/annotationForms/annotationForm.video.js        | 10 +++++++++-
 .../frontend/app/views/media/containers/media.index.js         |  6 ++++--
 animism-align/frontend/app/views/media/media.css               |  4 ++++
 .../app/views/viewer/player/components.inline/inline.video.js  |  3 +++
 .../app/views/viewer/player/components.media/media.css         |  1 +
 .../frontend/app/views/viewer/player/player.transcript.css     |  4 +++-
 6 files changed, 24 insertions(+), 4 deletions(-)

(limited to 'animism-align/frontend/app/views')

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 0199b46..45b538b 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { CURTAIN_COLOR_SELECT_OPTIONS } from 'app/constants'
+import { CURTAIN_COLOR_SELECT_OPTIONS, IMAGE_BACKGROUND_SIZE_OPTIONS } from 'app/constants'
 import { Select, Checkbox } from 'app/common'
 import { AnnotationFormFullscreen } from './annotationForm.utility'
 
@@ -78,6 +78,14 @@ export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect, h
         defaultOption='Pick a color'
         onChange={handleSettingsSelect}
       />
+      <Select
+        title='Poster Size'
+        name='poster_size'
+        selected={annotation.settings.poster_size}
+        options={IMAGE_BACKGROUND_SIZE_OPTIONS}
+        defaultOption='Select size'
+        onChange={handleSettingsSelect}
+      />
 
       {(annotation.settings.fullscreen && !annotation.settings.inline) && (
         <AnnotationFormFullscreen
diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
index 34845d8..da94d3c 100644
--- a/animism-align/frontend/app/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -76,8 +76,10 @@ class MediaIndex extends Component {
             {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
             <h2>Galleries</h2>
             {order.filter(id => lookup[id].type === 'gallery').map(id => <GalleryItem key={id} data={lookup[id]} />)}
-            <h2>Video</h2>
-            {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Videos</h2>
+            {order.filter(id => lookup[id].type === 'video' && !lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Books</h2>
+            {order.filter(id => lookup[id].type === 'video' && lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
             <h2>Files</h2>
             {order.filter(id => lookup[id].type === 'file').map(id => <FileItem key={id} data={lookup[id]} />)}
           </div>
diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css
index 7e5517d..0705b6c 100644
--- a/animism-align/frontend/app/views/media/media.css
+++ b/animism-align/frontend/app/views/media/media.css
@@ -7,6 +7,7 @@
 .results .cell {
   margin-bottom: 1rem;
   margin-right: 1rem;
+  max-width: 295px;
 }
 .results h2 {
   display: block;
@@ -15,6 +16,9 @@
 .media .results .meta > div {
   max-width: 100%;
 }
+.media .results .img img {
+  max-width: 295px;
+}
 
 /* new / edit media forms */
 
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index a5b3757..86fc0df 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -25,6 +25,9 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
   // if this is a fullscreen video, display the poster image
   if (annotation.settings.fullscreen && !annotation.settings.inline) {
     style.backgroundImage = 'url(' + posterURL(item) + ')'
+    if (annotation.settings.poster_size) {
+      style.backgroundSize = annotation.settings.poster_size
+    }
     return (
       <div className={className}>
         <div className='videoPoster' style={style}>
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index c43c207..45a2670 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -314,6 +314,7 @@
   opacity: 0.0;
   transition: opacity 0.2s;
   font-size: 1rem;
+  z-index: 1;
 }
 .video-scrubber.show {
   opacity: 1.0;
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index c0eb1ea..77e782c 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -244,7 +244,9 @@
 
 /* footnotes */
 
-.player-transcript .paragraph.intro_paragraph .footnote {
+.player-transcript .paragraph.intro_paragraph .footnote,
+.player-transcript .paragraph.blockquote .footnote,
+.player-transcript .paragraph.pullquote .footnote {
   font-size: 2.0rem;
   position: relative;
   top: -1.4rem;
-- 
cgit v1.2.3-70-g09d2