Revert "full width homepage"

This reverts commit 0018fdaebc.

custom/homepage.example.js

@@ -70,7 +70,7 @@ type RowDataItem = {
   options?: {},
 };
 
-export default function GetHomePageRowData(
+export default function getHomePageRowData(
   authenticated: boolean,
   showPersonalizedChannels: boolean,
   showPersonalizedTags: boolean,

ui/component/page/view.jsx

@@ -21,7 +21,6 @@ type Props = {
   isUpgradeAvailable: boolean,
   authPage: boolean,
   filePage: boolean,
-  homePage: boolean,
   noHeader: boolean,
   noFooter: boolean,
   noSideNavigation: boolean,
@@ -40,10 +39,10 @@ function Page(props: Props) {
     className,
     authPage = false,
     filePage = false,
-    homePage = false,
     noHeader = false,
     noFooter = false,
     noSideNavigation = false,
+
     backout,
   } = props;
   const {
@@ -52,7 +51,6 @@ function Page(props: Props) {
   const [sidebarOpen, setSidebarOpen] = usePersistedState('sidebar', true);
   const isMediumScreen = useIsMediumScreen();
   const isMobile = useIsMobile();
-
   let isOnFilePage = false;
   try {
     const url = pathname.slice(1).replace(/:/g, '#');
@@ -91,11 +89,7 @@ function Page(props: Props) {
           />
         )}
         <main
-          className={classnames(MAIN_CLASS, className, {
+          className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage, 'main--file-page': filePage })}
-            'main--full-width': authPage,
-            'main--file-page': filePage,
-            'main--homepage': homePage,
-          })}
         >
           {children}
         </main>

ui/effects/use-media.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+// https://usehooks.com/useMedia/
+export default function useMedia(queries, values, defaultValue) {
+  // Array containing a media query list for each query
+  const mediaQueryLists = queries.map(q => window.matchMedia(q));
+
+  // Function that gets value based on matching media query
+  const getValue = () => {
+    // Get index of first media query that matches
+    const index = mediaQueryLists.findIndex(mql => mql.matches);
+    // Return related value or defaultValue if none
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
+  };
+
+  // State and setter for matched value
+  const [value, setValue] = useState(getValue);
+
+  useEffect(
+    () => {
+      // Event listener callback
+      // Note: By defining getValue outside of useEffect we ensure that it has ...
+      // ... current values of hook args (as this hook callback is created once on mount).
+      const handler = () => setValue(getValue);
+      // Set a listener for each media query with above handler as callback.
+      mediaQueryLists.forEach(mql => mql.addListener(handler));
+      // Remove listeners on cleanup
+      return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
+    },
+    [] // Empty array ensures effect is only run on mount and unmount
+  );
+
+  return value;
+}

ui/effects/use-screensize.js

@@ -1,36 +1,11 @@
-// Widths are taken from "ui/scss/init/vars.scss"
+import useMedia from './use-media';
-import React from 'react';
-
-function useWindowSize() {
-  const isWindowClient = typeof window === 'object';
-  const [windowSize, setWindowSize] = React.useState(isWindowClient ? window.innerWidth : undefined);
-
-  React.useEffect(() => {
-    function setSize() {
-      setWindowSize(window.innerWidth);
-    }
-
-    if (isWindowClient) {
-      window.addEventListener('resize', setSize);
-
-      return () => window.removeEventListener('resize', setSize);
-    }
-  }, [isWindowClient, setWindowSize]);
-
-  return windowSize;
-}
 
 export function useIsMobile() {
-  const windowSize = useWindowSize();
+  const isMobile = useMedia(['(min-width: 901px)'], [false], true);
-  return windowSize < 901;
+  return isMobile;
 }
 
 export function useIsMediumScreen() {
-  const windowSize = useWindowSize();
+  const isMobile = useMedia(['(min-width: 1151px)'], [false], true);
-  return windowSize < 1151;
+  return isMobile;
-}
-
-export function useIsLargeScreen() {
-  const windowSize = useWindowSize();
-  return windowSize > 1600;
 }

ui/page/home/view.jsx

@@ -37,7 +37,7 @@ function HomePage(props: Props) {
   );
 
   return (
-    <Page homePage>
+    <Page>
       {(authenticated || !IS_WEB) && !subscribedChannels.length && (
         <div className="notice-message">
           <h1 className="section__title">{__('LBRY Works Better If You Are Following Channels')}</h1>

ui/scss/component/_claim-list.scss

@@ -323,45 +323,34 @@
 }
 
 .claim-preview--tile {
+  $width: calc((100% - var(--spacing-m) * 3) / 4);
+  width: $width;
+  @include handleClaimTileGifThumbnail($width);
+
   margin-bottom: var(--spacing-l);
   margin-right: 0;
   margin-top: 0;
   margin-left: var(--spacing-m);
   justify-content: flex-start;
 
-  .media__thumb {
+  @media (min-width: $breakpoint-medium) {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  @media (min-width: $breakpoint-large) {
-    $width: calc((100% - var(--spacing-m) * 5) / 6);
-    width: $width;
-    @include handleClaimTileGifThumbnail($width);
-
-    &:first-child,
-    &:nth-child(6n + 1) {
-      margin-left: 0;
-    }
-  }
-
-  @media (max-width: $breakpoint-large) and (min-width: $breakpoint-medium) {
-    $width: calc((100% - var(--spacing-m) * 3) / 4);
-    width: $width;
-    @include handleClaimTileGifThumbnail($width);
-
     &:first-child,
     &:nth-child(4n + 1) {
       margin-left: 0;
     }
   }
 
+  &:hover {
+    cursor: pointer;
+  }
+
+  .media__thumb {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
-    $width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-l) * 3) / 3);
+    $width: calc((100vw - var(--side-nav-width--micro) - (var(--spacing-l) * 3)) / 3);
     width: $width;
     @include handleClaimTileGifThumbnail($width);
 

ui/scss/component/_main.scss

@@ -94,16 +94,6 @@
   }
 }
 
-.main--homepage {
-  @extend .main;
-
-  @media (min-width: $breakpoint-large) {
-    max-width: none;
-    width: 100%;
-    padding: 0 var(--spacing-l);
-  }
-}
-
 .main--auth-page {
   max-width: 70rem;
   margin-top: var(--spacing-main-padding);

ui/util/homepage.js

@@ -4,7 +4,6 @@ import * as CS from 'constants/claim_search';
 import { parseURI } from 'lbry-redux';
 import moment from 'moment';
 import { toCapitalCase } from 'util/string';
-import { useIsLargeScreen } from 'effects/use-screensize';
 
 type RowDataItem = {
   title: string,
@@ -13,7 +12,7 @@ type RowDataItem = {
   options?: {},
 };
 
-export default function GetHomePageRowData(
+export default function getHomePageRowData(
   authenticated: boolean,
   showPersonalizedChannels: boolean,
   showPersonalizedTags: boolean,
@@ -21,12 +20,6 @@ export default function GetHomePageRowData(
   followedTags: Array<Tag>,
   showIndividualTags: boolean
 ) {
-  const isLargeScreen = useIsLargeScreen();
-
-  function getPageSize(originalSize) {
-    return isLargeScreen ? originalSize * (3 / 2) : originalSize;
-  }
-
   let rowData: Array<RowDataItem> = [];
   const individualTagDataItems: Array<RowDataItem> = [];
   const YOUTUBER_CHANNEL_IDS = [
@@ -121,7 +114,7 @@ export default function GetHomePageRowData(
     options: {
       claimType: ['stream'],
       orderBy: ['release_time'],
-      pageSize: getPageSize(12),
+      pageSize: 12,
       channelIds: YOUTUBER_CHANNEL_IDS,
       releaseTime: `>${Math.floor(
         moment()
@@ -165,7 +158,7 @@ export default function GetHomePageRowData(
                 .startOf('week')
                 .unix()
             )}`,
-      pageSize: getPageSize(subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4),
+      pageSize: subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4,
       channelIds: subscribedChannels.map((subscription: Subscription) => {
         const { channelClaimId } = parseURI(subscription.uri);
         return channelClaimId;
@@ -177,7 +170,7 @@ export default function GetHomePageRowData(
     title: __('Top Content from Today'),
     link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_DAY}`,
     options: {
-      pageSize: getPageSize(showPersonalizedChannels || showPersonalizedTags ? 4 : 8),
+      pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
       orderBy: ['effective_amount'],
       claimType: ['stream'],
       releaseTime: `>${Math.floor(
@@ -195,7 +188,7 @@ export default function GetHomePageRowData(
     options: {
       claimType: ['stream'],
       tags: ['2020protests'],
-      pageSize: getPageSize(4),
+      pageSize: 4,
     },
   };
 
@@ -212,7 +205,7 @@ export default function GetHomePageRowData(
     title: __('Trending Classics'),
     link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TRENDING}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
     options: {
-      pageSize: getPageSize(4),
+      pageSize: 4,
       claimType: ['stream'],
       releaseTime: `<${Math.floor(
         moment()
@@ -235,7 +228,6 @@ export default function GetHomePageRowData(
     title: __('Trending For Your Tags'),
     link: `/$/${PAGES.TAGS_FOLLOWING}`,
     options: {
-      pageSize: getPageSize(4),
       tags: followedTags.map(tag => tag.name),
       claimType: ['stream'],
     },
@@ -246,7 +238,7 @@ export default function GetHomePageRowData(
     link: `/@lbry:3f`,
     options: {
       orderBy: ['release_time'],
-      pageSize: getPageSize(4),
+      pageSize: 4,
       channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
     },
   };
@@ -256,7 +248,7 @@ export default function GetHomePageRowData(
     link: `/@lbrycast:4`,
     options: {
       orderBy: ['release_time'],
-      pageSize: getPageSize(4),
+      pageSize: 4,
       channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
     },
   };