Merge pull request #2019 from tf/portrait-inline-video

Allow setting portrait version for inline videos
codevise · Oct 19, 2023 · aba4f3b · aba4f3b
2 parents dbf6df8 + 301723b
commit aba4f3b
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 11 deletions.
diff --git a/entry_types/scrolled/config/locales/new/portrait_inline_video.de.yml b/entry_types/scrolled/config/locales/new/portrait_inline_video.de.yml
@@ -0,0 +1,18 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineVideo:
+          attributes:
+            portraitId:
+              label: Video (Hochkant)
+              inline_help: |
+                Wird gezeigt, wenn der Browser-Viewport höher als
+                breit ist - zum Beispiel auf Smartphones oder Tablets
+                in Portrait-Ausrichtung. Kann als Alternative zu einem
+                querformatigen Video konfiguriert werden, um den
+                verfügbaren Platz besser zu nutzen.
+            portraitPosterId:
+              label: Poster (Hochkant)
+              inline_help: |
+                Poster-Bild für das alternative Hochkant-Video.
diff --git a/entry_types/scrolled/config/locales/new/portrait_inline_video.en.yml b/entry_types/scrolled/config/locales/new/portrait_inline_video.en.yml
@@ -0,0 +1,19 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        inlineVideo:
+          attributes:
+            portraitId:
+              label: Video (Portrait)
+              inline_help: |
+                Displayed when the browser viewport is taller than
+                wide, for example on phones or tablets in portrait
+                orientation. Can be used to supply an alternative to a
+                landscape video that makes better use of the available
+                space.
+            portraitPosterId:
+              label: Poster (Portrait)
+              inline_help: |
+                Poster image displayed for the alternative portrait
+                video.
diff --git a/entry_types/scrolled/package/src/contentElements/inlineAudio/InlineAudio.js b/entry_types/scrolled/package/src/contentElements/inlineAudio/InlineAudio.js
@@ -16,7 +16,7 @@ import {
   useAudioFocus
 } from 'pageflow-scrolled/frontend';
 
