full width homepage

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,6 +21,7 @@ type Props = {
   isUpgradeAvailable: boolean,
   authPage: boolean,
   filePage: boolean,
+  homePage: boolean,
   noHeader: boolean,
   noFooter: boolean,
   noSideNavigation: boolean,
@@ -39,10 +40,10 @@ function Page(props: Props) {
     className,
     authPage = false,
     filePage = false,
+    homePage = false,
     noHeader = false,
     noFooter = false,
     noSideNavigation = false,
-
     backout,
   } = props;
   const {
@@ -51,6 +52,7 @@ 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, '#');
@@ -89,7 +91,11 @@ function Page(props: Props) {
           />
         )}
         <main
-          className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage, 'main--file-page': filePage })}
+          className={classnames(MAIN_CLASS, className, {
+            'main--full-width': authPage,
+            'main--file-page': filePage,
+            'main--homepage': homePage,
+          })}
         >
           {children}
         </main>

ui/effects/use-media.js

@@ -1,34 +0,0 @@
-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,11 +1,36 @@
-import useMedia from './use-media';
+// Widths are taken from "ui/scss/init/vars.scss"
+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 isMobile = useMedia(['(min-width: 901px)'], [false], true);
+  const windowSize = useWindowSize();
-  return isMobile;
+  return windowSize < 901;
 }
 
 export function useIsMediumScreen() {
-  const isMobile = useMedia(['(min-width: 1151px)'], [false], true);
+  const windowSize = useWindowSize();
-  return isMobile;
+  return windowSize < 1151;
+}
+
+export function useIsLargeScreen() {
+  const windowSize = useWindowSize();
+  return windowSize > 1600;
 }

ui/page/home/view.jsx

@@ -37,7 +37,7 @@ function HomePage(props: Props) {
   );
 
   return (
-    <Page>
+    <Page homePage>
       {(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,34 +323,45 @@
 }
 
 .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 (min-width: $breakpoint-medium) {
+  .media__thumb {
-    &:first-child,
+    border-bottom-right-radius: 0;
-    &:nth-child(4n + 1) {
+    border-bottom-left-radius: 0;
-      margin-left: 0;
-    }
   }
 
   &:hover {
     cursor: pointer;
   }
 
-  .media__thumb {
+  @media (min-width: $breakpoint-large) {
-    border-bottom-right-radius: 0;
+    $width: calc((100% - var(--spacing-m) * 5) / 6);
-    border-bottom-left-radius: 0;
+    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;
+    }
   }
 
   @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

@@ -90,6 +90,16 @@
   }
 }
 
+.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,6 +4,7 @@ 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,
@@ -12,7 +13,7 @@ type RowDataItem = {
   options?: {},
 };
 
-export default function getHomePageRowData(
+export default function GetHomePageRowData(
   authenticated: boolean,
   showPersonalizedChannels: boolean,
   showPersonalizedTags: boolean,
@@ -20,6 +21,12 @@ 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 = [
@@ -114,7 +121,7 @@ export default function getHomePageRowData(
     options: {
       claimType: ['stream'],
       orderBy: ['release_time'],
-      pageSize: 12,
+      pageSize: getPageSize(12),
       channelIds: YOUTUBER_CHANNEL_IDS,
       releaseTime: `>${Math.floor(
         moment()
@@ -158,7 +165,7 @@ export default function getHomePageRowData(
                 .startOf('week')
                 .unix()
             )}`,
-      pageSize: subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4,
+      pageSize: getPageSize(subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4),
       channelIds: subscribedChannels.map((subscription: Subscription) => {
         const { channelClaimId } = parseURI(subscription.uri);
         return channelClaimId;
@@ -170,7 +177,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: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
+      pageSize: getPageSize(showPersonalizedChannels || showPersonalizedTags ? 4 : 8),
       orderBy: ['effective_amount'],
       claimType: ['stream'],
       releaseTime: `>${Math.floor(
@@ -188,7 +195,7 @@ export default function getHomePageRowData(
     options: {
       claimType: ['stream'],
       tags: ['2020protests'],
-      pageSize: 4,
+      pageSize: getPageSize(4),
     },
   };
 
@@ -205,7 +212,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: 4,
+      pageSize: getPageSize(4),
       claimType: ['stream'],
       releaseTime: `<${Math.floor(
         moment()
@@ -228,6 +235,7 @@ 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'],
     },
@@ -238,7 +246,7 @@ export default function getHomePageRowData(
     link: `/@lbry:3f`,
     options: {
       orderBy: ['release_time'],
-      pageSize: 4,
+      pageSize: getPageSize(4),
       channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
     },
   };
@@ -248,7 +256,7 @@ export default function getHomePageRowData(
     link: `/@lbrycast:4`,
     options: {
       orderBy: ['release_time'],
-      pageSize: 4,
+      pageSize: getPageSize(4),
       channelIds: ['4c29f8b013adea4d5cca1861fb2161d5089613ea'],
     },
   };