diff --git a/lbrytv/src/html.js b/lbrytv/src/html.js index 26d597e0f..febd9c5ef 100644 --- a/lbrytv/src/html.js +++ b/lbrytv/src/html.js @@ -88,7 +88,10 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) { // below should be canonical_url, but not provided by chainquery yet head += ``; - if (claim.source_media_type && claim.source_media_type.startsWith('video/')) { + if ( + claim.source_media_type && + (claim.source_media_type.startsWith('video/') || claim.source_media_type.startsWith('audio/')) + ) { const videoUrl = generateEmbedUrl(claim.name, claim.claim_id); head += ``; head += ``; diff --git a/ui/component/viewers/videoViewer/index.js b/ui/component/viewers/videoViewer/index.js index 78a38982b..7604402a1 100644 --- a/ui/component/viewers/videoViewer/index.js +++ b/ui/component/viewers/videoViewer/index.js @@ -5,15 +5,22 @@ import { selectVolume, selectMute } from 'redux/selectors/app'; import { savePosition, doSetPlayingUri } from 'redux/actions/content'; import { makeSelectContentPositionForUri } from 'redux/selectors/content'; import VideoViewer from './view'; +import { withRouter } from 'react-router'; -const select = (state, props) => ({ - volume: selectVolume(state), - position: makeSelectContentPositionForUri(props.uri)(state), - muted: selectMute(state), - hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)), - thumbnail: makeSelectThumbnailForUri(props.uri)(state), - claim: makeSelectClaimForUri(props.uri)(state), -}); +const select = (state, props) => { + const { search } = props.location; + const urlParams = new URLSearchParams(search); + const autoplay = urlParams.get('autoplay'); + return { + autoplayParam: autoplay, + volume: selectVolume(state), + position: makeSelectContentPositionForUri(props.uri)(state), + muted: selectMute(state), + hasFileInfo: Boolean(makeSelectFileInfoForUri(props.uri)(state)), + thumbnail: makeSelectThumbnailForUri(props.uri)(state), + claim: makeSelectClaimForUri(props.uri)(state), + }; +}; const perform = dispatch => ({ changeVolume: volume => dispatch(doChangeVolume(volume)), @@ -22,7 +29,9 @@ const perform = dispatch => ({ setPlayingUri: uri => dispatch(doSetPlayingUri(uri)), }); -export default connect( - select, - perform -)(VideoViewer); +export default withRouter( + connect( + select, + perform + )(VideoViewer) +); diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index dde1462df..282914673 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/ui/component/viewers/videoViewer/view.jsx @@ -29,6 +29,8 @@ type VideoJSOptions = { playbackRates: Array, responsive: boolean, poster?: string, + muted?: boolean, + poseter?: string, }; const VIDEO_JS_OPTIONS: VideoJSOptions = { controls: true, @@ -52,18 +54,34 @@ type Props = { hasFileInfo: boolean, onEndedCB: any, claim: Claim, + autoplayParam: ?boolean, }; function VideoViewer(props: Props) { - const { contentType, source, onEndedCB, changeVolume, changeMute, volume, muted, thumbnail, claim } = props; + const { + contentType, + source, + onEndedCB, + changeVolume, + changeMute, + volume, + muted, + thumbnail, + claim, + autoplayParam, + } = props; const claimId = claim && claim.claim_id; const videoRef = useRef(); const isAudio = contentType.includes('audio'); const embedded = useContext(EmbedContext); - if (embedded) { + if (embedded && !autoplayParam) { VIDEO_JS_OPTIONS.autoplay = false; } + if (autoplayParam) { + VIDEO_JS_OPTIONS.muted = true; + } + let forceTypes = [ 'video/quicktime', 'application/x-ext-mkv', @@ -128,14 +146,15 @@ function VideoViewer(props: Props) { plugins: { eventTracking: true }, }; - if (isAudio) { + // thumb looks bad in app, and if autoplay, flashing poster is annoying + if (isAudio || (embedded && !autoplayParam)) { videoJsOptions.poster = thumbnail; } if (!requireRedraw) { player = videojs(videoNode, videoJsOptions, function() { - player.volume(volume); - player.muted(muted); + if (!autoplayParam) player.volume(volume); + player.muted(autoplayParam || muted); }); }