diff --git a/custom/homepage.example.js b/custom/homepage.example.js index 8d605e96b..d81c90866 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 ba3d8c381..aa414f009 100644 --- a/ui/component/page/view.jsx +++ b/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) { /> )}
{children}
diff --git a/ui/effects/use-media.js b/ui/effects/use-media.js new file mode 100644 index 000000000..3bc5f672e --- /dev/null +++ b/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; +} diff --git a/ui/effects/use-screensize.js b/ui/effects/use-screensize.js index f0b315f5c..badba5b03 100644 --- a/ui/effects/use-screensize.js +++ b/ui/effects/use-screensize.js @@ -1,36 +1,11 @@ -// 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; -} +import useMedia from './use-media'; export function useIsMobile() { - const windowSize = useWindowSize(); - return windowSize < 901; + const isMobile = useMedia(['(min-width: 901px)'], [false], true); + return isMobile; } export function useIsMediumScreen() { - const windowSize = useWindowSize(); - return windowSize < 1151; -} - -export function useIsLargeScreen() { - const windowSize = useWindowSize(); - return windowSize > 1600; + const isMobile = useMedia(['(min-width: 1151px)'], [false], true); + return isMobile; } diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx index e8408b330..964620ed7 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 982cca732..4a5b89197 100644 --- a/ui/scss/component/_claim-list.scss +++ b/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 { - 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); - + @media (min-width: $breakpoint-medium) { &: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); diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 0be67a600..e4e28dfdd 100644 --- a/ui/scss/component/_main.scss +++ b/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); diff --git a/ui/util/homepage.js b/ui/util/homepage.js index 0649c90b0..423414c77 100644 --- a/ui/util/homepage.js +++ b/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, showIndividualTags: boolean ) { - const isLargeScreen = useIsLargeScreen(); - - function getPageSize(originalSize) { - return isLargeScreen ? originalSize * (3 / 2) : originalSize; - } - let rowData: Array = []; const individualTagDataItems: Array = []; 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'], }, };