diff --git a/custom/homepage.example.js b/custom/homepage.example.js index d81c90866..8d605e96b 100644 --- a/custom/homepage.example.js +++ b/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, diff --git a/ui/component/page/view.jsx b/ui/component/page/view.jsx index aa414f009..ba3d8c381 100644 --- a/ui/component/page/view.jsx +++ b/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) { /> )}
{children}
diff --git a/ui/effects/use-media.js b/ui/effects/use-media.js deleted file mode 100644 index 3bc5f672e..000000000 --- a/ui/effects/use-media.js +++ /dev/null @@ -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; -} diff --git a/ui/effects/use-screensize.js b/ui/effects/use-screensize.js index badba5b03..f0b315f5c 100644 --- a/ui/effects/use-screensize.js +++ b/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); - return isMobile; + const windowSize = useWindowSize(); + return windowSize < 901; } export function useIsMediumScreen() { - const isMobile = useMedia(['(min-width: 1151px)'], [false], true); - return isMobile; + const windowSize = useWindowSize(); + return windowSize < 1151; +} + +export function useIsLargeScreen() { + const windowSize = useWindowSize(); + return windowSize > 1600; } diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx index 964620ed7..e8408b330 100644 --- a/ui/page/home/view.jsx +++ b/ui/page/home/view.jsx @@ -37,7 +37,7 @@ function HomePage(props: Props) { ); return ( - + {(authenticated || !IS_WEB) && !subscribedChannels.length && (

{__('LBRY Works Better If You Are Following Channels')}

diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 4a5b89197..982cca732 100644 --- a/ui/scss/component/_claim-list.scss +++ b/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) { - &:first-child, - &:nth-child(4n + 1) { - margin-left: 0; - } + .media__thumb { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } &:hover { cursor: pointer; } - .media__thumb { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + @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; + } } @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); diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 66e094b79..9fdb87ce5 100644 --- a/ui/scss/component/_main.scss +++ b/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); diff --git a/ui/util/homepage.js b/ui/util/homepage.js index 423414c77..0649c90b0 100644 --- a/ui/util/homepage.js +++ b/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, showIndividualTags: boolean ) { + const isLargeScreen = useIsLargeScreen(); + + function getPageSize(originalSize) { + return isLargeScreen ? originalSize * (3 / 2) : originalSize; + } + let rowData: Array = []; const individualTagDataItems: Array = []; 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'], }, };