Compare commits
6 commits
master
...
mobile-ui-
Author | SHA1 | Date | |
---|---|---|---|
|
889c01d67f | ||
|
ab10a0cec8 | ||
|
6eee033b9c | ||
|
91f0ce637e | ||
|
5c8139f326 | ||
|
f94317c404 |
6 changed files with 66 additions and 8 deletions
ui
component
claimPreview
claimPreviewTile
fileWatchLaterLink
viewers/videoViewer
scss/component
|
@ -35,6 +35,7 @@ const AbandonedChannelPreview = lazyImport(() =>
|
||||||
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
|
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// preview images used on the landing page and on the channel page
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
claim: ?Claim,
|
claim: ?Claim,
|
||||||
|
@ -379,13 +380,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
<div className="claim-preview__hover-actions">
|
<div className="claim-preview__hover-actions">
|
||||||
{isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
|
{isPlayable && <FileWatchLaterLink focusable={false} uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
|
{/* @if TARGET='app' */}
|
||||||
<div className="claim-preview__hover-actions">
|
<div className="claim-preview__hover-actions">
|
||||||
{/* @if TARGET='app' */}
|
|
||||||
{claim && !isCollection && (
|
{claim && !isCollection && (
|
||||||
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton hideDownloadStatus />
|
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton hideDownloadStatus />
|
||||||
)}
|
)}
|
||||||
{/* @endif */}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* @endif */}
|
||||||
{!isLivestream && (
|
{!isLivestream && (
|
||||||
<div className="claim-preview__file-property-overlay">
|
<div className="claim-preview__file-property-overlay">
|
||||||
<PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
|
<PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
|
||||||
|
|
|
@ -53,6 +53,7 @@ type Props = {
|
||||||
isLivestream: boolean,
|
isLivestream: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// preview image cards used in related video functionality
|
||||||
function ClaimPreviewTile(props: Props) {
|
function ClaimPreviewTile(props: Props) {
|
||||||
const {
|
const {
|
||||||
history,
|
history,
|
||||||
|
@ -213,18 +214,19 @@ function ClaimPreviewTile(props: Props) {
|
||||||
<FileWatchLaterLink focusable={false} uri={uri} />
|
<FileWatchLaterLink focusable={false} uri={uri} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{/* @if TARGET='app' */}
|
||||||
<div className="claim-preview__hover-actions">
|
<div className="claim-preview__hover-actions">
|
||||||
{/* @if TARGET='app' */}
|
|
||||||
{isStream && (
|
{isStream && (
|
||||||
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
|
<FileDownloadLink focusable={false} uri={canonicalUrl} hideOpenButton />
|
||||||
)}
|
)}
|
||||||
{/* @endif */}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* @endif */}
|
||||||
|
|
||||||
<div className="claim-preview__file-property-overlay">
|
<div className="claim-preview__file-property-overlay">
|
||||||
<PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
|
<PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
{isCollection && (
|
{isCollection && (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
|
|
|
@ -37,7 +37,10 @@ function FileWatchLaterLink(props: Props) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// text that will show if you keep cursor over button
|
||||||
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
|
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
|
||||||
|
|
||||||
|
// label that is shown after hover
|
||||||
const label = !hasClaimInWatchLater ? __('Add') : __('Added');
|
const label = !hasClaimInWatchLater ? __('Add') : __('Added');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -52,7 +55,6 @@ function FileWatchLaterLink(props: Props) {
|
||||||
(isHovering ? ICONS.COMPLETED : ICONS.TIME)
|
(isHovering ? ICONS.COMPLETED : ICONS.TIME)
|
||||||
}
|
}
|
||||||
onClick={(e) => handleWatchLater(e)}
|
onClick={(e) => handleWatchLater(e)}
|
||||||
aria-hidden={!focusable}
|
|
||||||
tabIndex={focusable ? 0 : -1}
|
tabIndex={focusable ? 0 : -1}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -59,6 +59,7 @@ type Props = {
|
||||||
userId: ?number,
|
userId: ?number,
|
||||||
// allowPreRoll: ?boolean,
|
// allowPreRoll: ?boolean,
|
||||||
shareTelemetry: boolean,
|
shareTelemetry: boolean,
|
||||||
|
showAutoplayCountdown: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
// type VideoJSOptions = {
|
// type VideoJSOptions = {
|
||||||
|
@ -84,11 +85,12 @@ const VIDEO_JS_OPTIONS = {
|
||||||
controls: true,
|
controls: true,
|
||||||
html5: {
|
html5: {
|
||||||
vhs: {
|
vhs: {
|
||||||
overrideNative: !videojs.browser.IS_ANY_SAFARI,
|
overrideNative: !videojs.browser.IS_ANY_SAFARI, // don't override on safari
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// keys to bind to for keyboard shortcuts
|
||||||
const SPACE_BAR_KEYCODE = 32;
|
const SPACE_BAR_KEYCODE = 32;
|
||||||
const SMALL_F_KEYCODE = 70;
|
const SMALL_F_KEYCODE = 70;
|
||||||
const SMALL_M_KEYCODE = 77;
|
const SMALL_M_KEYCODE = 77;
|
||||||
|
@ -197,6 +199,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
userId,
|
userId,
|
||||||
// allowPreRoll,
|
// allowPreRoll,
|
||||||
shareTelemetry,
|
shareTelemetry,
|
||||||
|
showAutoplayCountdown,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [reload, setReload] = useState('initial');
|
const [reload, setReload] = useState('initial');
|
||||||
|
@ -493,6 +496,12 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
wrapper.setAttribute('data-vjs-player', 'true');
|
wrapper.setAttribute('data-vjs-player', 'true');
|
||||||
const el = document.createElement(isAudio ? 'audio' : 'video');
|
const el = document.createElement(isAudio ? 'audio' : 'video');
|
||||||
el.className = 'video-js vjs-big-play-centered ';
|
el.className = 'video-js vjs-big-play-centered ';
|
||||||
|
|
||||||
|
// show large play button when paused on ios
|
||||||
|
if (IS_IOS) {
|
||||||
|
el.classList.add('vjs-show-big-play-button-on-pause');
|
||||||
|
}
|
||||||
|
|
||||||
wrapper.appendChild(el);
|
wrapper.appendChild(el);
|
||||||
|
|
||||||
container.appendChild(wrapper);
|
container.appendChild(wrapper);
|
||||||
|
@ -553,6 +562,29 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
player.on('error', onError);
|
player.on('error', onError);
|
||||||
player.on('ended', onEnded);
|
player.on('ended', onEnded);
|
||||||
|
|
||||||
|
// on ios, show a play button when paused
|
||||||
|
if (IS_IOS) {
|
||||||
|
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
||||||
|
|
||||||
|
player.on('pause', function() {
|
||||||
|
const videoDiv = player.children_[0];
|
||||||
|
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
||||||
|
const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
|
||||||
|
const availableHeight = videoDiv.offsetHeight - controlBar.offsetHeight;
|
||||||
|
const topHeight = (((availableHeight - playBT.offsetHeight) / 2) + 3) + 'px';
|
||||||
|
|
||||||
|
playBT.style.top = topHeight;
|
||||||
|
playBT.style.left = leftWidth;
|
||||||
|
playBT.style.margin = 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
player.on('ended', function() {
|
||||||
|
if (showAutoplayCountdown) {
|
||||||
|
playBT.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Replace volume bar with custom LBRY volume bar
|
// Replace volume bar with custom LBRY volume bar
|
||||||
LbryVolumeBarClass.replaceExisting(player);
|
LbryVolumeBarClass.replaceExisting(player);
|
||||||
|
|
||||||
|
|
|
@ -336,6 +336,7 @@ function VideoViewer(props: Props) {
|
||||||
userId={userId}
|
userId={userId}
|
||||||
allowPreRoll={!embedded && !authenticated}
|
allowPreRoll={!embedded && !authenticated}
|
||||||
shareTelemetry={shareTelemetry}
|
shareTelemetry={shareTelemetry}
|
||||||
|
showAutoplayCountdown={autoplaySetting}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -130,6 +130,7 @@
|
||||||
@include handleChannelGif(6rem);
|
@include handleChannelGif(6rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// show watch later button and duration divs when hovered
|
||||||
&:hover {
|
&:hover {
|
||||||
.claim-preview__hover-actions {
|
.claim-preview__hover-actions {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -604,8 +605,13 @@
|
||||||
background-color: var(--color-black);
|
background-color: var(--color-black);
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
opacity: 0.7;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
// show full opacity for touch devices
|
||||||
|
@media (pointer: fine), (pointer: coarse) {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
.file-properties {
|
.file-properties {
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
|
@ -645,6 +651,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// show duration and watch later button when hovered
|
||||||
.claim-preview--tile {
|
.claim-preview--tile {
|
||||||
&:hover {
|
&:hover {
|
||||||
.claim-preview__hover-actions {
|
.claim-preview__hover-actions {
|
||||||
|
@ -672,8 +679,19 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// div that displays watch later button
|
||||||
.claim-preview__hover-actions {
|
.claim-preview__hover-actions {
|
||||||
display: none;
|
|
||||||
|
// if the user is using a mouse
|
||||||
|
@media (pointer: fine){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the user doesn't have a pointer (mouse etc) hide watch later button
|
||||||
|
@media (pointer: none), (pointer:coarse) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
top: var(--spacing-xxs);
|
top: var(--spacing-xxs);
|
||||||
|
@ -697,12 +715,14 @@
|
||||||
padding: var(--spacing-xxs) var(--spacing-xxs);
|
padding: var(--spacing-xxs) var(--spacing-xxs);
|
||||||
height: unset;
|
height: unset;
|
||||||
|
|
||||||
|
// label (with 'Add' text) hidden by default
|
||||||
.button__label {
|
.button__label {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
font-size: var(--font-small);
|
font-size: var(--font-small);
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// show the additional watch later text (Add) when hovered
|
||||||
&:hover {
|
&:hover {
|
||||||
.button__label {
|
.button__label {
|
||||||
display: inline;
|
display: inline;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue