Fixes

ui/page/file/index.js

@@ -13,7 +13,11 @@ import * as COLLECTIONS_CONSTS from 'constants/collections';
 import * as SETTINGS from 'constants/settings';
 import { selectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
 import { selectShowMatureContent, selectClientSetting } from 'redux/selectors/settings';
-import { makeSelectFileRenderModeForUri, makeSelectContentPositionForUri } from 'redux/selectors/content';
+import {
+  makeSelectFileRenderModeForUri,
+  makeSelectContentPositionForUri,
+  makeSelectIsUriCurrentlyPlaying,
+} from 'redux/selectors/content';
 import { makeSelectCommentsListTitleForUri, selectSettingsByChannelId } from 'redux/selectors/comments';
 import { DISABLE_COMMENTS_TAG } from 'constants/tags';
 import { doSetMobilePlayerDimensions } from 'redux/actions/app';
@@ -45,6 +49,7 @@ const select = (state, props) => {
     collectionId,
     position: makeSelectContentPositionForUri(uri)(state),
     commentsListTitle: makeSelectCommentsListTitleForUri(uri)(state),
+    isPlaying: makeSelectIsUriCurrentlyPlaying(uri)(state),
   };
 };
 

ui/page/file/view.jsx

@@ -42,6 +42,7 @@ type Props = {
   position: number,
   commentsListTitle: string,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  isPlaying?: boolean,
   doFetchCostInfoForUri: (uri: string) => void,
   doSetContentHistoryItem: (uri: string) => void,
   doSetPrimaryUri: (uri: ?string) => void,
@@ -69,6 +70,7 @@ export default function FilePage(props: Props) {
     position,
     commentsListTitle,
     settingsByChannelId,
+    isPlaying,
     doFetchCostInfoForUri,
     doSetContentHistoryItem,
     doSetPrimaryUri,
@@ -127,11 +129,11 @@ export default function FilePage(props: Props) {
   React.useEffect(() => {
     // No floating player on mobile as of now, so clear the playing uri
     return () => {
-      if (isMobile && RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
+      if (isMobile && isPlaying && RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
         doClearPlayingUri();
       }
     };
-  }, [doClearPlayingUri, isMobile, renderMode]);
+  }, [doClearPlayingUri, isMobile, isPlaying, renderMode]);
 
   function renderFilePageLayout() {
     if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {

ui/redux/actions/comments.js

@@ -459,15 +459,10 @@ export function doCommentReact(commentId: string, type: string) {
 
 /**
  *
- * @param comment
- * @param claim_id The ID of the claim to create the comment on. Can be a file, livestream, or channel page.
- * @param parent_id
  * @param uri
  * @param livestream
- * @param sticker
+ * @param params the CommentSubmitParams needed for CommentCreateParams (not the same as they are dealt differently,
- * @param {string} [txid] Optional transaction id
+ * like mentionedChannels which is selected after submission)
- * @param {string} [payment_intent_id] Optional transaction id
- * @param {string} [environment] Optional environment for Stripe (test|live)
  * @returns {(function(Dispatch, GetState): Promise<undefined|void|*>)|*}
  */
 export function doCommentCreate(uri: string, livestream: boolean, params: CommentSubmitParams) {

ui/redux/reducers/app.js

@@ -46,6 +46,7 @@ export type AppState = {
   interestedInYoutubeSync: boolean,
   activeChannel: ?string,
   incognito: boolean,
+  mobilePlayerDimensions?: { height: number, width: number },
 };
 
 const defaultState: AppState = {
@@ -85,6 +86,7 @@ const defaultState: AppState = {
   interestedInYoutubeSync: false,
   activeChannel: undefined,
   incognito: false,
+  mobilePlayerDimensions: undefined,
 };
 
 // @@router comes from react-router

ui/redux/selectors/content.js

@@ -30,6 +30,9 @@ export const selectListShuffle = (state: State) => selectState(state).shuffleLis
 export const makeSelectIsPlaying = (uri: string) =>
   createSelector(selectPrimaryUri, (primaryUri) => primaryUri === uri);
 
+export const makeSelectIsUriCurrentlyPlaying = (uri: string) =>
+  createSelector(selectPlayingUri, (playingUri) => playingUri && playingUri.uri === uri);
+
 export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
   createSelector(selectPrimaryUri, selectPlayingUri, (primaryUri, playingUri) => {
     if (!playingUri) return false;

ui/scss/component/_card.scss

@@ -530,9 +530,11 @@
   }
 }
 
-.ReactModalPortal {
+@media (max-width: $breakpoint-small) {
-  .button--close {
+  .ReactModalPortal {
-    top: 0;
+    .button--close {
-    right: 0;
+      top: 0;
+      right: 0;
+    }
   }
 }

ui/scss/init/_reset.scss

@@ -1,3 +1,5 @@
+@import 'init/breakpoints';
+
 html {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
@@ -156,7 +158,7 @@ select {
   outline: none;
 }
 
-@media (min-width: 900px) {
+@media (min-width: $breakpoint-small) {
   textarea {
     width: 100%;
     min-height: var(--spacing-xxl);