unsupported yrbl

This commit is contained in:
jessop 2019-09-02 09:24:00 -04:00 committed by Sean Yesmunt
parent 6554c987ab
commit 5f388c31ae
4 changed files with 69 additions and 9 deletions

View file

@ -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;

View file

@ -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}

View file

@ -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;

View file

@ -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"
}