unsupported yrbl
This commit is contained in:
parent
6554c987ab
commit
5f388c31ae
4 changed files with 69 additions and 9 deletions
|
@ -7,6 +7,7 @@ import ImageViewer from 'component/viewers/imageViewer';
|
|||
import AppViewer from 'component/viewers/appViewer';
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import Yrbl from 'component/yrbl';
|
||||
|
||||
const DocumentViewer = React.lazy<*>(() =>
|
||||
import(
|
||||
|
@ -155,9 +156,24 @@ class FileRender extends React.PureComponent<Props> {
|
|||
}
|
||||
// @endif
|
||||
|
||||
// Message Error
|
||||
const unsupportedMessage = __("Sorry, we can't preview this file.");
|
||||
const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
|
||||
const unsupported = IS_WEB ? (
|
||||
<div className={'content__cover--disabled'}>
|
||||
<Yrbl
|
||||
className={'content__cover--disabled'}
|
||||
title={'Not available on LBRY TV'}
|
||||
subtitle={'You can view or download this file by installing the App'}
|
||||
uri={uri}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={'content__cover--disabled'}>
|
||||
<Yrbl
|
||||
title={'Content Downloaded'}
|
||||
subtitle={'This file is unsupported here, but you can view the content in an application of your choice'}
|
||||
uri={uri}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Return viewer
|
||||
return viewer || unsupported;
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
// The actual viewer for a file exists in FileViewer
|
||||
// They can't exist in one component because we need to handle/listen for the start of a new file view
|
||||
// while a file is currently being viewed
|
||||
import React, { useEffect, useCallback } from 'react';
|
||||
import React, { useEffect, useCallback, Fragment } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import Button from 'component/button';
|
||||
import isUserTyping from 'util/detect-typing';
|
||||
import Yrbl from 'component/yrbl';
|
||||
|
||||
const SPACE_BAR_KEYCODE = 32;
|
||||
|
||||
|
@ -44,6 +45,7 @@ export default function FileViewer(props: Props) {
|
|||
const cost = costInfo && costInfo.cost;
|
||||
const isPlayable = ['audio', 'video'].indexOf(mediaType) !== -1;
|
||||
const fileStatus = fileInfo && fileInfo.status;
|
||||
const supported = (IS_WEB && isStreamable) || !IS_WEB;
|
||||
|
||||
// Wrap this in useCallback because we need to use it to the keyboard effect
|
||||
// If we don't a new instance will be created for every render and react will think the dependencies have change, which will add/remove the listener for every render
|
||||
|
@ -87,14 +89,30 @@ export default function FileViewer(props: Props) {
|
|||
return (
|
||||
<div
|
||||
disabled={!hasCostInfo}
|
||||
onClick={viewFile}
|
||||
style={!obscurePreview && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {}}
|
||||
className={classnames('content__cover', {
|
||||
className={classnames({
|
||||
content__cover: supported,
|
||||
'content__cover--disabled': !supported,
|
||||
'card__media--nsfw': obscurePreview,
|
||||
'card__media--disabled': !fileInfo && insufficientCredits,
|
||||
})}
|
||||
>
|
||||
{!isPlaying && (
|
||||
{!supported && (
|
||||
<Yrbl
|
||||
type="happy"
|
||||
title={__('Unsupported File')}
|
||||
subtitle={
|
||||
<Fragment>
|
||||
<p>
|
||||
{__('Good news, though! You can')}{' '}
|
||||
<Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" />{' '}
|
||||
{'and have access to all file types.'}
|
||||
</p>
|
||||
</Fragment>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{!isPlaying && supported && (
|
||||
<Button
|
||||
onClick={viewFile}
|
||||
iconSize={30}
|
||||
|
|
|
@ -84,6 +84,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content__cover--disabled {
|
||||
@include thumbnail;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
margin: auto;
|
||||
|
||||
&:not(.card__media--nsfw) {
|
||||
background-color: #fff; // solid black to blend nicely when the video starts (if it doesn't take the full width)
|
||||
}
|
||||
|
||||
&:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.content__loading {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
@ -679,5 +679,9 @@
|
|||
"LBRY Download Complete": "LBRY Download Complete",
|
||||
"Blocked": "Blocked",
|
||||
"Unblock": "Unblock",
|
||||
"You have blocked this channel content.": "You have blocked this channel content."
|
||||
}
|
||||
"You have blocked this channel content.": "You have blocked this channel content.",
|
||||
"Content Downloaded": "Content Downloaded",
|
||||
"The viewer doesn't support this file type. See more info below.": "The viewer doesn't support this file type. See more info below.",
|
||||
"Catching up...": "Catching up...",
|
||||
"%s blocks behind": "%s blocks behind"
|
||||
}
|
Loading…
Reference in a new issue