Fix floating player issues (#7073)
* Fix Floating Player stopping on certain files * Dont show additional player buttons from markdown and comments * Fix markdown resizing for the same video playing * Update changelog
This commit is contained in:
parent
30fedf6b45
commit
539cf780d7
9 changed files with 80 additions and 95 deletions
|
@ -50,6 +50,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
||||||
- Fix Paid embed warning overlay redirection button now links to odysee _community pr!_ ([#6819](https://github.com/lbryio/lbry-desktop/pull/6819))
|
- Fix Paid embed warning overlay redirection button now links to odysee _community pr!_ ([#6819](https://github.com/lbryio/lbry-desktop/pull/6819))
|
||||||
- Fix comment section redirection to create channel _community pr!_ ([#6557](https://github.com/lbryio/lbry-desktop/pull/6557))
|
- Fix comment section redirection to create channel _community pr!_ ([#6557](https://github.com/lbryio/lbry-desktop/pull/6557))
|
||||||
- Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
|
- Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
|
||||||
|
- Fix floating player stopping on markdown or image files ([#7073](https://github.com/lbryio/lbry-desktop/pull/7073))
|
||||||
|
|
||||||
## [0.51.1] - [2021-06-26]
|
## [0.51.1] - [2021-06-26]
|
||||||
|
|
||||||
|
|
1
flow-typed/content.js
vendored
1
flow-typed/content.js
vendored
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
declare type PlayingUri = {
|
declare type PlayingUri = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
primaryUri: string,
|
||||||
pathname: string,
|
pathname: string,
|
||||||
commentId?: string,
|
commentId?: string,
|
||||||
source?: string,
|
source?: string,
|
||||||
|
|
|
@ -12,12 +12,12 @@ type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
thumbnail: string,
|
thumbnail: string,
|
||||||
claim: ?Claim,
|
claim: ?Claim,
|
||||||
doResolveUri: string => void,
|
doResolveUri: (string) => void,
|
||||||
doFetchCostInfoForUri: string => void,
|
doFetchCostInfoForUri: (string) => void,
|
||||||
costInfo: ?{ cost: number },
|
costInfo: ?{ cost: number },
|
||||||
floatingPlayerEnabled: boolean,
|
floatingPlayerEnabled: boolean,
|
||||||
doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
|
doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
|
||||||
doAnaltyicsPurchaseEvent: GetResponse => void,
|
doAnaltyicsPurchaseEvent: (GetResponse) => void,
|
||||||
parentCommentId?: string,
|
parentCommentId?: string,
|
||||||
isMarkdownPost: boolean,
|
isMarkdownPost: boolean,
|
||||||
doSetPlayingUri: ({}) => void,
|
doSetPlayingUri: ({}) => void,
|
||||||
|
@ -69,8 +69,8 @@ export default function EmbedPlayButton(props: Props) {
|
||||||
const formattedUrl = formatLbryUrlForWeb(uri);
|
const formattedUrl = formatLbryUrlForWeb(uri);
|
||||||
push(formattedUrl);
|
push(formattedUrl);
|
||||||
} else {
|
} else {
|
||||||
doPlayUri(uri, undefined, undefined, fileInfo => {
|
doPlayUri(uri, undefined, undefined, (fileInfo) => {
|
||||||
let playingOptions: PlayingUri = { uri, pathname };
|
let playingOptions = { uri, pathname, source: undefined, commentId: undefined };
|
||||||
if (parentCommentId) {
|
if (parentCommentId) {
|
||||||
playingOptions.source = 'comment';
|
playingOptions.source = 'comment';
|
||||||
playingOptions.commentId = parentCommentId;
|
playingOptions.commentId = parentCommentId;
|
||||||
|
|
|
@ -69,7 +69,7 @@ export default function FileRenderFloating(props: Props) {
|
||||||
const { location, push } = useHistory();
|
const { location, push } = useHistory();
|
||||||
const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
|
const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
const mainFilePlaying = playingUri && isURIEqual(playingUri.uri, primaryUri);
|
const mainFilePlaying = !isFloating && isURIEqual(uri, primaryUri);
|
||||||
const [fileViewerRect, setFileViewerRect] = useState();
|
const [fileViewerRect, setFileViewerRect] = useState();
|
||||||
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
|
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
|
||||||
const [wasDragging, setWasDragging] = useState(false);
|
const [wasDragging, setWasDragging] = useState(false);
|
||||||
|
@ -85,7 +85,8 @@ export default function FileRenderFloating(props: Props) {
|
||||||
y: 0,
|
y: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
const navigateUrl = uri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
|
const navigateUrl =
|
||||||
|
playingUri && playingUri.primaryUri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
|
||||||
|
|
||||||
const isFree = costInfo && costInfo.cost === 0;
|
const isFree = costInfo && costInfo.cost === 0;
|
||||||
const canViewFile = isFree || claimWasPurchased;
|
const canViewFile = isFree || claimWasPurchased;
|
||||||
|
@ -154,7 +155,7 @@ export default function FileRenderFloating(props: Props) {
|
||||||
|
|
||||||
// Listen to main-window resizing and adjust the fp position accordingly:
|
// Listen to main-window resizing and adjust the fp position accordingly:
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleMainWindowResize = debounce((e) => {
|
const handleMainWindowResize = debounce(() => {
|
||||||
let newPos = {
|
let newPos = {
|
||||||
x: Math.round(relativePos.x * getScreenWidth()),
|
x: Math.round(relativePos.x * getScreenWidth()),
|
||||||
y: Math.round(relativePos.y * getScreenHeight()),
|
y: Math.round(relativePos.y * getScreenHeight()),
|
||||||
|
@ -175,13 +176,11 @@ export default function FileRenderFloating(props: Props) {
|
||||||
? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
|
? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
|
||||||
: document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
|
: document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
|
||||||
|
|
||||||
if (!element) {
|
if (!element) return;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = element.getBoundingClientRect();
|
const rect = element.getBoundingClientRect();
|
||||||
|
|
||||||
// getBoundingCLientRect returns a DomRect, not an object
|
// getBoundingClientRect returns a DomRect, not an object
|
||||||
const objectRect = {
|
const objectRect = {
|
||||||
top: rect.top,
|
top: rect.top,
|
||||||
right: rect.right,
|
right: rect.right,
|
||||||
|
@ -198,11 +197,11 @@ export default function FileRenderFloating(props: Props) {
|
||||||
}, [mainFilePlaying]);
|
}, [mainFilePlaying]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (streamingUrl) {
|
if (playingUri && playingUri.primaryUri) {
|
||||||
handleResize();
|
handleResize();
|
||||||
setCountdownCanceled(false);
|
setCountdownCanceled(false);
|
||||||
}
|
}
|
||||||
}, [handleResize, streamingUrl, videoTheaterMode]);
|
}, [handleResize, playingUri, videoTheaterMode]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleResize();
|
handleResize();
|
||||||
|
@ -270,7 +269,7 @@ export default function FileRenderFloating(props: Props) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDragStart(e, ui) {
|
function handleDragStart() {
|
||||||
// Not really necessary, but reset just in case 'handleStop' didn't fire.
|
// Not really necessary, but reset just in case 'handleStop' didn't fire.
|
||||||
setWasDragging(false);
|
setWasDragging(false);
|
||||||
}
|
}
|
||||||
|
@ -286,7 +285,7 @@ export default function FileRenderFloating(props: Props) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDragStop(e, ui) {
|
function handleDragStop(e) {
|
||||||
if (wasDragging) {
|
if (wasDragging) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setWasDragging(false);
|
setWasDragging(false);
|
||||||
|
|
|
@ -4,7 +4,6 @@ import {
|
||||||
makeSelectFileInfoForUri,
|
makeSelectFileInfoForUri,
|
||||||
makeSelectThumbnailForUri,
|
makeSelectThumbnailForUri,
|
||||||
makeSelectClaimForUri,
|
makeSelectClaimForUri,
|
||||||
makeSelectStreamingUrlForUri,
|
|
||||||
makeSelectClaimWasPurchased,
|
makeSelectClaimWasPurchased,
|
||||||
SETTINGS,
|
SETTINGS,
|
||||||
COLLECTIONS_CONSTS,
|
COLLECTIONS_CONSTS,
|
||||||
|
@ -16,7 +15,6 @@ import { withRouter } from 'react-router';
|
||||||
import {
|
import {
|
||||||
makeSelectIsPlaying,
|
makeSelectIsPlaying,
|
||||||
makeSelectShouldObscurePreview,
|
makeSelectShouldObscurePreview,
|
||||||
selectPlayingUri,
|
|
||||||
makeSelectInsufficientCreditsForUri,
|
makeSelectInsufficientCreditsForUri,
|
||||||
makeSelectFileRenderModeForUri,
|
makeSelectFileRenderModeForUri,
|
||||||
} from 'redux/selectors/content';
|
} from 'redux/selectors/content';
|
||||||
|
@ -33,9 +31,7 @@ const select = (state, props) => {
|
||||||
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
|
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
|
||||||
obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
|
obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
|
||||||
isPlaying: makeSelectIsPlaying(props.uri)(state),
|
isPlaying: makeSelectIsPlaying(props.uri)(state),
|
||||||
playingUri: selectPlayingUri(state),
|
|
||||||
insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
|
insufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
|
||||||
streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
|
|
||||||
autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),
|
autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state),
|
||||||
costInfo: makeSelectCostInfoForUri(props.uri)(state),
|
costInfo: makeSelectCostInfoForUri(props.uri)(state),
|
||||||
renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
|
renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
|
||||||
|
@ -47,9 +43,9 @@ const select = (state, props) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const perform = (dispatch) => ({
|
const perform = (dispatch) => ({
|
||||||
play: (uri, collectionId) => {
|
play: (uri, collectionId, isPlayable) => {
|
||||||
dispatch(doSetPrimaryUri(uri));
|
dispatch(doSetPrimaryUri(uri));
|
||||||
dispatch(doSetPlayingUri({ uri, collectionId }));
|
if (isPlayable) dispatch(doSetPlayingUri({ uri, collectionId }));
|
||||||
dispatch(doPlayUri(uri, undefined, undefined, (fileInfo) => dispatch(doAnaltyicsPurchaseEvent(fileInfo))));
|
dispatch(doPlayUri(uri, undefined, undefined, (fileInfo) => dispatch(doAnaltyicsPurchaseEvent(fileInfo))));
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,8 +16,7 @@ import Nag from 'component/common/nag';
|
||||||
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
|
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
play: (string, string) => void,
|
play: (string, string, boolean) => void,
|
||||||
isLoading: boolean,
|
|
||||||
isPlaying: boolean,
|
isPlaying: boolean,
|
||||||
fileInfo: FileListItem,
|
fileInfo: FileListItem,
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -104,9 +103,9 @@ export default function FileRenderInitiator(props: Props) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
play(uri, collectionId);
|
play(uri, collectionId, isPlayable);
|
||||||
},
|
},
|
||||||
[play, uri, collectionId]
|
[play, uri, isPlayable, collectionId]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import {
|
import {
|
||||||
makeSelectClaimForUri,
|
makeSelectClaimForUri,
|
||||||
makeSelectFileInfoForUri,
|
|
||||||
makeSelectThumbnailForUri,
|
makeSelectThumbnailForUri,
|
||||||
SETTINGS,
|
SETTINGS,
|
||||||
COLLECTIONS_CONSTS,
|
COLLECTIONS_CONSTS,
|
||||||
|
@ -40,6 +39,7 @@ const select = (state, props) => {
|
||||||
const userId = selectUser(state) && selectUser(state).id;
|
const userId = selectUser(state) && selectUser(state).id;
|
||||||
const playingUri = selectPlayingUri(state);
|
const playingUri = selectPlayingUri(state);
|
||||||
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
|
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
|
||||||
|
const isMarkdownOrComment = playingUri && (playingUri.source === 'markdown' || playingUri.source === 'comment');
|
||||||
|
|
||||||
let nextRecommendedUri;
|
let nextRecommendedUri;
|
||||||
let previousListUri;
|
let previousListUri;
|
||||||
|
@ -51,24 +51,23 @@ const select = (state, props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
position,
|
||||||
|
userId,
|
||||||
|
collectionId,
|
||||||
|
nextRecommendedUri,
|
||||||
|
previousListUri,
|
||||||
|
isMarkdownOrComment,
|
||||||
autoplayIfEmbedded: Boolean(autoplay),
|
autoplayIfEmbedded: Boolean(autoplay),
|
||||||
autoplayMedia: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_MEDIA)(state)),
|
autoplayNext: makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state),
|
||||||
autoplayNext: Boolean(makeSelectClientSetting(SETTINGS.AUTOPLAY_NEXT)(state)),
|
|
||||||
volume: selectVolume(state),
|
volume: selectVolume(state),
|
||||||
muted: selectMute(state),
|
muted: selectMute(state),
|
||||||
videoPlaybackRate: makeSelectClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE)(state),
|
videoPlaybackRate: makeSelectClientSetting(SETTINGS.VIDEO_PLAYBACK_RATE)(state),
|
||||||
position: position,
|
|
||||||
hasFileInfo: Boolean(makeSelectFileInfoForUri(uri)(state)),
|
|
||||||
thumbnail: makeSelectThumbnailForUri(uri)(state),
|
thumbnail: makeSelectThumbnailForUri(uri)(state),
|
||||||
claim: makeSelectClaimForUri(uri)(state),
|
claim: makeSelectClaimForUri(uri)(state),
|
||||||
homepageData: selectHomepageData(state),
|
homepageData: selectHomepageData(state),
|
||||||
authenticated: selectUserVerifiedEmail(state),
|
authenticated: selectUserVerifiedEmail(state),
|
||||||
userId: userId,
|
|
||||||
shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
|
shareTelemetry: IS_WEB || selectDaemonSettings(state).share_usage_data,
|
||||||
isFloating: makeSelectIsPlayerFloating(props.location)(state),
|
isFloating: makeSelectIsPlayerFloating(props.location)(state),
|
||||||
collectionId,
|
|
||||||
nextRecommendedUri,
|
|
||||||
previousListUri,
|
|
||||||
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
|
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -42,7 +42,6 @@ type Props = {
|
||||||
videoPlaybackRate: number,
|
videoPlaybackRate: number,
|
||||||
volume: number,
|
volume: number,
|
||||||
uri: string,
|
uri: string,
|
||||||
autoplayMedia: boolean,
|
|
||||||
autoplayNext: boolean,
|
autoplayNext: boolean,
|
||||||
autoplayIfEmbedded: boolean,
|
autoplayIfEmbedded: boolean,
|
||||||
desktopPlayStartTime?: number,
|
desktopPlayStartTime?: number,
|
||||||
|
@ -64,6 +63,7 @@ type Props = {
|
||||||
nextRecommendedUri: string,
|
nextRecommendedUri: string,
|
||||||
previousListUri: string,
|
previousListUri: string,
|
||||||
videoTheaterMode: boolean,
|
videoTheaterMode: boolean,
|
||||||
|
isMarkdownOrComment: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -84,7 +84,6 @@ function VideoViewer(props: Props) {
|
||||||
uri,
|
uri,
|
||||||
muted,
|
muted,
|
||||||
volume,
|
volume,
|
||||||
autoplayMedia,
|
|
||||||
autoplayNext,
|
autoplayNext,
|
||||||
autoplayIfEmbedded,
|
autoplayIfEmbedded,
|
||||||
doAnalyticsView,
|
doAnalyticsView,
|
||||||
|
@ -106,6 +105,7 @@ function VideoViewer(props: Props) {
|
||||||
nextRecommendedUri,
|
nextRecommendedUri,
|
||||||
previousListUri,
|
previousListUri,
|
||||||
videoTheaterMode,
|
videoTheaterMode,
|
||||||
|
isMarkdownOrComment,
|
||||||
} = props;
|
} = props;
|
||||||
const permanentUrl = claim && claim.permanent_url;
|
const permanentUrl = claim && claim.permanent_url;
|
||||||
const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
|
const adApprovedChannelIds = homepageData ? getAllIds(homepageData) : [];
|
||||||
|
@ -196,32 +196,32 @@ function VideoViewer(props: Props) {
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (doNavigate) {
|
if (!doNavigate) return;
|
||||||
if (playNextUrl) {
|
|
||||||
if (permanentUrl !== nextRecommendedUri) {
|
if (playNextUrl) {
|
||||||
if (nextRecommendedUri) {
|
if (permanentUrl !== nextRecommendedUri) {
|
||||||
if (collectionId) clearPosition(permanentUrl);
|
if (nextRecommendedUri) {
|
||||||
doPlay(nextRecommendedUri);
|
if (collectionId) clearPosition(permanentUrl);
|
||||||
}
|
doPlay(nextRecommendedUri);
|
||||||
} else {
|
|
||||||
setReplay(true);
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (videoNode) {
|
setReplay(true);
|
||||||
const currentTime = videoNode.currentTime;
|
}
|
||||||
|
} else {
|
||||||
if (currentTime <= 5) {
|
if (videoNode) {
|
||||||
if (previousListUri && permanentUrl !== previousListUri) doPlay(previousListUri);
|
const currentTime = videoNode.currentTime;
|
||||||
} else {
|
|
||||||
videoNode.currentTime = 0;
|
if (currentTime <= 5) {
|
||||||
}
|
if (previousListUri && permanentUrl !== previousListUri) doPlay(previousListUri);
|
||||||
setDoNavigate(false);
|
} else {
|
||||||
}
|
videoNode.currentTime = 0;
|
||||||
|
}
|
||||||
|
setDoNavigate(false);
|
||||||
}
|
}
|
||||||
if (!ended) setDoNavigate(false);
|
|
||||||
setEnded(false);
|
|
||||||
setPlayNextUrl(true);
|
|
||||||
}
|
}
|
||||||
|
if (!ended) setDoNavigate(false);
|
||||||
|
setEnded(false);
|
||||||
|
setPlayNextUrl(true);
|
||||||
}, [
|
}, [
|
||||||
clearPosition,
|
clearPosition,
|
||||||
collectionId,
|
collectionId,
|
||||||
|
@ -236,37 +236,25 @@ function VideoViewer(props: Props) {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (ended) {
|
if (!ended) return;
|
||||||
analytics.videoIsPlaying(false);
|
|
||||||
|
|
||||||
if (adUrl) {
|
analytics.videoIsPlaying(false);
|
||||||
setAdUrl(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (embedded) {
|
if (adUrl) {
|
||||||
setIsEndedEmbed(true);
|
setAdUrl(null);
|
||||||
} else if (!collectionId && autoplayNext) {
|
return;
|
||||||
setShowAutoplayCountdown(true);
|
|
||||||
} else if (collectionId) {
|
|
||||||
setDoNavigate(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
clearPosition(uri);
|
|
||||||
}
|
}
|
||||||
}, [
|
|
||||||
embedded,
|
if (embedded) {
|
||||||
setIsEndedEmbed,
|
setIsEndedEmbed(true);
|
||||||
autoplayMedia,
|
} else if (!collectionId && autoplayNext) {
|
||||||
setShowAutoplayCountdown,
|
setShowAutoplayCountdown(true);
|
||||||
adUrl,
|
} else if (collectionId) {
|
||||||
setAdUrl,
|
setDoNavigate(true);
|
||||||
clearPosition,
|
}
|
||||||
uri,
|
|
||||||
ended,
|
clearPosition(uri);
|
||||||
collectionId,
|
}, [adUrl, autoplayNext, clearPosition, collectionId, embedded, ended, setAdUrl, uri]);
|
||||||
autoplayNext,
|
|
||||||
]);
|
|
||||||
|
|
||||||
function onPlay(player) {
|
function onPlay(player) {
|
||||||
setEnded(false);
|
setEnded(false);
|
||||||
|
@ -321,12 +309,14 @@ function VideoViewer(props: Props) {
|
||||||
player.muted(muted);
|
player.muted(muted);
|
||||||
player.volume(volume);
|
player.volume(volume);
|
||||||
player.playbackRate(videoPlaybackRate);
|
player.playbackRate(videoPlaybackRate);
|
||||||
addTheaterModeButton(player, toggleVideoTheaterMode);
|
if (!isMarkdownOrComment) {
|
||||||
if (collectionId) {
|
addTheaterModeButton(player, toggleVideoTheaterMode);
|
||||||
addPlayNextButton(player, doPlayNext);
|
if (collectionId) {
|
||||||
addPlayPreviousButton(player, doPlayPrevious);
|
addPlayNextButton(player, doPlayNext);
|
||||||
} else {
|
addPlayPreviousButton(player, doPlayPrevious);
|
||||||
addAutoplayNextButton(player, toggleAutoplayNext, autoplayNext);
|
} else {
|
||||||
|
addAutoplayNextButton(player, toggleAutoplayNext, autoplayNext);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -34,14 +34,14 @@ export const makeSelectIsPlaying = (uri: string) =>
|
||||||
createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);
|
createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);
|
||||||
|
|
||||||
export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
|
export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
|
||||||
createSelector(selectPrimaryUri, selectPlayingUri, selectClaimsByUri, (primaryUri, playingUri, claimsByUri) => {
|
createSelector(selectPrimaryUri, selectPlayingUri, (primaryUri, playingUri) => {
|
||||||
const isInlineSecondaryPlayer =
|
const isInlineSecondaryPlayer =
|
||||||
playingUri &&
|
playingUri &&
|
||||||
playingUri.uri !== primaryUri &&
|
playingUri.uri !== primaryUri &&
|
||||||
location.pathname === playingUri.pathname &&
|
location.pathname === playingUri.pathname &&
|
||||||
(playingUri.source === 'comment' || playingUri.source === 'markdown');
|
(playingUri.source === 'comment' || playingUri.source === 'markdown');
|
||||||
|
|
||||||
if ((playingUri && playingUri.uri === primaryUri) || isInlineSecondaryPlayer) {
|
if ((playingUri && playingUri.primaryUri === primaryUri) || isInlineSecondaryPlayer) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue