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

---
 animism-align/frontend/app/constants.js                        |  7 +++++++
 animism-align/frontend/app/utils/annotation.utils.js           |  3 +++
 .../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 +++-
 8 files changed, 34 insertions(+), 4 deletions(-)

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

diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js
index b6b3bf2..647efbc 100644
--- a/animism-align/frontend/app/constants.js
+++ b/animism-align/frontend/app/constants.js
@@ -99,6 +99,13 @@ export const CURTAIN_COLOR_LOOKUP = CURTAIN_COLORS.reduce((a,b) => {
   return a
 }, {})
 
+export const IMAGE_BACKGROUND_SIZE_OPTIONS = [
+  { label: 'cover', name: 'cover' },
+  { label: 'contain', name: 'contain' },
+  { label: '90% width', name: '90% auto' },
+  { label: '90% height', name: 'auto 90%' },
+]
+
 export const DISPLAY_SIZE = 2000
 export const DISPLAY_QUALITY= 80
 export const THUMBNAIL_SIZE = 320
diff --git a/animism-align/frontend/app/utils/annotation.utils.js b/animism-align/frontend/app/utils/annotation.utils.js
index 41e0e3b..d76f473 100644
--- a/animism-align/frontend/app/utils/annotation.utils.js
+++ b/animism-align/frontend/app/utils/annotation.utils.js
@@ -20,6 +20,9 @@ export const thumbnailURL = media => {
   // console.log(media)
   switch (media.type) {
     case 'video':
+      if (media.settings.poster) {
+        return media.settings.poster.url
+      }
       return media.settings.video.thumbnail_url
 
     case 'image':
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