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:
saltrafael 2021-09-13 12:24:35 -03:00 committed by GitHub
parent 30fedf6b45
commit 539cf780d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 80 additions and 95 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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