Fix floating player issues #7073

Merged
saltrafael merged 4 commits from fix-floating into master 2021-09-13 17:24:36 +02:00
4 changed files with 18 additions and 18 deletions
Showing only changes of commit f77c9f5279 - Show all commits

View file

@ -2,6 +2,7 @@
declare type PlayingUri = {
uri: string,
primaryUri: string,
pathname: string,
commentId?: string,
source?: string,

View file

@ -12,12 +12,12 @@ type Props = {
uri: string,
thumbnail: string,
claim: ?Claim,
doResolveUri: string => void,
doFetchCostInfoForUri: string => void,
doResolveUri: (string) => void,
doFetchCostInfoForUri: (string) => void,
costInfo: ?{ cost: number },
floatingPlayerEnabled: boolean,
doPlayUri: (string, ?boolean, ?boolean, (GetResponse) => void) => void,
doAnaltyicsPurchaseEvent: GetResponse => void,
doAnaltyicsPurchaseEvent: (GetResponse) => void,
parentCommentId?: string,
isMarkdownPost: boolean,
doSetPlayingUri: ({}) => void,
@ -69,8 +69,8 @@ export default function EmbedPlayButton(props: Props) {
const formattedUrl = formatLbryUrlForWeb(uri);
push(formattedUrl);
} else {
doPlayUri(uri, undefined, undefined, fileInfo => {
let playingOptions: PlayingUri = { uri, pathname };
doPlayUri(uri, undefined, undefined, (fileInfo) => {
let playingOptions = { uri, pathname, source: undefined, commentId: undefined };
if (parentCommentId) {
playingOptions.source = 'comment';
playingOptions.commentId = parentCommentId;

View file

@ -69,7 +69,7 @@ export default function FileRenderFloating(props: Props) {
const { location, push } = useHistory();
const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
const isMobile = useIsMobile();
const mainFilePlaying = playingUri && isURIEqual(playingUri.uri, primaryUri);
const mainFilePlaying = !isFloating && isURIEqual(uri, primaryUri);
const [fileViewerRect, setFileViewerRect] = useState();
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
const [wasDragging, setWasDragging] = useState(false);
@ -85,7 +85,8 @@ export default function FileRenderFloating(props: Props) {
y: 0,
});
const navigateUrl = uri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
const navigateUrl =
playingUri && playingUri.primaryUri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
const isFree = costInfo && costInfo.cost === 0;
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:
useEffect(() => {
const handleMainWindowResize = debounce((e) => {
const handleMainWindowResize = debounce(() => {
let newPos = {
x: Math.round(relativePos.x * getScreenWidth()),
y: Math.round(relativePos.y * getScreenHeight()),
@ -175,13 +176,11 @@ export default function FileRenderFloating(props: Props) {
? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
: document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
if (!element) {
return;
}
if (!element) return;
const rect = element.getBoundingClientRect();
// getBoundingCLientRect returns a DomRect, not an object
// getBoundingClientRect returns a DomRect, not an object
const objectRect = {
top: rect.top,
right: rect.right,
@ -198,11 +197,11 @@ export default function FileRenderFloating(props: Props) {
}, [mainFilePlaying]);
useEffect(() => {
if (streamingUrl) {
if (playingUri && playingUri.primaryUri) {
handleResize();
setCountdownCanceled(false);
}
}, [handleResize, streamingUrl, videoTheaterMode]);
}, [handleResize, playingUri, videoTheaterMode]);
useEffect(() => {
handleResize();
@ -270,7 +269,7 @@ export default function FileRenderFloating(props: Props) {
return null;
}
function handleDragStart(e, ui) {
function handleDragStart() {
// Not really necessary, but reset just in case 'handleStop' didn't fire.
setWasDragging(false);
}
@ -286,7 +285,7 @@ export default function FileRenderFloating(props: Props) {
});
}
function handleDragStop(e, ui) {
function handleDragStop(e) {
if (wasDragging) {
e.stopPropagation();
setWasDragging(false);

View file

@ -34,14 +34,14 @@ export const makeSelectIsPlaying = (uri: string) =>
createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);
export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
createSelector(selectPrimaryUri, selectPlayingUri, selectClaimsByUri, (primaryUri, playingUri, claimsByUri) => {
createSelector(selectPrimaryUri, selectPlayingUri, (primaryUri, playingUri) => {
const isInlineSecondaryPlayer =
playingUri &&
playingUri.uri !== primaryUri &&
location.pathname === playingUri.pathname &&
(playingUri.source === 'comment' || playingUri.source === 'markdown');
if ((playingUri && playingUri.uri === primaryUri) || isInlineSecondaryPlayer) {
if ((playingUri && playingUri.primaryUri === primaryUri) || isInlineSecondaryPlayer) {
return false;
}