Integrate media session api
This commit is contained in:
parent
2b60fe957f
commit
ca135cc7f8
4 changed files with 43 additions and 3 deletions
|
@ -40,6 +40,16 @@ const select = (state, props) => {
|
|||
const uri = props.uri;
|
||||
|
||||
const claim = selectClaimForUri(state, uri);
|
||||
const { signing_channel } = claim || {};
|
||||
let channelTitle = null;
|
||||
if (signing_channel) {
|
||||
const { value, name } = signing_channel;
|
||||
if (value && value.title) {
|
||||
channelTitle = value.title;
|
||||
} else {
|
||||
channelTitle = name;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: eventually this should be received from DB and not local state (https://github.com/lbryio/lbry-desktop/issues/6796)
|
||||
const position = urlParams.get('t') !== null ? urlParams.get('t') : selectContentPositionForUri(state, uri);
|
||||
|
@ -74,6 +84,7 @@ const select = (state, props) => {
|
|||
videoPlaybackRate: selectClientSetting(state, SETTINGS.VIDEO_PLAYBACK_RATE),
|
||||
thumbnail: selectThumbnailForUri(state, uri),
|
||||
claim,
|
||||
channelTitle,
|
||||
homepageData: selectHomepageData(state),
|
||||
authenticated: selectUserVerifiedEmail(state),
|
||||
shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
|
||||
|
|
|
@ -19,6 +19,7 @@ const VideoJsEvents = ({
|
|||
claimId,
|
||||
userId,
|
||||
claimValues,
|
||||
channelTitle,
|
||||
embedded,
|
||||
uri,
|
||||
doAnalyticsView,
|
||||
|
@ -35,6 +36,7 @@ const VideoJsEvents = ({
|
|||
claimId: ?string,
|
||||
userId: ?number,
|
||||
claimValues: any,
|
||||
channelTitle: string,
|
||||
embedded: boolean,
|
||||
uri: string,
|
||||
doAnalyticsView: (string, number) => any,
|
||||
|
@ -109,6 +111,8 @@ const VideoJsEvents = ({
|
|||
|
||||
function onInitialPlay() {
|
||||
const player = playerRef.current;
|
||||
console.log('onInitialPlay');
|
||||
updateMediaSession();
|
||||
|
||||
const bigPlayButton = document.querySelector('.vjs-big-play-button');
|
||||
if (bigPlayButton) bigPlayButton.style.setProperty('display', 'none');
|
||||
|
@ -198,6 +202,27 @@ const VideoJsEvents = ({
|
|||
}
|
||||
}
|
||||
|
||||
function updateMediaSession() {
|
||||
if ('mediaSession' in navigator) {
|
||||
const player = playerRef.current;
|
||||
// $FlowFixMe
|
||||
navigator.mediaSession.metadata = new window.MediaMetadata({
|
||||
title: claimValues.title,
|
||||
artist: channelTitle,
|
||||
artwork: [{ src: claimValues.thumbnail.url }],
|
||||
});
|
||||
|
||||
// $FlowFixMe
|
||||
navigator.mediaSession.setActionHandler('seekbackward', function () {
|
||||
player.currentTime(Math.max(0, player.currentTime() - 10));
|
||||
});
|
||||
// $FlowFixMe
|
||||
navigator.mediaSession.setActionHandler('seekforward', function () {
|
||||
player.currentTime(Math.max(0, player.currentTime() + 10));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const player = playerRef.current;
|
||||
if (replay && player) {
|
||||
|
|
|
@ -77,7 +77,7 @@ type Props = {
|
|||
autoplay: boolean,
|
||||
claimId: ?string,
|
||||
title: ?string,
|
||||
channelName: ?string,
|
||||
channelTitle: string,
|
||||
embedded: boolean,
|
||||
internalFeatureEnabled: ?boolean,
|
||||
isAudio: boolean,
|
||||
|
@ -135,7 +135,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
|||
autoplay,
|
||||
claimId,
|
||||
title,
|
||||
channelName,
|
||||
channelTitle,
|
||||
embedded,
|
||||
// internalFeatureEnabled, // for people on the team to test new features internally
|
||||
isAudio,
|
||||
|
@ -210,6 +210,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
|||
uri,
|
||||
playerServerRef,
|
||||
isLivestreamClaim,
|
||||
channelTitle,
|
||||
});
|
||||
|
||||
const videoJsOptions = {
|
||||
|
@ -243,7 +244,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
|||
techOrder: ['chromecast', 'html5'],
|
||||
chromecast: {
|
||||
requestTitleFn: (src) => title || '',
|
||||
requestSubtitleFn: (src) => channelName || '',
|
||||
requestSubtitleFn: (src) => channelTitle || '',
|
||||
},
|
||||
bigPlayButton: embedded, // only show big play button if embedded
|
||||
liveui: isLivestreamClaim,
|
||||
|
|
|
@ -75,6 +75,7 @@ type Props = {
|
|||
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
|
||||
doSetContentHistoryItem: (uri: string) => void,
|
||||
doClearContentHistoryUri: (uri: string) => void,
|
||||
channelTitle: string,
|
||||
};
|
||||
|
||||
/*
|
||||
|
@ -92,6 +93,7 @@ function VideoViewer(props: Props) {
|
|||
thumbnail,
|
||||
position,
|
||||
claim,
|
||||
channelTitle,
|
||||
uri,
|
||||
muted,
|
||||
volume,
|
||||
|
@ -496,6 +498,7 @@ function VideoViewer(props: Props) {
|
|||
claimId={claimId}
|
||||
title={claim && ((claim.value && claim.value.title) || claim.name)}
|
||||
channelName={channelName}
|
||||
channelTitle={channelTitle}
|
||||
userId={userId}
|
||||
allowPreRoll={!authenticated} // TODO: pull this into ads functionality so it's self contained
|
||||
internalFeatureEnabled={internalFeature}
|
||||
|
|
Loading…
Reference in a new issue