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);
});
}