From 7ad66b99e78c8c6ac89e905fd4aaa18ce7b56e33 Mon Sep 17 00:00:00 2001
From: Byron Eric Perez <89370060+ByronEricPerez@users.noreply.github.com>
Date: Mon, 24 Oct 2022 13:36:30 -0300
Subject: [PATCH 1/6] Swap comment servers without going to settings page
 (#7670)

work in progress

added input to select custom and default server when creating comment

the problem of synchronizing the two commentServer of the application was solved

btn moved to the correct component and syncs correctly

Fixed why it didn't show comments

Aligned input

size and location of the refresh btn changed, and added maximum and minimum width for the comment server

margin removed

change using overflow

refresh
---
 ui/component/commentCreate/view.jsx |  1 -
 ui/component/commentsList/index.js  | 21 ++++++----
 ui/component/commentsList/view.jsx  | 63 ++++++++++++++++++++++++++---
 ui/scss/component/_card.scss        | 38 +++++++++++++++++
 ui/scss/component/_comments.scss    |  4 --
 ui/scss/init/_vars.scss             |  3 ++
 6 files changed, 112 insertions(+), 18 deletions(-)

diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index a29f039f9..8512fa3b1 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -28,7 +28,6 @@ import type { ElementRef } from 'react';
 import UriIndicator from 'component/uriIndicator';
 import usePersistedState from 'effects/use-persisted-state';
 import WalletTipAmountSelector from 'component/walletTipAmountSelector';
-
 import { getStripeEnvironment } from 'util/stripe';
 const stripeEnvironment = getStripeEnvironment();
 
diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js
index f8755219d..910ced4e3 100644
--- a/ui/component/commentsList/index.js
+++ b/ui/component/commentsList/index.js
@@ -23,6 +23,9 @@ import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { getChannelIdFromClaim } from 'util/claim';
 import CommentsList from './view';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+import * as SETTINGS from 'constants/settings';
+import { doSetClientSetting } from 'redux/actions/settings';
 
 const select = (state, props) => {
   const { uri } = props;
@@ -56,15 +59,19 @@ const select = (state, props) => {
     myReactsByCommentId: selectMyReacts(state),
     othersReactsById: selectOthersReacts(state),
     activeChannelId: activeChannelClaim && activeChannelClaim.claim_id,
+    customCommentServers: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVERS)(state),
+    commentServer: makeSelectClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL)(state),
   };
 };
 
-const perform = {
-  fetchTopLevelComments: doCommentList,
-  fetchComment: doCommentById,
-  fetchReacts: doCommentReactList,
-  resetComments: doCommentReset,
-  doResolveUris,
-};
+const perform = (dispatch, ownProps) => ({
+  fetchTopLevelComments: (uri, parentId, page, pageSize, sortBy) =>
+    dispatch(doCommentList(uri, parentId, page, pageSize, sortBy)),
+  fetchComment: (commentId) => dispatch(doCommentById(commentId)),
+  fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
+  resetComments: (claimId) => dispatch(doCommentReset(claimId)),
+  doResolveUris: (uris, returnCachedClaims) => dispatch(doResolveUris(uris, returnCachedClaims)),
+  setCommentServer: (url) => dispatch(doSetClientSetting(SETTINGS.CUSTOM_COMMENTS_SERVER_URL, url, true)),
+});
 
 export default connect(select, perform)(CommentsList);
diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 6f9a6eed8..8698c5b2f 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment';
-import { ENABLE_COMMENT_REACTIONS } from 'config';
+import { ENABLE_COMMENT_REACTIONS, COMMENT_SERVER_API, COMMENT_SERVER_NAME } from 'config';
 import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import { getCommentsListTitle } from 'util/comments';
 import * as ICONS from 'constants/icons';
@@ -15,6 +15,8 @@ import Empty from 'component/common/empty';
 import React, { useEffect } from 'react';
 import Spinner from 'component/spinner';
 import usePersistedState from 'effects/use-persisted-state';
+import { FormField } from 'component/common/form';
+import Comments from 'comments';
 
 const DEBOUNCE_SCROLL_HANDLER_MS = 200;
 
@@ -52,6 +54,9 @@ type Props = {
   fetchReacts: (commentIds: Array<string>) => Promise<any>,
   resetComments: (claimId: string) => void,
   doResolveUris: (uris: Array<string>, returnCachedClaims: boolean) => void,
+  customCommentServers: Array<CommentServerDetails>,
+  setCommentServer: (string) => void,
+  commentServer: string,
 };
 
 export default function CommentList(props: Props) {
@@ -80,11 +85,17 @@ export default function CommentList(props: Props) {
     fetchReacts,
     resetComments,
     doResolveUris,
+    customCommentServers,
+    setCommentServer,
+    commentServer,
   } = props;
 
   const isMobile = useIsMobile();
   const isMediumScreen = useIsMediumScreen();
 
+  const defaultServer = { name: COMMENT_SERVER_NAME, url: COMMENT_SERVER_API };
+  const allServers = [defaultServer, ...(customCommentServers || [])];
+
   const spinnerRef = React.useRef();
   const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
   const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
@@ -255,7 +266,16 @@ export default function CommentList(props: Props) {
   }, [alreadyResolved, doResolveUris, topLevelComments]);
 
   const commentProps = { isTopLevel: true, threadDepth: 3, uri, claimIsMine, linkedCommentId };
-  const actionButtonsProps = { totalComments, sort, changeSort, setPage };
+  const actionButtonsProps = {
+    totalComments,
+    sort,
+    changeSort,
+    setPage,
+    allServers,
+    commentServer,
+    defaultServer,
+    setCommentServer,
+  };
 
   return (
     <Card
@@ -334,11 +354,15 @@ type ActionButtonsProps = {
   sort: string,
   changeSort: (string) => void,
   setPage: (number) => void,
+  allServers: Array<CommentServerDetails>,
+  commentServer: string,
+  setCommentServer: (string) => void,
+  defaultServer: CommentServerDetails,
 };
 
 const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
-  const { totalComments, sort, changeSort, setPage } = actionButtonsProps;
-
+  const { totalComments, sort, changeSort, setPage, allServers, commentServer, setCommentServer, defaultServer } =
+    actionButtonsProps;
   const sortButtonProps = { activeSort: sort, changeSort };
 
   return (
@@ -355,8 +379,35 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
           <SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
         </span>
       )}
-
-      <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+      <div className="button_refresh">
+        <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
+      </div>
+      {allServers.length >= 2 && (
+        <div className="button_selectedServer">
+          <FormField
+            type="select-tiny"
+            onChange={function (x) {
+              const selectedServer = x.target.value;
+              setPage(0);
+              setCommentServer(selectedServer);
+              if (selectedServer === defaultServer.url) {
+                Comments.setServerUrl(undefined);
+              } else {
+                Comments.setServerUrl(selectedServer);
+              }
+            }}
+            value={commentServer}
+          >
+            {allServers.map(function (server) {
+              return (
+                <option key={server.url} value={server.url}>
+                  {server.name}
+                </option>
+              );
+            })}
+          </FormField>
+        </div>
+      )}
     </>
   );
 };
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 0ebdaed69..c27201d2b 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -274,6 +274,21 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
+  .select--slim {
+    display: flex;
+    margin-left: var(--spacing-s);
+    margin-bottom: var(--spacing-s);
+
+    @media (min-width: $breakpoint-small) {
+      max-width: none;
+
+      select {
+        padding: 0 var(--spacing-xs);
+        padding-right: var(--spacing-l);
+      }
+    }
+  }
 }
 
 .card--enable-overflow {
@@ -318,6 +333,7 @@
   align-self: flex-start;
   .button--alt {
     padding-top: 2px;
+    padding: 0 var(--spacing-s);
   }
   .comment__sort {
     .button--alt {
@@ -642,3 +658,25 @@
     }
   }
 }
