feat: adds min-aspect-ratio and viewport method

packages/b-ber-reader-react/src/components/Frame.jsx

@@ -3,7 +3,6 @@ import isPlainObject from 'lodash/isPlainObject'
 import { connect } from 'react-redux'
 import { Layout, DebugGrid } from '.'
 import Viewport from '../helpers/Viewport'
-import { layouts } from '../constants'
 import Messenger from '../lib/Messenger'
 import Asset from '../helpers/Asset'
 
@@ -56,7 +55,7 @@ class Frame extends React.Component {
       fontSize,
     }
 
-    if (this.props.layout === layouts.SCROLL || Viewport.isMobile()) {
+    if (Viewport.verticallyScrolling(this.props)) {
       // Mobile
       style = {
         ...style,

packages/b-ber-reader-react/src/components/Layout.jsx

@@ -15,7 +15,7 @@ import ReaderContext from '../lib/reader-context'
 import { RESIZE_DEBOUNCE_TIMER, layouts } from '../constants'
 
 function Leaves({ layout, leafLeftStyles, leafRightStyles }) {
-  return layout === layouts.SCROLL || Viewport.isMobile() ? null : (
+  return Viewport.verticallyScrolling({ layout }) ? null : (
     <>
       <div className="bber-leaf bber-leaf--left" style={leafLeftStyles} />
       <div className="bber-leaf bber-leaf--right" style={leafRightStyles} />
@@ -175,7 +175,9 @@ class Layout extends React.Component {
     if (layout === layouts.SCROLL) {
       contextClass = 'scroll'
     } else {
-      contextClass = Viewport.isMobile() ? 'mobile' : 'desktop'
+      contextClass = Viewport.verticallyScrolling({ layout })
+        ? 'mobile'
+        : 'desktop'
     }
 
     const defaultContentStyles = { padding: 0, margin: 0 }

packages/b-ber-reader-react/src/components/Marker.jsx

@@ -6,7 +6,6 @@ import { isNumeric } from '../helpers/Types'
 import Viewport from '../helpers/Viewport'
 import withNodePosition from '../lib/with-node-position'
 import * as markerActions from '../actions/markers'
-import { layouts } from '../constants'
 import browser from '../lib/browser'
 
 class Marker extends React.Component {
@@ -77,8 +76,7 @@ class Marker extends React.Component {
 
     if (
       !this.props.elemRef?.current ||
-      Viewport.isMobile() ||
-      this.props.readerSettings.layout === layouts.SCROLL
+      Viewport.verticallyScrolling(this.props.readerSettings)
     ) {
       return offsetHeight
     }

packages/b-ber-reader-react/src/components/Navigation/NavigationFooter.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Viewport from '../../helpers/Viewport'
-import { layouts } from '../../constants'
 import { ChapterNext, ChapterPrevious, PageNext, PagePrevious } from './Icon'
 
 const show = {
@@ -17,14 +16,12 @@ const show = {
   },
   page: {
     prev: props =>
-      props.layout !== layouts.SCROLL &&
-      !Viewport.isMobile() &&
+      !Viewport.verticallyScrolling(props) &&
       props.uiOptions.navigation.footer_icons.page &&
       (props.currentSpineItemIndex !== 0 || props.spreadIndex !== 0),
 
     next: props =>
-      props.layout !== layouts.SCROLL &&
-      !Viewport.isMobile() &&
+      !Viewport.verticallyScrolling(props) &&
       props.uiOptions.navigation.footer_icons.page &&
       (props.currentSpineItemIndex !== props.spine.length - 1 ||
         props.spreadIndex !== props.lastSpreadIndex),

packages/b-ber-reader-react/src/components/Reader/index.jsx

@@ -13,7 +13,6 @@ import withDeferredCallbacks from '../../lib/with-deferred-callbacks'
 import ReaderContext from '../../lib/reader-context'
 import Viewport from '../../helpers/Viewport'
 import { unlessDefined } from '../../helpers/utils'
-import { layouts } from '../../constants'
 import * as viewActions from '../../actions/view'
 import * as viewerSettingsActions from '../../actions/viewer-settings'
 import * as readerSettingsActions from '../../actions/reader-settings'
@@ -256,9 +255,7 @@ class Reader extends Component {
       columnGap,
     } = this.props.viewerSettings
 
-    const { layout } = this.props.readerSettings
-
-    const isScrolling = layout === layouts.SCROLL || Viewport.isMobile()
+    const isScrolling = Viewport.verticallyScrolling(this.props.readerSettings)
 
     let translateX = 0
     if (!isScrolling) {

packages/b-ber-reader-react/src/components/Reader/navigation.js

@@ -1,5 +1,4 @@
 import { findIndex } from 'lodash'
-import { layouts } from '../../constants'
 import Url from '../../helpers/Url'
 import Viewport from '../../helpers/Viewport'
 import Messenger from '../../lib/Messenger'
@@ -111,9 +110,7 @@ export function navigateToElementById(id) {
 
   // Scroll to vertical position, leave a bit of room for the controls and
   // whitespace around the element
-  const { layout } = this.props.readerSettings
-
-  if (layout === layouts.SCROLL || Viewport.isMobile()) {
+  if (Viewport.verticallyScrolling(this.props.readerSettings)) {
     const padding = 25
     const offset =
       document.querySelector('.bber-controls__header').offsetHeight + padding

packages/b-ber-reader-react/src/components/Spread.jsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { debug } from '../config'
-import { isNumeric } from '../helpers/Types'
+// import { isNumeric } from '../helpers/Types'
 import Viewport from '../helpers/Viewport'
 import { SpreadImageStyles } from '.'
 import SpreadContext from '../lib/spread-context'
-import { layouts } from '../constants'
 
 class Spread extends React.Component {
-  state = {
-    left: '0px',
-    spreadPosition: 0,
-    recto: false,
-    verso: false,
-    elementEdgeLeft: 0,
-    unbound: false,
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      left: '0px',
+      spreadPosition: 0,
+      recto: false,
+      verso: false,
+      elementEdgeLeft: 0,
+      unbound: false,
+    }
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
@@ -44,16 +47,16 @@ class Spread extends React.Component {
     this.updateChildElementPositions()
   }
 
-  calculateSpreadOffset = () => {
-    let { height } = this.props.viewerSettings
-    const { paddingTop, paddingBottom } = this.props.viewerSettings
-    const padding = paddingTop + paddingBottom
+  // calculateSpreadOffset = () => {
+  //   let { height } = this.props.viewerSettings
+  //   const { paddingTop, paddingBottom } = this.props.viewerSettings
+  //   const padding = paddingTop + paddingBottom
 
-    height = isNumeric(height) ? height * 2 - padding * 2 : height
-    if (isNumeric(height)) height -= 1 // nudge to prevent overflow onto next spread
+  //   height = isNumeric(height) ? height * 2 - padding * 2 : height
+  //   if (isNumeric(height)) height -= 1 // nudge to prevent overflow onto next spread
 
-    this.updateChildElementPositions()
-  }
+  //   this.updateChildElementPositions()
+  // }
 
   // Spread.updateChildElementPositions lays out absolutely positioned images
   // over fullbleed placeholders for FF and Safari. This is Chrome's default
@@ -80,10 +83,8 @@ class Spread extends React.Component {
     const spreadPosition = Math.ceil(elementEdgeLeft / layoutWidth)
     // console.log('spreadPosition', elementEdgeLeft / layoutWidth, spreadPosition)
 
-    const { layout } = this.props.readerSettings
-
     let left = 0
-    if (!Viewport.isMobile() && layout !== layouts.SCROLL) {
+    if (!Viewport.verticallyScrolling(this.props.readerSettings)) {
       left = layoutWidth * spreadPosition
       // if (recto) left -= layoutWidth
       if (unbound) left = 0
@@ -117,6 +118,7 @@ class Spread extends React.Component {
     if (debug) styles = { ...styles, ...debugStyles }
 
     return (
+      // eslint-disable-next-line react/jsx-props-no-spreading
       <div {...rest} id={`spread__${markerId}`} style={styles}>
         <SpreadImageStyles
           recto={recto}
@@ -128,6 +130,7 @@ class Spread extends React.Component {
           // markerX={elementEdgeLeft}
         />
 
+        {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
         <SpreadContext.Provider value={{ left, layout }}>
           {this.props.children}
         </SpreadContext.Provider>

packages/b-ber-reader-react/src/components/SpreadImageStyles.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Viewport from '../helpers/Viewport'
-import { layouts } from '../constants'
 
 // Figures in spreads are positioned absolutely, so the fullbleed images
 // contained inside them overflow on either side. we create a style block for
@@ -30,7 +29,7 @@ function SpreadImageStyles(props) {
   // console.log('recto || unbound', recto, unbound, spreadPosition)
 
   // prettier-ignore
-  const styles = props.layout === layouts.SCROLL || Viewport.isMobile() ? null : `
+  const styles = Viewport.verticallyScrolling(props) ? null : `
     /* Previous pages */
     .bber-spread-index__${adjustedSpreadPosition - 2} #spread__${markerRefId} > figure,
     .bber-spread-index__${adjustedSpreadPosition - 2} #spread__${markerRefId} > .spread__content,

packages/b-ber-reader-react/src/constants/index.js

@@ -55,6 +55,9 @@ export const BREAKPOINT_VERTICAL_LARGE = 860
 export const LAYOUT_MAX_HEIGHT = 480
 export const LAYOUT_MAX_WIDTH = 1921
 
+// Enforce a single column scrolling layout on awkward screen sizes
+export const MINIMUM_ONE_COLUMN_ASPECT_RATIO = 13 / 5
+
 // Columns
 export const DESKTOP_COLUMN_COUNT = 16
 export const MOBILE_COLUMN_COUNT = 9

packages/b-ber-reader-react/src/helpers/Viewport.js

@@ -16,6 +16,8 @@ import {
   HORIZONTAL_BREAKPOINT_COUNT,
   VERTICAL_BREAKPOINT_COUNT,
   FRAME_SIZE,
+  MINIMUM_ONE_COLUMN_ASPECT_RATIO,
+  layouts,
 } from '../constants'
 
 import { isNumeric } from './Types'
@@ -236,6 +238,11 @@ class Viewport {
     Viewport.getDimensions(Viewport.getBreakpointXY())
 
   static optimized = () => Viewport.getDimensionsFromMatrix()
+
+  static verticallyScrolling = ({ layout }) =>
+    Viewport.isMobile() ||
+    layout === layouts.SCROLL ||
+    window.innerWidth / window.innerHeight >= MINIMUM_ONE_COLUMN_ASPECT_RATIO
 }
 
 export default Viewport

packages/b-ber-reader-react/src/helpers/media.js

@@ -1,7 +1,6 @@
 import omit from 'lodash/omit'
 import Url from './Url'
 import Viewport from './Viewport'
-import { layouts } from '../constants'
 
 export const getPlayerPropsFromQueryString = queryString =>
   Url.parseQueryString(queryString)
@@ -61,8 +60,7 @@ export const getPlayingStateOnUpdate = (
   // Play or pause the video
   const playing =
     elementSpreadIndex === visibleSpreadIndex &&
-    !Viewport.isMobile() &&
-    props.readerSettings.layout !== layouts.SCROLL
+    !Viewport.verticallyScrolling(props.readerSettings)
 
   return { playing, currentSpreadIndex }
 }

packages/b-ber-reader-react/src/lib/with-dimensions.jsx

@@ -5,7 +5,6 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import Viewport from '../helpers/Viewport'
 import { isNumeric } from '../helpers/Types'
-import { layouts } from '../constants'
 import * as viewerSettingsActions from '../actions/viewer-settings'
 
 const withDimensions = WrappedComponent => {
@@ -42,9 +41,7 @@ const withDimensions = WrappedComponent => {
     }
 
     updateDimensions() {
-      const scrollingLayout =
-        this.props.layout === layouts.SCROLL || Viewport.isMobile()
-
+      const scrollingLayout = Viewport.verticallyScrolling(this.props)
       const width = this.getWidth(scrollingLayout)
       const height = scrollingLayout ? 'auto' : window.innerHeight
       const columns = scrollingLayout ? 1 : 2
@@ -53,7 +50,7 @@ const withDimensions = WrappedComponent => {
     }
 
     getFrameHeight() {
-      if (this.props.layout === layouts.SCROLL || Viewport.isMobile()) {
+      if (Viewport.verticallyScrolling(this.props)) {
         return 'auto'
       }
 

packages/b-ber-reader-react/src/lib/with-iframe-position.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Viewport from '../helpers/Viewport'
-import { layouts } from '../constants'
 
 const withIframePosition = (WrappedComponent, options = { enabled: false }) =>
   class WrapperComponent extends React.Component {
@@ -9,10 +8,14 @@ const withIframePosition = (WrappedComponent, options = { enabled: false }) =>
     // There's a bug in Chrome 81 that causes iframes on a different domain than
     // the host not to load in multiple column layouts. Following props are used
     // for element positioning in the work-around commened on below.
-    state = {
-      iframePlaceholderTop: 0,
-      iframePlaceholderWidth: 0,
-      iframePlaceholderHeight: 0,
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        iframePlaceholderTop: 0,
+        iframePlaceholderWidth: 0,
+        iframePlaceholderHeight: 0,
+      }
     }
 
     UNSAFE_componentWillMount() {
@@ -38,7 +41,7 @@ const withIframePosition = (WrappedComponent, options = { enabled: false }) =>
     // placeholder position to check if the floating element's position matches,
     // and call again if not.
     updateIframePosition = () => {
-      if (this.props.layout === layouts.SCROLL_LAYOUT || Viewport.isMobile()) {
+      if (Viewport.verticallyScrolling(this.props)) {
         return
       }
 
@@ -96,7 +99,9 @@ const withIframePosition = (WrappedComponent, options = { enabled: false }) =>
     render() {
       return (
         <WrappedComponent
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...this.props}
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...this.state}
           iframeStyleBlock={this.iframeStyleBlock}
           innerRef={ref => (this.iframePlaceholder = ref)}