Embed: add replay button

Also, changed "Rewatch or Discuss" to "Discuss + external arrow" since there is a dedicated re-watch button.
This commit is contained in:
infinite-persistence 2021-09-21 15:54:20 +08:00 committed by zeppi
parent fcea4005eb
commit 9ec5a7c298
3 changed files with 18 additions and 2 deletions

View file

@ -2169,5 +2169,6 @@
"Content Page": "Content Page", "Content Page": "Content Page",
"Card Last 4": "Card Last 4", "Card Last 4": "Card Last 4",
"Search blocked channel name": "Search blocked channel name", "Search blocked channel name": "Search blocked channel name",
"Discuss": "Discuss",
"--end--": "--end--" "--end--": "--end--"
} }

View file

@ -231,6 +231,10 @@
.button + .button { .button + .button {
margin-left: var(--spacing-m); margin-left: var(--spacing-m);
} }
.button--link {
vertical-align: middle;
}
} }
.file-viewer__overlay-logo { .file-viewer__overlay-logo {

View file

@ -1,6 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import * as ICONS from 'constants/icons';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { URL, SITE_NAME } from 'config'; import { URL, SITE_NAME } from 'config';
@ -34,6 +35,7 @@ function FileViewerEmbeddedEnded(props: Props) {
// $FlowFixMe // $FlowFixMe
const prompt = prompts[promptKey]; const prompt = prompts[promptKey];
const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=${promptKey}`; const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=${promptKey}`;
const showReplay = Boolean(window.player);
return ( return (
<div className="file-viewer__overlay"> <div className="file-viewer__overlay">
@ -46,9 +48,18 @@ function FileViewerEmbeddedEnded(props: Props) {
<> <>
<div className="file-viewer__overlay-title file-viewer_embed-ended-title">{prompt}</div> <div className="file-viewer__overlay-title file-viewer_embed-ended-title">{prompt}</div>
<div className="file-viewer__overlay-actions"> <div className="file-viewer__overlay-actions">
{ /* add button to replay? */ }
<> <>
<Button label={__('Rewatch or Discuss')} button="primary" href={lbrytvLink} /> {showReplay && (
<Button
title={__('Replay')}
button="link"
iconRight={ICONS.REPLAY}
onClick={() => {
if (window.player) window.player.play();
}}
/>
)}
<Button label={__('Discuss')} iconRight={ICONS.EXTERNAL} button="primary" href={lbrytvLink} />
{!isAuthenticated && ( {!isAuthenticated && (
<Button <Button
label={__('Join %SITE_NAME%', { SITE_NAME })} label={__('Join %SITE_NAME%', { SITE_NAME })}