Полноэкранное видео по OrientationChange через GatsbyJS / ReactJS (что такое наилучшая практика?)

Question

Мне нужна рекомендация GatsbyJS / ReactJS по добавлению прослушивателя событий окна orientationchange для включения полноэкранного просмотра элемента <video> через css на мобильном телефоне.

В настоящее время я достигаю рабочего процессавключив тег <script /> вместе с dangerouslySetInnerHTML.Является ли тег <script> и css лучшим способом достижения этого?

import React from 'react'

const LivePage = () => (
    <>
      <script
        dangerouslySetInnerHTML={{ __html:
          `window.addEventListener("orientationchange", function() {
            const elem = document.querySelector( 'video' );
            if (window.orientation === 90 || window.orientation === -90){
              elem.classList.add( 'full' );
            } else {
              elem.classList.remove( 'full' );
            }
          })`
        }}
      />
      <div className="video">
        <video src="//myvideo.mp4" />
      </div>
    <>
  )

export default LivePage

Ассоциированный SASS / CSS

video.full
  background-color: $black
  width: 100vw
  height: 100vh
  position: absolute
  top: 0
  left: 0
  object-fit: contain
  z-index: 50

Answer 1

Вы делаете много неправильно.Возможно, вам нужно прочитать документацию React и узнать о потоке данных (сверху вниз), состоянии и рендеринге.Вот пример того, как вы можете делать то, что вы пытаетесь сделать, используя React 16.8+ с хуками:

import React, { useState, useEffect } from "react"

const LivePage = () => {
  const [fullScreen, setFullScreen] = useState(false)

  useEffect(() => {
    const listener = () => {
      setFullScreen(Math.abs(window.orientation) === 90)
    }
    window.addEventListener("orientationchange", listener)

    return () => {
      window.removeEventListener(listener)
    }
  }, [setFullScreen])

  return (
    <div className="video">
      <video src="//myvideo.mp4" className={fullScreen && "full"} />
    </div>
  )
}

export default LivePage

Или без использования React Hooks (например, для версий React <16.8), это фактически то же самое: </p>

import React from "react"

class LivePage extends React.PureComponent {
  state = {
    fullScreen: false,
  }

  orientationListener = () => {
    this.setState({ fullScreen: Math.abs(window.orientation) === 90 })
  }

  componentDidMount() {
    window.addEventListener("orientationchange", this.orientationListener)
  }

  componentWillUnmount() {
    window.removeEventListener(this.orientationListener)
  }

  render() {
    return (
      <div className="video">
        <video
          src="//myvideo.mp4"
          className={this.state.fullScreen && "full"}
        />
      </div>
    )
  }
}

export default LivePage