add option for light background on embeds
This commit is contained in:
parent
153a17af72
commit
ccd1cabe04
2 changed files with 21 additions and 1 deletions
ui
|
@ -1,10 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
import FileRender from 'component/fileRender';
|
import FileRender from 'component/fileRender';
|
||||||
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
||||||
import Spinner from 'component/spinner';
|
import Spinner from 'component/spinner';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import { formatLbryUrlForWeb } from 'util/url';
|
import { formatLbryUrlForWeb } from 'util/url';
|
||||||
|
import { useHistory } from 'react-router';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -20,6 +22,11 @@ type Props = {
|
||||||
export const EmbedContext = React.createContext();
|
export const EmbedContext = React.createContext();
|
||||||
const EmbedWrapperPage = (props: Props) => {
|
const EmbedWrapperPage = (props: Props) => {
|
||||||
const { resolveUri, claim, uri, doPlayUri, costInfo, streamingUrl, doFetchCostInfoForUri, isResolvingUri } = props;
|
const { resolveUri, claim, uri, doPlayUri, costInfo, streamingUrl, doFetchCostInfoForUri, isResolvingUri } = props;
|
||||||
|
const {
|
||||||
|
location: { search },
|
||||||
|
} = useHistory();
|
||||||
|
const urlParams = new URLSearchParams(search);
|
||||||
|
const embedLightBackground = urlParams.get('embedBackgroundLight');
|
||||||
const haveClaim = Boolean(claim);
|
const haveClaim = Boolean(claim);
|
||||||
const readyToDisplay = claim && streamingUrl;
|
const readyToDisplay = claim && streamingUrl;
|
||||||
const loading = !claim && isResolvingUri;
|
const loading = !claim && isResolvingUri;
|
||||||
|
@ -43,7 +50,11 @@ const EmbedWrapperPage = (props: Props) => {
|
||||||
}, [uri, haveClaim, doFetchCostInfoForUri]);
|
}, [uri, haveClaim, doFetchCostInfoForUri]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="embed__wrapper">
|
<div
|
||||||
|
className={classnames('embed__wrapper', {
|
||||||
|
'embed__wrapper--light-background': embedLightBackground,
|
||||||
|
})}
|
||||||
|
>
|
||||||
<EmbedContext.Provider value>
|
<EmbedContext.Provider value>
|
||||||
{readyToDisplay ? (
|
{readyToDisplay ? (
|
||||||
<FileRender uri={uri} embedded />
|
<FileRender uri={uri} embedded />
|
||||||
|
|
|
@ -9,6 +9,15 @@
|
||||||
background-color: var(--color-black);
|
background-color: var(--color-black);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.embed__wrapper--light-background {
|
||||||
|
@extend .embed__wrapper;
|
||||||
|
|
||||||
|
.vjs-poster,
|
||||||
|
video {
|
||||||
|
background-color: var(--color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.embed__inline-button {
|
.embed__inline-button {
|
||||||
@include thumbnail;
|
@include thumbnail;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Loading…
Add table
Reference in a new issue