Integrate media session api

This commit is contained in:
Raphael Wickihalder 2022-05-29 11:54:47 +02:00 committed by Thomas Zarebczan
parent 2b60fe957f
commit ca135cc7f8
4 changed files with 43 additions and 3 deletions

View file

@ -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,

View file

@ -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) {

View file

@ -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,

View file

@ -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}