|
@@ -1,6 +1,5 @@
|
|
|
import React, { useState } from 'react'
|
|
import React, { useState } from 'react'
|
|
|
import { Link } from 'react-router-dom'
|
|
import { Link } from 'react-router-dom'
|
|
|
-import { CSSTransition } from 'react-transition-group'
|
|
|
|
|
|
|
|
|
|
import { absoluteRoutes } from '@/config/routes'
|
|
import { absoluteRoutes } from '@/config/routes'
|
|
|
import { AssetType, useAsset } from '@/providers/assets'
|
|
import { AssetType, useAsset } from '@/providers/assets'
|
|
@@ -11,7 +10,6 @@ import { VideoPlayer } from '@/shared/components/VideoPlayer'
|
|
|
import { SvgActionPlay } from '@/shared/icons/ActionPlay'
|
|
import { SvgActionPlay } from '@/shared/icons/ActionPlay'
|
|
|
import { SvgActionSoundOff } from '@/shared/icons/ActionSoundOff'
|
|
import { SvgActionSoundOff } from '@/shared/icons/ActionSoundOff'
|
|
|
import { SvgActionSoundOn } from '@/shared/icons/ActionSoundOn'
|
|
import { SvgActionSoundOn } from '@/shared/icons/ActionSoundOn'
|
|
|
-import { transitions } from '@/shared/theme'
|
|
|
|
|
|
|
|
|
|
import {
|
|
import {
|
|
|
ButtonsContainer,
|
|
ButtonsContainer,
|
|
@@ -36,7 +34,6 @@ export const VideoHero: React.FC = () => {
|
|
|
const coverVideo = useVideoHero()
|
|
const coverVideo = useVideoHero()
|
|
|
|
|
|
|
|
const [videoPlaying, setVideoPlaying] = useState(false)
|
|
const [videoPlaying, setVideoPlaying] = useState(false)
|
|
|
- const [displayControls, setDisplayControls] = useState(false)
|
|
|
|
|
const [soundMuted, setSoundMuted] = useState(true)
|
|
const [soundMuted, setSoundMuted] = useState(true)
|
|
|
const { url: thumbnailPhotoUrl } = useAsset({
|
|
const { url: thumbnailPhotoUrl } = useAsset({
|
|
|
entity: coverVideo?.video,
|
|
entity: coverVideo?.video,
|
|
@@ -45,7 +42,6 @@ export const VideoHero: React.FC = () => {
|
|
|
|
|
|
|
|
const handlePlaybackDataLoaded = () => {
|
|
const handlePlaybackDataLoaded = () => {
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
- setDisplayControls(true)
|
|
|
|
|
setVideoPlaying(true)
|
|
setVideoPlaying(true)
|
|
|
}, VIDEO_PLAYBACK_DELAY)
|
|
}, VIDEO_PLAYBACK_DELAY)
|
|
|
}
|
|
}
|
|
@@ -105,22 +101,20 @@ export const VideoHero: React.FC = () => {
|
|
|
</GridItem>
|
|
</GridItem>
|
|
|
</LayoutGrid>
|
|
</LayoutGrid>
|
|
|
<ButtonsSpaceKeeper>
|
|
<ButtonsSpaceKeeper>
|
|
|
- <CSSTransition
|
|
|
|
|
- in={displayControls}
|
|
|
|
|
- timeout={parseInt(transitions.timings.loading)}
|
|
|
|
|
- classNames={transitions.names.fade}
|
|
|
|
|
- unmountOnExit
|
|
|
|
|
- appear
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ {coverVideo && (
|
|
|
<ButtonsContainer>
|
|
<ButtonsContainer>
|
|
|
- <Button to={absoluteRoutes.viewer.video(coverVideo ? coverVideo.video.id : '')} icon={<SvgActionPlay />}>
|
|
|
|
|
|
|
+ <Button
|
|
|
|
|
+ size="large"
|
|
|
|
|
+ to={absoluteRoutes.viewer.video(coverVideo ? coverVideo.video.id : '')}
|
|
|
|
|
+ icon={<SvgActionPlay />}
|
|
|
|
|
+ >
|
|
|
Play
|
|
Play
|
|
|
</Button>
|
|
</Button>
|
|
|
- <SoundButton variant="secondary" onClick={handleSoundToggleClick}>
|
|
|
|
|
|
|
+ <SoundButton size="large" variant="secondary" onClick={handleSoundToggleClick}>
|
|
|
{!soundMuted ? <SvgActionSoundOn /> : <SvgActionSoundOff />}
|
|
{!soundMuted ? <SvgActionSoundOn /> : <SvgActionSoundOff />}
|
|
|
</SoundButton>
|
|
</SoundButton>
|
|
|
</ButtonsContainer>
|
|
</ButtonsContainer>
|
|
|
- </CSSTransition>
|
|
|
|
|
|
|
+ )}
|
|
|
</ButtonsSpaceKeeper>
|
|
</ButtonsSpaceKeeper>
|
|
|
</InfoContainer>
|
|
</InfoContainer>
|
|
|
</Container>
|
|
</Container>
|
Rafał Pawłow