Adjust tile grid for HiRes screens

This commit is contained in:
Raphael Wickihalder 2022-04-11 16:05:41 +02:00
parent b03d3305c1
commit 19a4b87225
No known key found for this signature in database
GPG key ID: 05179BB92383243D
4 changed files with 136 additions and 3 deletions

View file

@ -14,6 +14,7 @@ import { Form, FormField } from 'component/common/form';
import ScheduledStreams from 'component/scheduledStreams';
import { SearchResults } from './internal/searchResults';
import useFetchLiveStatus from 'effects/use-fetch-live';
import { useIsLargeScreen } from 'effects/use-screensize';
const TYPES_TO_ALLOW_FILTER = ['stream', 'repost'];
@ -78,6 +79,8 @@ function ChannelContent(props: Props) {
(Array.isArray(claimType)
? claimType.every((ct) => TYPES_TO_ALLOW_FILTER.includes(ct))
: TYPES_TO_ALLOW_FILTER.includes(claimType));
const isLargeScreen = useIsLargeScreen();
const dynamicPageSize = isLargeScreen ? Math.ceil(defaultPageSize * 3) : defaultPageSize;
function handleInputChange(e) {
const { value } = e.target;
@ -154,7 +157,7 @@ function ChannelContent(props: Props) {
claimType={claimType}
feeAmount={CS.FEE_AMOUNT_ANY}
defaultOrderBy={CS.ORDER_BY_NEW}
pageSize={defaultPageSize}
pageSize={dynamicPageSize}
infiniteScroll={defaultInfiniteScroll}
injectedItem={{ node: <Ads type="video" tileLayout={tileLayout} small /> }}
meta={

View file

@ -260,7 +260,8 @@ function ClaimListDiscover(props: Props) {
const feeAmountParam = urlParams.get('fee_amount') || feeAmount;
// const originalPageSize = pageSize || CS.PAGE_SIZE;
const originalPageSize = 12;
const dynamicPageSize = isLargeScreen ? Math.ceil(originalPageSize * (3 / 2)) : originalPageSize;
// const dynamicPageSize = isLargeScreen ? Math.ceil(originalPageSize * (3 / 2)) : originalPageSize;
const dynamicPageSize = isLargeScreen ? Math.ceil((originalPageSize / 2) * 6) : originalPageSize;
const historyAction = history.action;
let orderParam = orderBy || urlParams.get(CS.ORDER_BY_KEY) || defaultOrderBy || orderParamEntry;

View file

@ -19,7 +19,8 @@ import { recsysFyp } from 'redux/actions/search';
const VIEW = { ALL_VISIBLE: 0, COLLAPSED: 1, EXPANDED: 2 };
function getSuitablePageSizeForScreen(defaultSize, isLargeScreen, isMediumScreen) {
return isMediumScreen ? 6 : isLargeScreen ? Math.ceil(defaultSize * (3 / 2)) : defaultSize;
// return isMediumScreen ? 6 : isLargeScreen ? Math.ceil(defaultSize * (3 / 2)) : defaultSize;
return isMediumScreen ? 6 : isLargeScreen ? Math.ceil(defaultSize * 2) : defaultSize;
}
type Props = {

128
web/.env.floss.defaults Normal file
View file

@ -0,0 +1,128 @@
####### .env.default #########
# Copy this file to .env to make modifications
# Base config
WEBPACK_WEB_PORT=9090
WEBPACK_ELECTRON_PORT=9091
WEB_SERVER_PORT=1337
## APIS
LBRY_WEB_API=https://api.na-backend.odysee.com
LBRY_WEB_STREAMING_API=https://player.odycdn.com
LBRY_WEB_BUFFER_API=https://collector-service.api.lbry.tv/api/v1/events/video
COMMENT_SERVER_API=https://comments.odysee.tv/api/v2
SEARCH_SERVER_API_ALT=https://recsys.odysee.tv/search
SEARCH_SERVER_API=https://lighthouse.odysee.tv/search
SOCKETY_SERVER_API=wss://sockety.odysee.tv/ws
RECSYS_ENDPOINT=https://recsys.odysee.tv/v1/lvv
RECSYS_FYP_ENDPOINT=https://recsys.odysee.tv/v1/u
# IMAGE_PROXY_URL=https://boost.vanwanet.com/index.php
THUMBNAIL_CDN_URL=https://thumbnails.odycdn.com/optimize/
THUMBNAIL_CARDS_CDN_URL=https://cards.odycdn.com/
LOCALE_API=https://api.odysee.com/legal/requirements
THUMBNAIL_HEIGHT=220
THUMBNAIL_HEIGHT_MOBILE=506
THUMBNAIL_WIDTH=390
THUMBNAIL_WIDTH_MOBILE=900
THUMBNAIL_QUALITY=85
THUMBNAIL_CDN_SIZE_LIMIT_BYTES=5242880
WELCOME_VERSION=1.0
# STRIPE
# STRIPE_PUBLIC_KEY='pk_test_NoL1JWL7i1ipfhVId5KfDZgo'
# Analytics
# OG
OG_TITLE_SUFFIX=| odysee.com
OG_HOMEPAGE_TITLE=Odysee
OG_IMAGE_URL=https://thumbnails.odycdn.com/optimize/s:1200:630/quality:85/plain/https://spee.ch/odysee-og:e.png
SITE_CANONICAL_URL=odysee.com
# UI
## Custom Site info
DOMAIN=odysee.com
URL=https://odysee.com
SITE_TITLE=Odysee
SITE_NAME=Odysee
SITE_DESCRIPTION=Explore a whole universe of videos on Odysee from regular people just like you!
SITE_HELP_EMAIL=help@odysee.com
LOGO_TITLE=odysee
## Social media
TWITTER_ACCOUNT=OdyseeTeam
BRANDED_SITE=odysee
# IMAGE ASSETS
YRBL_HAPPY_IMG_URL=https://thumbnails.odycdn.com/optimize/s:300:300/quality:85/plain/https://spee.ch/spaceman-happy:a.png
YRBL_SAD_IMG_URL=https://thumbnails.odycdn.com/optimize/s:300:300/quality:85/plain/https://spee.ch/spaceman-sad:d.png
LOGIN_IMG_URL=https://thumbnails.odycdn.com/optimize/s:400:507/quality:85/plain/https://player.odycdn.com/speech/odysee-sign-up:d.png
LOGO=https://thumbnails.odycdn.com/optimize/s:100:100/quality:85/plain/https://spee.ch/odysee-logo-png:3.png
LOGO_WHITE_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/plain/https://spee.ch/odysee-white-png:f.png
LOGO_DARK_TEXT=https://thumbnails.odycdn.com/optimize/s:1000:300/quality:85/plain/https://spee.ch/odysee-png:2.png
AVATAR_DEFAULT=https://thumbnails.odycdn.com/optimize/s:160:160/quality:85/plain/https://spee.ch/spaceman-png:2.png
MISSING_THUMB_DEFAULT=https://thumbnails.odycdn.com/optimize/s:390:220/quality:85/plain/https://spee.ch/missing-thumb-png
FAVICON=https://odysee.com/public/favicon-spaceman.png
# LOCALE
DEFAULT_LANGUAGE=en
## CUSTOM SETTINGS
# Additional settings for below are found in ui/constants/settings and are for
# preventing user settings from applying to custom sites without overwriting them.
# UNSYNCED_SETTINGS='theme dark_mode_times automatic_dark_mode_enabled'
## LINKED CONTENT WHITELIST
KNOWN_APP_DOMAINS=open.lbry.com,lbry.tv,lbry.lat,odysee.com
## CUSTOM CONTENT
# If the following is true, copy custom/homepage.example.js to custom/homepage.js and modify
CUSTOM_HOMEPAGE=false
# Add channels to auto-follow on first run
AUTO_FOLLOW_CHANNELS=lbry://@lbry#3fda836a92faaceedfe398225fb9b2ee2ed1f01a
## FEATURES AND LIMITS
SIMPLE_SITE=false
#BRANDED_SITE
ENABLE_COMMENT_REACTIONS=true
ENABLE_FILE_REACTIONS=true
ENABLE_CREATOR_REACTIONS=true
ENABLE_NO_SOURCE_CLAIMS=true
ENABLE_PREROLL_ADS=false
CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS=4
CHANNEL_CREATION_LIMIT=5
WEB_PUBLISH_SIZE_LIMIT_GB=4
LIGHTHOUSE_DEFAULT_TYPES=audio,video
SHOW_ADS=false
## SIMPLE_SITE REPLACEMENTS
ENABLE_MATURE=false
ENABLE_UI_NOTIFICATIONS=true
#ENABLE_LINK_TO_APP=true
#FORCE_ANALYTICS=true
#ENABLE_ADVANCED_FILTER=true
#ENABLE_PAID_CONTENT=true
#USE_FOOTER=true
#USE_DISCOVER_WHITELIST=false
ENABLE_WILD_WEST=true
#FULL_SIDE_LINKS=true
#SHOW_TAGS_INTRO=false
# SEARCH TYPES
#VIDEO_ENABLED=true
#AUDIO_ENABLED=true
#POSTS_ENABLED=true
#IMAGES_ENABLED=true
#FILES_ENABLED=true
#MODELS_ENABLED=true
BRANDED_SITE=odysee
LOADING_BAR_COLOR=#e50054
# --- Development ---
REPORT_NEW_STRINGS=false
USE_LOCAL_HOMEPAGE_DATA=false