-export function InlineAudio({contentElementId, sectionProps, configuration}) {
+export function InlineAudio({contentElementId, configuration}) {
   const audioFile = useFile({collectionName: 'audioFiles', permaId: configuration.id});
   const posterImageFile = useFile({collectionName: 'imageFiles', permaId: configuration.posterId});
 
@@ -68,7 +68,6 @@ export function InlineAudio({contentElementId, sectionProps, configuration}) {
                                  playerActions={playerActions}
                                  standAlone={!posterImageFile}
                                  configuration={configuration}
-                                 sectionProps={sectionProps}
                                  onPlayerClick={onPlayerClick}>
               <PlayerEventContextDataProvider playerDescription="Inline Audio"
                                               playbackMode={configuration.autoplay ? 'autoplay' : 'manual'}>

diff --git a/entry_types/scrolled/package/src/contentElements/inlineVideo/InlineVideo.js b/entry_types/scrolled/package/src/contentElements/inlineVideo/InlineVideo.js
@@ -13,7 +13,8 @@ import {
   useFile,
   usePlayerState,
   useContentElementLifecycle,
-  useAudioFocus
+  useAudioFocus,
+  usePortraitOrientation
 } from 'pageflow-scrolled/frontend';
 
 import {MutedIndicator} from './MutedIndicator';
@@ -23,13 +24,65 @@ import {
   getPlayerClickHandler
 } from './handlers';
 
-export function InlineVideo({contentElementId, sectionProps, configuration}) {
+export function InlineVideo({contentElementId, configuration}) {
   const videoFile = useFile({collectionName: 'videoFiles',
                              permaId: configuration.id});
-
   const posterImageFile = useFile({collectionName: 'imageFiles',
                                    permaId: configuration.posterId});
 
+  const portraitVideoFile = useFile({collectionName: 'videoFiles',
+                                     permaId: configuration.portraitId});
+  const portraitPosterImageFile = useFile({collectionName: 'imageFiles',
+                                           permaId: configuration.portraitPosterId});
+
+  // Only render OrientationAwareInlineImage if a portrait image has
+  // been selected. This prevents having the component rerender on
+  // orientation changes even if it does not depend on orientation at
+  // all.
+  if (portraitVideoFile) {
+    return (
+      <OrientationAwareInlineVideo landscapeVideoFile={videoFile}
+                                   portraitVideoFile={portraitVideoFile}
+                                   landscapePosterImageFile={posterImageFile}
+                                   portraitPosterImageFile={portraitPosterImageFile}
+                                   contentElementId={contentElementId}
+                                   configuration={configuration} />
+    );
+  }
+  else {
+    return (
+      <OrientationUnawareInlineVideo videoFile={videoFile}
+                                     posterImageFile={posterImageFile}
+                                     contentElementId={contentElementId}
+                                     configuration={configuration} />
+    )
+  }
+}
+
+function OrientationAwareInlineVideo({
+  landscapeVideoFile, portraitVideoFile,
+  landscapePosterImageFile, portraitPosterImageFile,
+  contentElementId, configuration
+}) {
+  const portraitOrientation = usePortraitOrientation();
+  const videoFile = portraitOrientation && portraitVideoFile ?
+                    portraitVideoFile : landscapeVideoFile;
+  const posterImageFile = portraitOrientation && portraitPosterImageFile ?
+                          portraitPosterImageFile : landscapePosterImageFile;
+
+  return (
+    <OrientationUnawareInlineVideo key={portraitOrientation}
+                                   videoFile={videoFile}
+                                   posterImageFile={posterImageFile}
+                                   contentElementId={contentElementId}
+                                   configuration={configuration} />
+  );
+}
+
+function OrientationUnawareInlineVideo({
+  videoFile, posterImageFile,
+  contentElementId, configuration
+}) {
   const [playerState, playerActions] = usePlayerState();
 
   return (
@@ -50,7 +103,6 @@ export function InlineVideo({contentElementId, sectionProps, configuration}) {
                       playerState={playerState}
                       playerActions={playerActions}
                       contentElementId={contentElementId}
-                      sectionProps={sectionProps}
                       configuration={configuration} />
             </FitViewport.Content>
           </ContentElementFigure>
@@ -63,7 +115,7 @@ export function InlineVideo({contentElementId, sectionProps, configuration}) {
 function Player({
   videoFile, posterImageFile,
   playerState, playerActions,
-  contentElementId, sectionProps, configuration
+  contentElementId, configuration
 }) {
   const {isEditable, isSelected} = useContentElementEditorState();
 
@@ -118,7 +170,6 @@ function Player({
                                          configuration.playbackMode === 'loop'}
                          hideBigPlayButton={configuration.playbackMode === 'loop'}
                          configuration={configuration}
-                         sectionProps={sectionProps}
                          onPlayerClick={onPlayerClick}>
       <PlayerEventContextDataProvider playerDescription="Inline Video"
                                       playbackMode={configuration.playbackMode ||

diff --git a/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js b/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js
@@ -20,13 +20,26 @@ editor.contentElementTypes.register('inlineVideo', {
         positioning: false,
         defaultTextTrackFilePropertyName: 'defaultTextTrackFileId'
       });
-
       this.input('posterId', FileInputView, {
         collection: 'image_files',
         fileSelectionHandler: 'contentElementConfiguration',
         positioning: false
       });
 
+      this.input('portraitId', FileInputView, {
+        collection: 'video_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false,
+        defaultTextTrackFilePropertyName: 'defaultTextTrackFileId'
+      });
+      this.input('portraitPosterId', FileInputView, {
+        collection: 'image_files',
+        fileSelectionHandler: 'contentElementConfiguration',
+        positioning: false,
+        visibleBinding: 'portraitId',
+        visible: () => this.model.getReference('portraitId', 'video_files')
+      });
+
       this.view(SeparatorView);
 
       this.input('playbackMode', SelectInputView, {

diff --git a/entry_types/scrolled/package/src/frontend/MediaPlayerControls.js b/entry_types/scrolled/package/src/frontend/MediaPlayerControls.js
@@ -58,8 +58,7 @@ export function MediaPlayerControls(props) {
 };
 
 MediaPlayerControls.defaultProps = {
-  configuration: {},
-  sectionProps: {}
+  configuration: {}
 }
 
 function getTextTracksMenuItems(textTracks, t) {