danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-12-04 18:50:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Viewer Player: Display big play button on iOS (#1309)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-23 17:01:41 +03:00
parent c2abfa48c3
commit 3e5564717c
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/mediaViewer/VideoPlayer.scss
View File

@ -57,6 +57,25 @@
} }
} }
.play-button {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 3.25rem;
height: 3.25rem;
background-color: rgba(0, 0, 0, 0.5) !important;
body:not(.animation-level-0) & {
transition: opacity .3s ease !important;
}
.icon-play {
font-size: 1.75rem;
position: relative;
left: .125rem;
}
}
.spinner-container { .spinner-container {
position: absolute; position: absolute;
top: 0; top: 0;

13
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -2,6 +2,8 @@ import React, {
FC, memo, useCallback, useEffect, useRef, useState, FC, memo, useCallback, useEffect, useRef, useState,
} from '../../lib/teact/teact'; } from '../../lib/teact/teact';
import { ApiDimensions } from '../../api/types';
import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment'; import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
import useShowTransition from '../../hooks/useShowTransition'; import useShowTransition from '../../hooks/useShowTransition';
import useBuffering from '../../hooks/useBuffering'; import useBuffering from '../../hooks/useBuffering';
@ -11,9 +13,9 @@ import safePlay from '../../util/safePlay';
import VideoPlayerControls from './VideoPlayerControls'; import VideoPlayerControls from './VideoPlayerControls';
import ProgressSpinner from '../ui/ProgressSpinner'; import ProgressSpinner from '../ui/ProgressSpinner';
import Button from '../ui/Button';
import './VideoPlayer.scss'; import './VideoPlayer.scss';
import { ApiDimensions } from '../../api/types';
type OwnProps = { type OwnProps = {
url?: string; url?: string;
@ -53,6 +55,10 @@ const VideoPlayer: FC<OwnProps> = ({
shouldRender: shouldRenderSpinner, shouldRender: shouldRenderSpinner,
transitionClassNames: spinnerClassNames, transitionClassNames: spinnerClassNames,
} = useShowTransition(!isBuffered, undefined, undefined, 'slow'); } = useShowTransition(!isBuffered, undefined, undefined, 'slow');
const {
shouldRender: shouldRenderPlayButton,
transitionClassNames: playButtonClassNames,
} = useShowTransition(IS_IOS && !isPlayed && !shouldRenderSpinner, undefined, undefined, 'slow');
useEffect(() => { useEffect(() => {
if (noPlay || !isMediaViewerOpen) { if (noPlay || !isMediaViewerOpen) {
@ -173,6 +179,11 @@ const VideoPlayer: FC<OwnProps> = ({
{url && <source src={url} />} {url && <source src={url} />}
</video> </video>
</div> </div>
{shouldRenderPlayButton && (
<Button round className={`play-button ${playButtonClassNames}`} onClick={togglePlayState}>
<i className="icon-play" />
</Button>
)}
{shouldRenderSpinner && ( {shouldRenderSpinner && (
<div className={['spinner-container', spinnerClassNames].join(' ')}> <div className={['spinner-container', spinnerClassNames].join(' ')}>
{!isBuffered && <div className="buffering">Buffering...</div>} {!isBuffered && <div className="buffering">Buffering...</div>}