lbry-desktop/ui/component/embedPlayButton/view.jsx

74 lines
1.9 KiB
React
Raw Normal View History

// @flow
import React, { useEffect } from 'react';
import Button from 'component/button';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import { useHistory } from 'react-router-dom';
import useIsMobile from 'effects/use-is-mobile';
import { formatLbryUrlForWeb } from 'util/url';
type Props = {
uri: string,
thumbnail: string,
claim: ?Claim,
doResolveUri: string => void,
doFetchCostInfoForUri: string => void,
doSetFloatingUri: string => void,
costInfo: ?{ cost: number },
floatingPlayerEnabled: boolean,
2020-05-21 18:53:21 +02:00
doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
doAnaltyicsPurchaseEvent: GetResponse => void,
};
export default function EmbedPlayButton(props: Props) {
const {
uri,
thumbnail = '',
claim,
doResolveUri,
doFetchCostInfoForUri,
doSetFloatingUri,
floatingPlayerEnabled,
doPlayUri,
2020-05-21 18:53:21 +02:00
doAnaltyicsPurchaseEvent,
costInfo,
} = props;
const { push } = useHistory();
const isMobile = useIsMobile();
const hasResolvedUri = claim !== undefined;
const disabled = !hasResolvedUri || !costInfo;
useEffect(() => {
2020-05-21 18:53:21 +02:00
doResolveUri(uri);
doFetchCostInfoForUri(uri);
}, [uri, doResolveUri, doFetchCostInfoForUri]);
function handleClick() {
if (disabled) {
2020-05-21 18:53:21 +02:00
return;
}
if (isMobile || !floatingPlayerEnabled) {
const formattedUrl = formatLbryUrlForWeb(uri);
push(formattedUrl);
} else {
2020-05-21 18:53:21 +02:00
doPlayUri(uri, undefined, undefined, fileInfo => {
doSetFloatingUri(uri);
doAnaltyicsPurchaseEvent(fileInfo);
});
}
}
return (
<div
disabled={disabled}
role="button"
className="embed__inline-button"
onClick={handleClick}
style={{ backgroundImage: `url('${thumbnail.replace(/'/g, "\\'")}')` }}
>
<FileViewerEmbeddedTitle uri={uri} isInApp />
<Button onClick={handleClick} iconSize={30} title={__('Play')} className={'button--icon button--play'} />
</div>
);
}