+
+.button_selectedServer {
+  display: inline;
+  float: right;
+  select {
+    width: 12rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  @media (max-width: $breakpoint-small) {
+    select {
+      width: 8rem;
+    }
+  }
+}
+
+.button_refresh {
+  display: inline;
+  float: right;
+  margin-left: var(--spacing-s);
+}
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index f1c494cb7..98f33a924 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -37,16 +37,12 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__sort {
-  margin-right: var(--spacing-s);
   display: inline-block;
 
   @media (min-width: $breakpoint-small) {
     margin-top: 0;
     display: inline;
   }
-  @media (max-width: $breakpoint-small) {
-    margin-right: 0;
-  }
 }
 
 .comment {
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 1a4239400..25be1d292 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -62,6 +62,9 @@ $spacing-width: 36px;
   --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
   --option-select-width: 8rem;
 
+  --input-select-server-min-width: 100px;
+  --input-select-server-max-width: 250px;
+
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;
-- 
2.45.2


From 28e168d5e5cd75fc69a86656c2a800b8fd4a54e6 Mon Sep 17 00:00:00 2001
From: jm-morani <59413732+jm-morani@users.noreply.github.com>
Date: Tue, 25 Oct 2022 10:03:20 -0400
Subject: [PATCH 2/6] Minor layout fixes depending on window shape (#7709)

Disable theatre mode styles for medium screen (or lower)
Fix the width of the cover in theater mode
Fix conflicting styles when width is 1150px
Remove duplicate from CHANGELOG

Co-authored-by: Jean-Michel Morani <probono+lbry@morani.org>
---
 CHANGELOG.md                              |  1 -
 ui/component/fileRenderFloating/view.jsx  |  6 ++++--
 ui/component/fileRenderInitiator/view.jsx |  4 +++-
 ui/component/page/view.jsx                |  4 ++--
 ui/page/file/view.jsx                     | 20 ++++++++++++++------
 ui/scss/component/_button.scss            |  2 +-
 ui/scss/component/_claim-list.scss        |  2 +-
 ui/scss/component/_comments.scss          |  6 +++---
 ui/scss/component/_main.scss              |  7 +++----
 ui/scss/component/_navigation.scss        |  4 ++--
 ui/scss/component/section.scss            |  6 +++---
 11 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 35500cde0..4f0a7a621 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
  - Show downloads newest first ([#7684](https://github.com/lbryio/lbry-desktop/pull/7684))
  - Only allow images in image uploader ([#7672](https://github.com/lbryio/lbry-desktop/pull/7672))
  - Fixed bug with csv exports ([#7697](https://github.com/lbryio/lbry-desktop/pull/7697))
- - Fixed small screen viewer position ([#7677](https://github.com/lbryio/lbry-desktop/pull/7677))
  - Fixed various upload bugs including transcoding ([#7688](https://github.com/lbryio/lbry-desktop/pull/7688))
  - Fallback for files with no extension ([#7704](https://github.com/lbryio/lbry-desktop/pull/7704))
  
diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index ac263270a..29c794fcb 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -12,7 +12,7 @@ import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
 import Draggable from 'react-draggable';
 import { onFullscreenChange } from 'util/full-screen';
 import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url';
-import { useIsMobile } from 'effects/use-screensize';
+import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import debounce from 'util/debounce';
 import { useHistory } from 'react-router';
 import { isURIEqual } from 'util/lbryURI';
@@ -132,6 +132,7 @@ export default function FileRenderFloating(props: Props) {
   const playingUriSource = playingUri && playingUri.source;
   const isComment = playingUriSource === 'comment';
   const isMobile = useIsMobile();
+  const isMediumScreen = useIsMediumScreen();
   const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri);
 
   const [fileViewerRect, setFileViewerRect] = useState();
@@ -343,7 +344,8 @@ export default function FileRenderFloating(props: Props) {
           'content__viewer--floating': isFloating,
           'content__viewer--inline': !isFloating,
           'content__viewer--secondary': isComment,
-          'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri,
+          'content__viewer--theater-mode':
+            !isFloating && videoTheaterMode && !isMediumScreen && playingUri?.uri === primaryUri,
           'content__viewer--disable-click': wasDragging,
         })}
         style={
diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx
index 38f1ecee5..436198d32 100644
--- a/ui/component/fileRenderInitiator/view.jsx
+++ b/ui/component/fileRenderInitiator/view.jsx
@@ -9,6 +9,7 @@ import * as PAGES from 'constants/pages';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import * as KEYCODES from 'constants/keycodes';
 import Button from 'component/button';
+import { useIsMediumScreen } from 'effects/use-screensize';
 import isUserTyping from 'util/detect-typing';
 import { getThumbnailCdnUrl } from 'util/thumbnail';
 import Nag from 'component/common/nag';
@@ -63,6 +64,7 @@ export default function FileRenderInitiator(props: Props) {
   const fileStatus = fileInfo && fileInfo.status;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
+  const isMediumScreen = useIsMediumScreen();
   const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
   const containerRef = React.useRef<any>();
 
@@ -151,7 +153,7 @@ export default function FileRenderInitiator(props: Props) {
       style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
       className={classnames('content__cover', {
         'content__cover--disabled': disabled,
-        'content__cover--theater-mode': videoTheaterMode,
+        'content__cover--theater-mode': videoTheaterMode && !isMediumScreen,
         'content__cover--text': isText,
         'card__media--nsfw': obscurePreview,
       })}
diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx
index 7a967ee5f..a14669b97 100644
--- a/ui/component/page/view.jsx
+++ b/ui/component/page/view.jsx
@@ -92,7 +92,7 @@ function Page(props: Props) {
       <div
         className={classnames('main-wrapper__inner', {
           'main-wrapper__inner--filepage': isOnFilePage,
-          'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
+          'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen,
         })}
       >
         {!authPage &&
@@ -124,7 +124,7 @@ function Page(props: Props) {
               'main--file-page': filePage,
               'main--settings-page': settingsPage,
               'main--markdown': isMarkdown,
-              'main--theater-mode': isOnFilePage && videoTheaterMode && !isMarkdown,
+              'main--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen && !isMarkdown,
             })}
           >
             {children}
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index 6d708d66e..564c76336 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
+import { useIsMediumScreen } from 'effects/use-screensize';
 import Page from 'component/page';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import FileTitleSection from 'component/fileTitleSection';
@@ -59,6 +60,7 @@ function FilePage(props: Props) {
   } = props;
   const cost = costInfo ? costInfo.cost : null;
   const hasFileInfo = fileInfo !== undefined;
+  const isMediumScreen = useIsMediumScreen();
   const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
   const videoPlayedEnoughToResetPosition = React.useMemo(() => {
     const durationInSecs =
@@ -169,8 +171,10 @@ function FilePage(props: Props) {
         <div className={classnames('section card-stack', `file-page__${renderMode}`)}>
           <FileTitleSection uri={uri} isNsfwBlocked />
         </div>
-        {collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
-        {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
+        {collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
+          <CollectionContent id={collectionId} uri={uri} />
+        )}
+        {!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
       </Page>
     );
   }
@@ -187,13 +191,17 @@ function FilePage(props: Props) {
               {commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
               {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
             </div>
-            {!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
-            {collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
+            {!collection && !isMarkdown && videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
+            {collection && !isMarkdown && videoTheaterMode && !isMediumScreen && (
+              <CollectionContent id={collectionId} uri={uri} />
+            )}
           </div>
         )}
       </div>
-      {collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
-      {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
+      {collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
+        <CollectionContent id={collectionId} uri={uri} />
+      )}
+      {!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
       {isMarkdown && (
         <div className="file-page__post-comments">
           {!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index ebffffd73..1454e3938 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -167,7 +167,7 @@ a.button--alt {
 .vjs-button--theater-mode.vjs-button {
   display: none;
 
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     display: block;
     order: 1;
     background-repeat: no-repeat;
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 30476ed5b..9934f447b 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -621,7 +621,7 @@
     @media (max-width: $breakpoint-xsmall) {
       -webkit-line-clamp: 2 !important;
     }
-    @media (min-width: $breakpoint-medium) {
+    @media not all and (max-width: $breakpoint-medium) {
       -webkit-line-clamp: 1 !important;
     }
   }
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 98f33a924..6c43d9c94 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -501,7 +501,7 @@ $thumbnailWidthSmall: 1rem;
     min-width: 100%;
     max-width: 100%;
 
-    @media (min-width: $breakpoint-medium) {
+    @media not all and (max-width: $breakpoint-medium) {
       min-width: 40%;
       max-width: 40%;
     }
@@ -543,7 +543,7 @@ $thumbnailWidthSmall: 1rem;
       }
     }
 
-    @media (min-width: $breakpoint-medium) {
+    @media not all and (max-width: $breakpoint-medium) {
       margin: 0 var(--spacing-xs);
     }
 
@@ -558,7 +558,7 @@ $thumbnailWidthSmall: 1rem;
     padding-left: var(--spacing-m);
     border-left: 4px solid var(--color-border);
 
-    @media (min-width: $breakpoint-medium) {
+    @media not all and (max-width: $breakpoint-medium) {
       margin-top: 0;
       margin-left: var(--spacing-s);
     }
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 5528c020a..08673998c 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -73,7 +73,7 @@ body {
 }
 
 .sidebar--pusher--open {
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     transform: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9);
   }
 }
@@ -155,7 +155,7 @@ body {
       }
     }
 
-    @media (min-width: $breakpoint-medium) {
+    @media not all and (max-width: $breakpoint-medium) {
       flex-direction: row;
     }
     @media (max-width: $breakpoint-medium) {
@@ -461,7 +461,6 @@ body {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
-  width: 100vw;
   max-width: none;
 
   > :first-child {
@@ -804,7 +803,7 @@ body {
     }
   }
 
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     > :first-child {
       width: calc(30% - var(--spacing-l));
       max-width: 25rem;
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index e9c869033..84674c152 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -70,7 +70,7 @@
     color: var(--color-brand-contrast) !important;
   }
 
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     overflow-y: hidden;
     justify-content: space-between;
 
@@ -235,7 +235,7 @@
     @extend .navigation-link--highlighted;
   }
 
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     text-align: left;
     margin-bottom: 0;
 
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 332ca7e9e..ceb90376a 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -358,7 +358,7 @@
     max-width: unset;
   }
 
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     width: 40%;
 
     .button,
@@ -375,7 +375,7 @@
 }
 
 .settings__row--value--multirow {
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     width: 80%;
     margin-top: var(--spacing-l);
 
@@ -389,7 +389,7 @@
 }
 
 .settings__row--value--vertical-separator {
-  @media (min-width: $breakpoint-medium) {
+  @media not all and (max-width: $breakpoint-medium) {
     border-left: 1px solid var(--color-border);
   }
 }
-- 
2.45.2


From ebf35a1df8757e9193bf9733197ae186dd94c4c1 Mon Sep 17 00:00:00 2001
From: jessopb <36554050+jessopb@users.noreply.github.com>
Date: Tue, 25 Oct 2022 12:56:38 -0400
Subject: [PATCH 3/6] remove watchman (and errors!) (#7710)

---
 static/app-strings.json |   1 +
 ui/analytics.js         | 164 +++-------------------------------------
 ui/redux/actions/app.js |  52 +++++++------
 3 files changed, 37 insertions(+), 180 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 2b84ec35a..756121275 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2318,5 +2318,6 @@
   "Odysee Connect --[Section in Help Page]--": "Odysee Connect",
   "Your hub has blocked this content because it subscribes to the following blocking channel:": "Your hub has blocked this content because it subscribes to the following blocking channel:",
   "Your hub has blocked access to this content do to a complaint received under the US Digital Millennium Copyright Act.": "Your hub has blocked access to this content do to a complaint received under the US Digital Millennium Copyright Act.",
+  "Autoplay Next is on.": "Autoplay Next is on.",
   "--end--": "--end--"
 }
diff --git a/ui/analytics.js b/ui/analytics.js
index 132589d64..e9f2300fe 100644
--- a/ui/analytics.js
+++ b/ui/analytics.js
@@ -1,4 +1,11 @@
 // @flow
+/*
+  Removed Watchman (internal view tracking) code.
+  This file may eventually implement cantina
+  Refer to 0cc0e213a5c5bf9e2a76316df5d9da4b250a13c3 for initial integration commit
+  refer to ___ for removal commit.
+ */
+
 import { Lbryio } from 'lbryinc';
 import * as Sentry from '@sentry/browser';
 import MatomoTracker from '@datapunt/matomo-tracker-js';
@@ -14,9 +21,6 @@ const devInternalApis = process.env.LBRY_API_URL && process.env.LBRY_API_URL.inc
 export const SHARE_INTERNAL = 'shareInternal';
 const SHARE_THIRD_PARTY = 'shareThirdParty';
 
-const WATCHMAN_BACKEND_ENDPOINT = 'https://watchman.na-backend.odysee.com/reports/playback';
-// const SEND_DATA_TO_WATCHMAN_INTERVAL = 10; // in seconds
-
 if (isProduction) {
   ElectronCookies.enable({
     origin: 'https://lbry.tv',
@@ -68,114 +72,10 @@ type LogPublishParams = {
 let internalAnalyticsEnabled: boolean = false;
 if (window.localStorage.getItem(SHARE_INTERNAL) === 'true') internalAnalyticsEnabled = true;
 
-/**
- * Determine the mobile device type viewing the data
- * This function returns one of 'and' (Android), 'ios', or 'web'.
- *
- * @returns {String}
- */
-function getDeviceType() {
-  return 'dsk';
-}
-// variables initialized for watchman
-let amountOfBufferEvents = 0;
-let amountOfBufferTimeInMS = 0;
-let videoType, userId, claimUrl, playerPoweredBy, videoPlayer, bitrateAsBitsPerSecond;
-let lastSentTime;
-
-// calculate data for backend, send them, and reset buffer data for next interval
-async function sendAndResetWatchmanData() {
-  if (!userId) {
-    return 'Can only be used with a user id';
-  }
-
-  if (!videoPlayer) {
-    return 'Video player not initialized';
-  }
-
-  let timeSinceLastIntervalSend = new Date() - lastSentTime;
-  lastSentTime = new Date();
-
-  let protocol;
-  if (videoType === 'application/x-mpegURL') {
-    protocol = 'hls';
-    // get bandwidth if it exists from the texttrack (so it's accurate if user changes quality)
-    // $FlowFixMe
-    bitrateAsBitsPerSecond = videoPlayer.textTracks?.().tracks_[0]?.activeCues[0]?.value?.bandwidth;
-  } else {
-    protocol = 'stb';
-  }
-
-  // current position in video in MS
-  const positionInVideo = Math.round(videoPlayer.currentTime()) * 1000;
-
-  // get the duration marking the time in the video for relative position calculation
-  const totalDurationInSeconds = Math.round(videoPlayer.duration());
-
-  // build object for watchman backend
-  const objectToSend = {
-    rebuf_count: amountOfBufferEvents,
-    rebuf_duration: amountOfBufferTimeInMS,
-    url: claimUrl.replace('lbry://', ''),
-    device: getDeviceType(),
-    duration: timeSinceLastIntervalSend,
-    protocol,
-    player: playerPoweredBy,
-    user_id: userId.toString(),
-    position: Math.round(positionInVideo),
-    rel_position: Math.round((positionInVideo / (totalDurationInSeconds * 1000)) * 100),
-    bitrate: bitrateAsBitsPerSecond,
-    bandwidth: undefined,
-    // ...(userDownloadBandwidthInBitsPerSecond && {bandwidth: userDownloadBandwidthInBitsPerSecond}), // add bandwidth if populated
-  };
-
-  // post to watchman
-  await sendWatchmanData(objectToSend);
-
-  // reset buffer data
-  amountOfBufferEvents = 0;
-  amountOfBufferTimeInMS = 0;
-}
-
-let watchmanInterval;
-// clear watchman interval and mark it as null (when video paused)
-function stopWatchmanInterval() {
-  clearInterval(watchmanInterval);
-  watchmanInterval = null;
-}
-
-// creates the setInterval that will run send to watchman on recurring basis
-function startWatchmanIntervalIfNotRunning() {
-  if (!watchmanInterval) {
-    // instantiate the first time to calculate duration from
-    lastSentTime = new Date();
-  }
-}
-
-// post data to the backend
-async function sendWatchmanData(body) {
-  try {
-    const response = await fetch(WATCHMAN_BACKEND_ENDPOINT, {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    });
-
-    return response;
-  } catch (err) {}
-}
-
 const analytics: Analytics = {
   // receive buffer events from tracking plugin and save buffer amounts and times for backend call
   videoBufferEvent: async (claim, data) => {
-    amountOfBufferEvents = amountOfBufferEvents + 1;
-    amountOfBufferTimeInMS = amountOfBufferTimeInMS + data.bufferDuration;
-  },
-  onDispose: () => {
-    stopWatchmanInterval();
+    // stub
   },
   /**
    * Is told whether video is being started or paused, and adjusts interval accordingly
@@ -183,40 +83,9 @@ const analytics: Analytics = {
    * @param {object} passedPlayer - VideoJS Player object
    */
   videoIsPlaying: (isPlaying, passedPlayer) => {
-    let playerIsSeeking = false;
-    // have to use this because videojs pauses/unpauses during seek
-    // sometimes the seeking function isn't populated yet so check for it as well
-    if (passedPlayer && passedPlayer.seeking) {
-      playerIsSeeking = passedPlayer.seeking();
-    }
-
-    // if being paused, and not seeking, send existing data and stop interval
-    if (!isPlaying && !playerIsSeeking) {
-      sendAndResetWatchmanData();
-      stopWatchmanInterval();
-      // if being told to pause, and seeking, send and restart interval
-    } else if (!isPlaying && playerIsSeeking) {
-      sendAndResetWatchmanData();
-      stopWatchmanInterval();
-      startWatchmanIntervalIfNotRunning();
-      // is being told to play, and seeking, don't do anything,
-      // assume it's been started already from pause
-    } else if (isPlaying && playerIsSeeking) {
-      // start but not a seek, assuming a start from paused content
-    } else if (isPlaying && !playerIsSeeking) {
-      startWatchmanIntervalIfNotRunning();
-    }
+    // stub
   },
   videoStartEvent: (claimId, timeToStartVideo, poweredBy, passedUserId, canonicalUrl, passedPlayer, videoBitrate) => {
-    // populate values for watchman when video starts
-    userId = passedUserId;
-    claimUrl = canonicalUrl;
-    playerPoweredBy = poweredBy;
-
-    videoType = passedPlayer.currentSource().type;
-    videoPlayer = passedPlayer;
-    bitrateAsBitsPerSecond = videoBitrate;
-
     // sendPromMetric('time_to_start', duration);
     sendMatomoEvent('Media', 'TimeToStart', claimId, timeToStartVideo);
   },
@@ -382,24 +251,9 @@ function sendMatomoEvent(category, action, name, value) {
   }
 }
 
-// Prometheus
-// function sendPromMetric(name: string, value?: number) {
-//   if (IS_WEB) {
-//     let url = new URL(SDK_API_PATH + '/metric/ui');
-//     const params = { name: name, value: value ? value.toString() : '' };
-//     url.search = new URLSearchParams(params).toString();
-//     return fetch(url, { method: 'post' });
-//   }
-// }
-
 const MatomoInstance = new MatomoTracker({
   urlBase: MATOMO_URL,
   siteId: MATOMO_ID, // optional, default value: `1`
-  // heartBeat: { // optional, enabled by default
-  //   active: true, // optional, default value: true
-  //   seconds: 10 // optional, default value: `15
-  // },
-  // linkTracking: false // optional, default value: true
 });
 
 analytics.pageView(generateInitialUrl(window.location.hash));
diff --git a/ui/redux/actions/app.js b/ui/redux/actions/app.js
index 359f3a15f..88b26ca76 100644
--- a/ui/redux/actions/app.js
+++ b/ui/redux/actions/app.js
@@ -458,32 +458,34 @@ export function doAnalyticsView(uri, timeToStart) {
 }
 
 export function doAnalyticsBuffer(uri, bufferData) {
-  return (dispatch, getState) => {
-    const state = getState();
-    const claim = selectClaimForUri(state, uri);
-    const user = selectUser(state);
-    const {
-      value: { video, audio, source },
-    } = claim;
-    const timeAtBuffer = parseInt(bufferData.currentTime ? bufferData.currentTime * 1000 : 0);
-    const bufferDuration = parseInt(bufferData.secondsToLoad ? bufferData.secondsToLoad * 1000 : 0);
-    const fileDurationInSeconds = (video && video.duration) || (audio && audio.duration);
-    const fileSize = source.size; // size in bytes
-    const fileSizeInBits = fileSize * 8;
-    const bitRate = parseInt(fileSizeInBits / fileDurationInSeconds);
-    const userId = user && user.id.toString();
+  return () => {
+    // return (dispatch, getState) => {
+    // const state = getState();
+    // const claim = selectClaimForUri(state, uri);
+    // const user = selectUser(state);
+    // const {
+    //   value: { video, audio, source },
+    // } = claim;
+    // const timeAtBuffer = parseInt(bufferData.currentTime ? bufferData.currentTime * 1000 : 0);
+    // const bufferDuration = parseInt(bufferData.secondsToLoad ? bufferData.secondsToLoad * 1000 : 0);
+    // const fileDurationInSeconds = (video && video.duration) || (audio && audio.duration);
+    // const fileSize = source.size; // size in bytes
+    // const fileSizeInBits = fileSize * 8;
+    // const bitRate = parseInt(fileSizeInBits / fileDurationInSeconds);
+    // const userId = user && user.id.toString();
     // if there's a logged in user, send buffer event data to watchman
-    if (userId) {
-      analytics.videoBufferEvent(claim, {
-        timeAtBuffer,
-        bufferDuration,
-        bitRate,
-        userId,
-        duration: fileDurationInSeconds,
-        playerPoweredBy: bufferData.playerPoweredBy,
-        readyState: bufferData.readyState,
-      });
-    }
+    // if (<condition>) {
+    // STUB: any buffer events here
+    // analytics.videoBufferEvent(claim, {
+    //   timeAtBuffer,
+    //   bufferDuration,
+    //   bitRate,
+    //   userId,
+    //   duration: fileDurationInSeconds,
+    //   playerPoweredBy: bufferData.playerPoweredBy,
+    //   readyState: bufferData.readyState,
+    // });
+    // }
   };
 }
 
-- 
2.45.2


From 18a333671478e357623b273ed4b17bcbc7138569 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 25 Oct 2022 13:02:03 -0400
Subject: [PATCH 4/6] Bump @xmldom/xmldom from 0.7.5 to 0.7.6 (#7701)

Bumps [@xmldom/xmldom](https://github.com/xmldom/xmldom) from 0.7.5 to 0.7.6.
- [Release notes](https://github.com/xmldom/xmldom/releases)
- [Changelog](https://github.com/xmldom/xmldom/blob/master/CHANGELOG.md)
- [Commits](https://github.com/xmldom/xmldom/compare/0.7.5...0.7.6)

---
updated-dependencies:
- dependency-name: "@xmldom/xmldom"
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 981cc5556..525205b2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3291,9 +3291,9 @@ __metadata:
   linkType: hard
 
 "@xmldom/xmldom@npm:^0.7.2":
-  version: 0.7.5
-  resolution: "@xmldom/xmldom@npm:0.7.5"
-  checksum: 8d7ec35c1ef6183b4f621df08e01d7e61f244fb964a4719025e65fe6ac06fac418919be64fb40fe5908e69158ef728f2d936daa082db326fe04603012b5f2a84
+  version: 0.7.6
+  resolution: "@xmldom/xmldom@npm:0.7.6"
+  checksum: 3c31dcd909aaefd65090033bd45e0aca42d636a9ae43c7313f4be87de570d046abba28362810d63c0718d6f08a9ce5f8da27b87437afc24d2290b6d4e75a6eee
   languageName: node
   linkType: hard
 
-- 
2.45.2


From de062c4aee154125be90e5c89c6973c6aaba8b78 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 25 Oct 2022 13:31:32 -0400
Subject: [PATCH 5/6] yarn lock

---
 yarn.lock | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 525205b2e..d52b88e1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3080,6 +3080,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@videojs/http-streaming@npm:2.15.0":
+  version: 2.15.0
+  resolution: "@videojs/http-streaming@npm:2.15.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@videojs/vhs-utils": 3.0.5
+    aes-decrypter: 3.1.3
+    global: ^4.4.0
+    m3u8-parser: 4.8.0
+    mpd-parser: 0.22.0
+    mux.js: 6.0.1
+    video.js: ^6 || ^7
+  peerDependencies:
+    video.js: ^6 || ^7
+  checksum: 3b04c78c42532419216abb0eae685bfa873aeea77a015875d1cfcc0e5f4eda7da3868e6362320b2843562ba735f728a9b7895384d01c673bc3845e3ef7ac3452
+  languageName: node
+  linkType: hard
+
 "@videojs/vhs-utils@npm:3.0.5, @videojs/vhs-utils@npm:^3.0.4, @videojs/vhs-utils@npm:^3.0.5":
   version: 3.0.5
   resolution: "@videojs/vhs-utils@npm:3.0.5"
@@ -12014,6 +12032,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"m3u8-parser@npm:4.8.0":
+  version: 4.8.0
+  resolution: "m3u8-parser@npm:4.8.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@videojs/vhs-utils": ^3.0.5
+    global: ^4.4.0
+  checksum: 850a8c5cacdbdc154d4fa18c79af77fdf45ef4afcb3d8a0507d04e8d9ddb5c0a9d18cb48c8e23be707d007c063038cdeab0d3de23100e5c02050a7aff6e2b2b8
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^1.0.0":
   version: 1.3.0
   resolution: "make-dir@npm:1.3.0"
@@ -12686,6 +12715,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mpd-parser@npm:0.22.0":
+  version: 0.22.0
+  resolution: "mpd-parser@npm:0.22.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@videojs/vhs-utils": ^3.0.5
+    "@xmldom/xmldom": ^0.7.2
+    global: ^4.4.0
+  bin:
+    mpd-to-m3u8-json: bin/parse.js
+  checksum: 6266f03ec5eb9501e315ed567e70d9e1c8d114f84a8ec27b31ec5de877ab0cd80592dfb058e9abd7975734374f6f10cec1751ab8af90b577e902f0f38f868b6c
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.0.0":
   version: 2.0.0
   resolution: "ms@npm:2.0.0"
@@ -18713,7 +18756,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"video.js@npm:>=5.20.5, video.js@npm:^6 || ^7, video.js@npm:^7.14.3":
+"video.js@npm:>=5.20.5":
+  version: 7.21.0
+  resolution: "video.js@npm:7.21.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    "@videojs/http-streaming": 2.15.0
+    "@videojs/vhs-utils": ^3.0.4
+    "@videojs/xhr": 2.6.0
+    aes-decrypter: 3.1.3
+    global: ^4.4.0
+    keycode: ^2.2.0
+    m3u8-parser: 4.8.0
+    mpd-parser: 0.22.0
+    mux.js: 6.0.1
+    safe-json-parse: 4.0.0
+    videojs-font: 3.2.0
+    videojs-vtt.js: ^0.15.4
+  checksum: 9eea846bb610daca8b926ff9d0662bedf2d36063e312222c3af7e95494de09b8ce3fd0592082853e7aaaf9c92b8e37e958a41332e241376d88c4970ee717e3ab
+  languageName: node
+  linkType: hard
+
+"video.js@npm:^6 || ^7, video.js@npm:^7.14.3":
   version: 7.19.2
   resolution: "video.js@npm:7.19.2"
   dependencies:
@@ -18771,6 +18835,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"videojs-vtt.js@npm:^0.15.4":
+  version: 0.15.4
+  resolution: "videojs-vtt.js@npm:0.15.4"
+  dependencies:
+    global: ^4.3.1
+  checksum: 10c6c861621d4314e7d4b60b7bef1afc60f1ac438879f6b3f22e8944d694c8e9dfc809a8187ed72f44e06c39a159044d8fa15e80695b9bf7b9bef99ea2740b70
+  languageName: node
+  linkType: hard
+
 "villain-react@npm:^1.0.9":
   version: 1.0.9
   resolution: "villain-react@npm:1.0.9"
-- 
2.45.2


From b3d54417ee1a60df38e40044d81abdface3e9033 Mon Sep 17 00:00:00 2001
From: ByronEricPerez <xxloboisthemanxx@gmail.com>
Date: Wed, 26 Oct 2022 20:03:25 -0300
Subject: [PATCH 6/6] Add 'Collections' into txo filter

---
 ui/component/txoList/view.jsx | 2 ++
 ui/constants/txo_list.js      | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/component/txoList/view.jsx b/ui/component/txoList/view.jsx
index 8cda2db03..b1f0c432f 100644
--- a/ui/component/txoList/view.jsx
+++ b/ui/component/txoList/view.jsx
@@ -103,6 +103,8 @@ function TxoList(props: Props) {
       params[TXO.TX_TYPE] = currentUrlParams.type;
     } else if (currentUrlParams.type === TXO.PUBLISH) {
       params[TXO.TX_TYPE] = TXO.STREAM;
+    } else if (currentUrlParams.type === TXO.COLLECTION) {
+      params[TXO.TX_TYPE] = currentUrlParams.type;
     }
   }
   if (currentUrlParams.active) {
diff --git a/ui/constants/txo_list.js b/ui/constants/txo_list.js
index b702f3438..20a02f75a 100644
--- a/ui/constants/txo_list.js
+++ b/ui/constants/txo_list.js
@@ -11,7 +11,8 @@ export const SUPPORT = 'support';
 export const CHANNEL = 'channel';
 export const PUBLISH = 'publish';
 export const REPOST = 'repost';
-export const DROPDOWN_TYPES = [ALL, SENT, RECEIVED, SUPPORT, CHANNEL, PUBLISH, REPOST];
+export const COLLECTION = 'collection';
+export const DROPDOWN_TYPES = [ALL, SENT, RECEIVED, SUPPORT, CHANNEL, PUBLISH, REPOST, COLLECTION];
 // dropdown subtypes
 export const TIP = 'tip';
 export const PURCHASE = 'purchase';
-- 
2.45.2