From 0ea7bafe03d59a5d9cc815478ecdf7a985842e13 Mon Sep 17 00:00:00 2001 From: ikprk Date: Tue, 2 Jul 2024 15:34:20 +0200 Subject: [PATCH 1/8] Adjust toggle button group --- .../_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx index fde5632ddc..5cf3e4fa04 100644 --- a/packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/atlas/src/components/_inputs/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -42,10 +42,13 @@ export type ToggleButtonFilterTypeProps = { filters: FilterButtonProps[] } & SharedToggleButtonProps -export type ToggleButtonGroupProps = ToggleButtonFilterTypeProps | ToggleButtonOptionTypeProps +export type ToggleButtonGroupProps = + | { + size?: 'small' | 'medium' | 'large' + } & (ToggleButtonFilterTypeProps | ToggleButtonOptionTypeProps) export function ToggleButtonGroup(props: ToggleButtonGroupProps) { - const { type, label, width = 'auto', className } = props + const { type, label, width = 'auto', className, size = 'small' } = props const optionWrapperRef = useRef(null) const { handleArrowScroll, handleMouseDown, isOverflow, visibleShadows } = useHorizonthalFade(optionWrapperRef) @@ -74,7 +77,7 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps) fullWidth variant={option.value !== props.value ? 'tertiary' : 'secondary'} onClick={() => props.onChange(option.value)} - size="small" + size={size} disabled={option.disabled} > {option.label} From 3eaca14bb0bed58dcaae64ca22247e3c207e7cac Mon Sep 17 00:00:00 2001 From: ikprk Date: Tue, 2 Jul 2024 15:34:32 +0200 Subject: [PATCH 2/8] Rework homeview --- packages/atlas/src/views/viewer/HomeView.tsx | 80 +++++++++++++++++++- 1 file changed, 77 insertions(+), 3 deletions(-) diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx index 7e542dc926..c139caae48 100644 --- a/packages/atlas/src/views/viewer/HomeView.tsx +++ b/packages/atlas/src/views/viewer/HomeView.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled' -import { FC } from 'react' +import { FC, useCallback } from 'react' +import { useSearchParams } from 'react-router-dom' import { VideoOrderByInput } from '@/api/queries/__generated__/baseTypes.generated' import { @@ -7,9 +8,11 @@ import { useGetCuratedHompageVideosQuery, } from '@/api/queries/__generated__/videos.generated' import { Section } from '@/components/Section/Section' +import { ToggleButtonGroup } from '@/components/_inputs/ToggleButtonGroup' import { ReferralsBanner } from '@/components/_referrals/ReferralsBanner/ReferralsBanner' import { VideoContentTemplate } from '@/components/_templates/VideoContentTemplate' import { VideoTileViewer } from '@/components/_video/VideoTileViewer' +import { atlasConfig } from '@/config' import { getPublicCryptoVideoFilter } from '@/config/contentFilter' import { useHeadTags } from '@/hooks/useHeadTags' import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid' @@ -18,14 +21,75 @@ import { DEFAULT_VIDEO_GRID, sizes } from '@/styles' import { createPlaceholderData } from '@/utils/data' import { InfiniteLoadingOffsets } from '@/utils/loading.contants' +const options = [ + { + label: 'All', + value: 'all', + queryValue: undefined, + }, + { + label: 'Crypto', + value: '5', + queryValue: atlasConfig.content.categories.find((category) => category.name === 'Crypto')?.videoCategories ?? [], + }, + { + label: 'Gaming', + value: '20', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Video Games')?.videoCategories ?? [], + }, + { + label: 'Music', + value: '11', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Music and Music Videos')?.videoCategories ?? + [], + }, + { + label: 'Entertainment', + value: '8', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Entertainment')?.videoCategories ?? [], + }, + { + label: 'Other', + value: 'other', + queryValue: + atlasConfig.content.categories + .filter( + (category) => !['Crypto', 'Entertainment', 'Music and Music Videos', 'Video Games'].includes(category.name) + ) + .map((cat) => cat.videoCategories) + .flat() ?? [], + }, +] + export const HomeView: FC = () => { const headTags = useHeadTags() - const { columns, fetchMore, tiles, loading, pageInfo } = useHomeVideos() + const [searchParams, setSearchParams] = useSearchParams() + const category = searchParams.get('category') ?? 'all' + const { columns, fetchMore, tiles, loading, pageInfo } = useHomeVideos( + options.find((opt) => opt.value === category)?.queryValue + ) + + const setCategory = useCallback( + (value: string) => { + setSearchParams({ category: value }) + }, + [setSearchParams] + ) return ( {headTags} + setCategory(newCategory as string)} + options={options} + /> { +const StyledToggleButtonGroup = styled(ToggleButtonGroup)` + margin-top: ${sizes(8)}; +` + +const useHomeVideos = (categories?: string[]) => { const initialRowsToLoad = useVideoGridRows('main') const { data, loading } = useGetCuratedHompageVideosQuery({ notifyOnNetworkStatusChange: true, @@ -62,6 +130,9 @@ const useHomeVideos = () => { where: getPublicCryptoVideoFilter({ orionLanguage_in: undefined, includeInHomeFeed_eq: true, + category: { + id_in: categories, + }, }), skipVideoIds: ['-1'], }, @@ -72,6 +143,9 @@ const useHomeVideos = () => { variables: { where: getPublicCryptoVideoFilter({ id_not_in: avoidIds, + category: { + id_in: categories, + }, }), orderBy: VideoOrderByInput.VideoRelevanceDesc, }, From 885464fccc9b6f339ab2665f5925f85f708d949a Mon Sep 17 00:00:00 2001 From: ikprk Date: Tue, 2 Jul 2024 15:34:45 +0200 Subject: [PATCH 3/8] Adjust config for testing --- packages/atlas/atlas.config.yml | 150 ++++++++++++++++---------------- 1 file changed, 73 insertions(+), 77 deletions(-) diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index ad4db4cb70..c9ae6ecb97 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -1,16 +1,16 @@ general: appName: Gleev # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here appDescription: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' # Application description - used in index.html meta tags - appTagline: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' appId: '$VITE_APP_ID' # App ID for Apps as first-class citizens - appTwitterId: '@JoystreamDAO' # Twitter handle for the app - used in open graph meta tags in HTML - appUrl: 'https://play.joystream.org' # URL at which the app is hosted - used in open graph meta tags in HTML - appGithubUrl: 'https://github.com/Joystream/atlas' # URL for Atlas GitHub repository - used in the footer - appOgImgPath: '/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML + appTwitterId: '@Gleevapp' # Twitter handle for the app - used in open graph meta tags in HTML + appTagline: 'Gleev brings together the like-minded creators and viewers around the shared passion of the present and the future of Crypto affairs.' + appUrl: 'https://gleev.xyz' # URL at which the app is hosted - used in open graph meta tags in HTML + appGithubUrl: 'https://github.com/Joystream/gleev' # URL for Atlas GitHub repository - used in the footer + appOgImgPath: 'https://gleev.xyz/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links joystreamDiscordUrl: 'https://discord.gg/joystream' # URL for Joystream Discord - used for support when errors occur - appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` + appContentFocus: '' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` crtMaintenanceMode: false storage: assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried @@ -39,9 +39,9 @@ joystream: features: ypp: yppDelayThreshold: 300 # When the YPP sync backlog exceeds the threshold, Atlas will consider the YPP sync delayed. - landingPageOgTitle: null # Open graph title for YPP landing page - used in open graph meta tags in HTML - landingPageOgDescription: null # Open graph description for YPP landing page - used in open graph meta tags in HTML - landingPageOgImgPath: null # Path to the open graph image for the YPP landing page - if not set, the default image will be used + landingPageOgTitle: 'Gleev Creator Rewards Program' # Open graph title for YPP landing page - used in open graph meta tags in HTML + landingPageOgDescription: 'Connect and monetize your content with Web3 native features on Gleev, the video streaming dApp built on Joystream blockchain.' # Open graph description for YPP landing page - used in open graph meta tags in HTML + landingPageOgImgPath: 'https://gleev.xyz/og-image-ypp.webp' # Path to the open graph image for the YPP landing page - if not set, the default image will be used googleConsoleClientId: '$VITE_GOOGLE_CONSOLE_CLIENT_ID' youtubeSyncApiUrl: '$VITE_YOUTUBE_SYNC_API_URL' suspensionReasonsLink: https://joystream.notion.site/My-channel-is-suspended-what-to-do-86a3df16c55c434ab2184d61dfcfc41b # Link with explanation what might be the reason of ypp channel suspension @@ -51,16 +51,16 @@ features: enrollmentReward: 5000 # Amount for successful enrollment in YPP in joystream.tokenTicker units. enrollmentUsdReward: 5 # Amount for successful enrollment in YPP in USD. referralBaseReward: 2.5 # Self-explanatory, it should match `baseUsdAmount.min` value in last `rewards` entry - tierBoostMultiplier: 2 # Multiplier to boost specific tiers for certain conditions + tierBoostMultiplier: 1 # Multiplier to boost specific tiers for certain conditions tiersDefinition: # Tiers for YouTube partner program rewards. You can provide maximum three tiers. Each tier should has own multiplier. - tier: 'bronze' reqs: - Lower effort production. - Growing subscriber base of channel supporters. rewards: - - 0 # Reward for signup in USD + - 1 # Reward for signup in USD - 0 # Reward for synced video - - 0 # Reward for referral + - 1 # Reward for referral - tier: 'silver' reqs: - Original good quality of content. @@ -68,15 +68,15 @@ features: rewards: - 25 - 1 - - 10 + - 25 - tier: 'gold' reqs: - Great quality of content. - Large subscriber base of fans active in the comments section. rewards: - 50 - - 3 - - 25 + - 2 + - 50 - tier: 'diamond' reqs: - Top tier professional quality. @@ -84,7 +84,7 @@ features: rewards: - 100 - 5 - - 50 + - 100 rewards: - title: Sign Up to YouTube Partner Program showInDashboard: false # Optional. If false the reward will be shown only on YouTube partner program landing page. Default true @@ -106,7 +106,7 @@ features: stepsDescription: Earn when another YouTube creator signs up to the program by using your your referral link. steps: - Copy your link with get referral link button. - - Send it to as many Web3 YouTube creators as you want. + - Send it to as many YouTube creators as you want. - Get rewarded for every new successful sign up, that uses your referral link. Referral reward depends on their popularity tier. - If signed up without the link they can simply add your channel name to the referral field in the registration flow. baseAmount: null @@ -304,29 +304,29 @@ content: color: '#D92E61' # Color used in the UI for this category iconUrl: '' # URL for category icon SVG coverImgUrl: '' # URL for category cover image - videoCategories: ['3142434-2'] # List of metaprotocol category IDs that should be included in this display category - defaultVideoCategory: '3142434-2' + videoCategories: ['4209396-2'] # List of metaprotocol category IDs that should be included in this display category + defaultVideoCategory: '4209396-2' - id: '2' name: 'Animation and Film' color: '#E7BE2D' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142437-2'] - defaultVideoCategory: '3142437-2' + videoCategories: ['4209546-2'] + defaultVideoCategory: '4209546-2' - id: '3' name: 'Autos and Vehicles' color: '#BD4BE4' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142440-2'] - defaultVideoCategory: '3142440-2' + videoCategories: ['4209572-2'] + defaultVideoCategory: '4209572-2' - id: '4' name: 'Business and Finance' color: '#BDE933' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142443-2'] - defaultVideoCategory: '3142443-2' + videoCategories: ['4209583-2'] + defaultVideoCategory: '4209583-2' - id: '5' name: 'Crypto' color: '#54A7F0' @@ -334,133 +334,129 @@ content: coverImgUrl: '' videoCategories: [ - '3142446-2', - '57-2', - '59-2', - '61-2', - '63-2', - '848-2', - '852-2', - '856-2', - '860-2', - '864-2', - '868-2', - '873-2', - '878-2', - '883-2', - '888-2', - '893-2', - '898-2', - '905-2', - '910-2', - '915-2', + '4209591-2', + '254423-2', + '254433-2', + '254434-2', + '254435-2', + '254436-2', + '254437-2', + '254438-2', + '254441-2', + '254445-2', + '254446-2', + '254449-2', + '887567-2', + '254450-2', ] - defaultVideoCategory: '3142446-2' + defaultVideoCategory: '4209591-2' - id: '6' name: 'DIY' color: '#DD379D' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142448-2'] - defaultVideoCategory: '3142448-2' + videoCategories: ['4209595-2'] + defaultVideoCategory: '4209595-2' - id: '7' name: 'Education' color: '#5A7AEE' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142451-2'] - defaultVideoCategory: '3142451-2' + videoCategories: ['4209603-2'] + defaultVideoCategory: '4209603-2' - id: '8' name: 'Entertainment' color: '#41EE5A' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142456-2'] - defaultVideoCategory: '3142456-2' + videoCategories: ['4209609-2'] + defaultVideoCategory: '4209609-2' - id: '9' name: 'Lifestyle' color: '#9455E8' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142459-4'] - defaultVideoCategory: '"3142459-4' + videoCategories: ['4209637-2'] + defaultVideoCategory: '4209637-2' - id: '10' name: 'Memes and Humour' color: '#4FE1F2' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142468-2'] - defaultVideoCategory: '3142468-2' + videoCategories: ['4209643-2'] + defaultVideoCategory: '4209643-2' - id: '11' name: 'Music and Music Videos' color: '#6E5FEC' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142471-2'] - defaultVideoCategory: '3142471-2' + videoCategories: ['4209650-2'] + defaultVideoCategory: '4209650-2' - id: '12' name: 'Nature' color: '#E57827' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142475-2'] - defaultVideoCategory: '3142475-2' + videoCategories: ['4209658-2'] + defaultVideoCategory: '4209658-2' - id: '13' name: 'News and Current Affairs' color: '#6EEC3A' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142484-2'] - defaultVideoCategory: '3142484-2' + videoCategories: ['4209664-2'] + defaultVideoCategory: '4209664-2' - id: '14' name: 'People and Blogs' color: '#E141D6' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142490-2'] - defaultVideoCategory: '3142490-2' + videoCategories: ['4209674-2'] + defaultVideoCategory: '4209674-2' - id: '15' name: 'Pets and Animals' color: '#48F0B3' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142493-2'] - defaultVideoCategory: '3142493-2' + videoCategories: ['4209679-2'] + defaultVideoCategory: '4209679-2' - id: '16' name: 'Sports' color: '#B0E839' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142501-3'] - defaultVideoCategory: '3142501-3' + videoCategories: ['4209685-2'] + defaultVideoCategory: '4209685-2' - id: '17' name: 'Technology' color: '#3EE7B4' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142503-2'] - defaultVideoCategory: '3142503-2' + videoCategories: ['4209691-2'] + defaultVideoCategory: '4209691-2' - id: '18' name: 'Travel' color: '#68FA63' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142506-2'] - defaultVideoCategory: '3142506-2' + videoCategories: ['4209700-2'] + defaultVideoCategory: '4209700-2' - id: '19' name: 'Unboxing' color: '#EE4BB7' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142509-2'] - defaultVideoCategory: '3142509-2' + videoCategories: ['4209707-2'] + defaultVideoCategory: '4209707-2' - id: '20' name: 'Video Games' color: '#FCAC4D' iconUrl: '' coverImgUrl: '' - videoCategories: ['3142511-2'] - defaultVideoCategory: '3142511-2' + videoCategories: ['4209721-2'] + defaultVideoCategory: '4209721-2' + + showAllContent: false # With this disabled, Atlas will display only content from display categories defined above. If you want your app to display all Joystream content, set this to true. languages: # List of languages to be used in the app. Those will be used when setting video's language, for adding subtitles, etc. - isoCode: ar @@ -724,7 +720,7 @@ legal: Licenses supported may be updated at any time and full set of licenses that are available for selection in the App upon video upload or uploaded via Command Line interface are contained in [this file](https://github.com/Joystream/atlas/blob/master/packages/atlas/src/data/knownLicenses.json) privacyPolicy: | # 1. Privacy Policy - Last updated on the 9th of June 2023 + Last updated on the 4th of December 2023 ## 1.1 Agreement to the Policy From 686af6e67455accf2daed7ffcbf6a843f3699fe7 Mon Sep 17 00:00:00 2001 From: ikprk Date: Mon, 8 Jul 2024 11:28:15 +0200 Subject: [PATCH 4/8] Bring back language filtering --- packages/atlas/src/config/contentFilter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/atlas/src/config/contentFilter.ts b/packages/atlas/src/config/contentFilter.ts index c79f6b2d9c..498f121b3c 100644 --- a/packages/atlas/src/config/contentFilter.ts +++ b/packages/atlas/src/config/contentFilter.ts @@ -16,12 +16,12 @@ export const cancelledVideoFilter: VideoWhereInput = { }, } -// const browserLanguage = navigator.language?.split('-')[0] +const browserLanguage = navigator.language?.split('-')[0] export const singlePublicCryptoVideoFilter: VideoWhereInput = { isPublic_eq: true, isCensored_eq: false, - // orionLanguage_in: [...(browserLanguage ? [browserLanguage] : []), 'en'], + orionLanguage_in: [...(browserLanguage ? [browserLanguage] : []), 'en'], media: { isAccepted_eq: true, }, From d6fd6b2e6c5477ab674e0ef6e59d7dca5535b39a Mon Sep 17 00:00:00 2001 From: ikprk Date: Mon, 15 Jul 2024 17:50:17 +0200 Subject: [PATCH 5/8] Add new categories --- packages/atlas/src/views/viewer/HomeView.tsx | 80 +++++++++++++++++--- 1 file changed, 69 insertions(+), 11 deletions(-) diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx index c139caae48..98684334cb 100644 --- a/packages/atlas/src/views/viewer/HomeView.tsx +++ b/packages/atlas/src/views/viewer/HomeView.tsx @@ -21,43 +21,101 @@ import { DEFAULT_VIDEO_GRID, sizes } from '@/styles' import { createPlaceholderData } from '@/utils/data' import { InfiniteLoadingOffsets } from '@/utils/loading.contants' -const options = [ - { - label: 'All', - value: 'all', - queryValue: undefined, - }, +const _options = [ { label: 'Crypto', + configLabel: 'Crypto', value: '5', queryValue: atlasConfig.content.categories.find((category) => category.name === 'Crypto')?.videoCategories ?? [], }, + { + label: 'Entertainment', + configLabel: 'Entertainment', + value: '8', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Entertainment')?.videoCategories ?? [], + }, { label: 'Gaming', + configLabel: 'Video Games', value: '20', queryValue: atlasConfig.content.categories.find((category) => category.name === 'Video Games')?.videoCategories ?? [], }, + { + label: 'Education', + configLabel: 'Education', + value: '7', + queryValue: atlasConfig.content.categories.find((category) => category.name === 'Education')?.videoCategories ?? [], + }, { label: 'Music', + configLabel: 'Music and Music Videos', value: '11', queryValue: atlasConfig.content.categories.find((category) => category.name === 'Music and Music Videos')?.videoCategories ?? [], }, { - label: 'Entertainment', - value: '8', + label: 'Blogs', + configLabel: 'People and Blogs', + value: '14', queryValue: - atlasConfig.content.categories.find((category) => category.name === 'Entertainment')?.videoCategories ?? [], + atlasConfig.content.categories.find((category) => category.name === 'People and Blogs')?.videoCategories ?? [], + }, + { + label: 'Business', + configLabel: 'Business and Finance', + value: '4', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Business and Finance')?.videoCategories ?? + [], + }, + { + label: 'Animation', + configLabel: 'Animation and Film', + value: '2', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Animation and Film')?.videoCategories ?? [], + }, + { + label: 'Lifestyle', + configLabel: 'Lifestyle', + value: '9', + queryValue: atlasConfig.content.categories.find((category) => category.name === 'Lifestyle')?.videoCategories ?? [], + }, + { + label: 'Technology', + configLabel: 'Technology', + value: '17', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Technology')?.videoCategories ?? [], }, + { + label: 'Art', + configLabel: 'Art', + value: '1', + queryValue: atlasConfig.content.categories.find((category) => category.name === 'Art')?.videoCategories ?? [], + }, + { + label: 'Memes', + configLabel: 'Memes and Humour', + value: '10', + queryValue: + atlasConfig.content.categories.find((category) => category.name === 'Memes and Humour')?.videoCategories ?? [], + }, +] + +const options = [ + ..._options, { label: 'Other', value: 'other', queryValue: atlasConfig.content.categories .filter( - (category) => !['Crypto', 'Entertainment', 'Music and Music Videos', 'Video Games'].includes(category.name) + (category) => + !_options.reduce((prev, next) => [...prev, next.configLabel], [] as string[]).includes(category.name) ) .map((cat) => cat.videoCategories) .flat() ?? [], @@ -67,7 +125,7 @@ const options = [ export const HomeView: FC = () => { const headTags = useHeadTags() const [searchParams, setSearchParams] = useSearchParams() - const category = searchParams.get('category') ?? 'all' + const category = searchParams.get('category') ?? '5' const { columns, fetchMore, tiles, loading, pageInfo } = useHomeVideos( options.find((opt) => opt.value === category)?.queryValue ) From 0349e74ab217e557eafe2d3c336603fdb440816a Mon Sep 17 00:00:00 2001 From: ikprk Date: Tue, 16 Jul 2024 12:57:59 +0200 Subject: [PATCH 6/8] Shuffle the categories and add analytics --- packages/atlas/src/hooks/useSegmentAnalytics.ts | 11 +++++++++++ packages/atlas/src/views/viewer/HomeView.tsx | 14 +++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/atlas/src/hooks/useSegmentAnalytics.ts b/packages/atlas/src/hooks/useSegmentAnalytics.ts index 761e0433da..29efa30ae7 100644 --- a/packages/atlas/src/hooks/useSegmentAnalytics.ts +++ b/packages/atlas/src/hooks/useSegmentAnalytics.ts @@ -111,6 +111,16 @@ export const useSegmentAnalytics = () => { [analytics] ) + const trackHomepageCategorySelection = useCallback( + (categoryName: string) => { + analytics.track('Homepage Category Clicked', { + categoryName, + ...getUTMParams(), + }) + }, + [analytics, getUTMParams] + ) + const trackMembershipCreation = useCallback( (handle: string, email: string) => { analytics.track('Membership created', { @@ -703,5 +713,6 @@ export const useSegmentAnalytics = () => { trackRewardsReferralLinkClicked, trackRoundtableEventsClicked, trackRewardsCreateChannelButtonClick, + trackHomepageCategorySelection, } } diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx index 98684334cb..d46bfbf460 100644 --- a/packages/atlas/src/views/viewer/HomeView.tsx +++ b/packages/atlas/src/views/viewer/HomeView.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled' +import { shuffle } from 'lodash-es' import { FC, useCallback } from 'react' import { useSearchParams } from 'react-router-dom' @@ -16,6 +17,7 @@ import { atlasConfig } from '@/config' import { getPublicCryptoVideoFilter } from '@/config/contentFilter' import { useHeadTags } from '@/hooks/useHeadTags' import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid' +import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' import { useVideoGridRows } from '@/hooks/useVideoGridRows' import { DEFAULT_VIDEO_GRID, sizes } from '@/styles' import { createPlaceholderData } from '@/utils/data' @@ -107,7 +109,7 @@ const _options = [ ] const options = [ - ..._options, + ...shuffle(_options), { label: 'Other', value: 'other', @@ -125,16 +127,22 @@ const options = [ export const HomeView: FC = () => { const headTags = useHeadTags() const [searchParams, setSearchParams] = useSearchParams() - const category = searchParams.get('category') ?? '5' + const category = searchParams.get('category') ?? options[0].value const { columns, fetchMore, tiles, loading, pageInfo } = useHomeVideos( options.find((opt) => opt.value === category)?.queryValue ) + const { trackHomepageCategorySelection } = useSegmentAnalytics() const setCategory = useCallback( (value: string) => { + const categoryLabel = options.find((category) => category.value === value)?.label + if (categoryLabel) { + trackHomepageCategorySelection(categoryLabel) + } + setSearchParams({ category: value }) }, - [setSearchParams] + [setSearchParams, trackHomepageCategorySelection] ) return ( From d7d6e9a14c141433a6fceaa6b83fa45e23da9c99 Mon Sep 17 00:00:00 2001 From: ikprk Date: Wed, 17 Jul 2024 12:56:40 +0200 Subject: [PATCH 7/8] Remove some categories after the testing --- packages/atlas/src/views/viewer/HomeView.tsx | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx index d46bfbf460..c197e1c644 100644 --- a/packages/atlas/src/views/viewer/HomeView.tsx +++ b/packages/atlas/src/views/viewer/HomeView.tsx @@ -44,12 +44,6 @@ const _options = [ queryValue: atlasConfig.content.categories.find((category) => category.name === 'Video Games')?.videoCategories ?? [], }, - { - label: 'Education', - configLabel: 'Education', - value: '7', - queryValue: atlasConfig.content.categories.find((category) => category.name === 'Education')?.videoCategories ?? [], - }, { label: 'Music', configLabel: 'Music and Music Videos', @@ -65,14 +59,6 @@ const _options = [ queryValue: atlasConfig.content.categories.find((category) => category.name === 'People and Blogs')?.videoCategories ?? [], }, - { - label: 'Business', - configLabel: 'Business and Finance', - value: '4', - queryValue: - atlasConfig.content.categories.find((category) => category.name === 'Business and Finance')?.videoCategories ?? - [], - }, { label: 'Animation', configLabel: 'Animation and Film', @@ -80,12 +66,6 @@ const _options = [ queryValue: atlasConfig.content.categories.find((category) => category.name === 'Animation and Film')?.videoCategories ?? [], }, - { - label: 'Lifestyle', - configLabel: 'Lifestyle', - value: '9', - queryValue: atlasConfig.content.categories.find((category) => category.name === 'Lifestyle')?.videoCategories ?? [], - }, { label: 'Technology', configLabel: 'Technology', From 84dcb0223192ea4a1c44f79e76ed93a9bd296fcc Mon Sep 17 00:00:00 2001 From: ikprk Date: Wed, 17 Jul 2024 13:50:17 +0200 Subject: [PATCH 8/8] Revert "Adjust config for testing" This reverts commit 885464fccc9b6f339ab2665f5925f85f708d949a. --- packages/atlas/atlas.config.yml | 150 ++++++++++++++++---------------- 1 file changed, 77 insertions(+), 73 deletions(-) diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index c9ae6ecb97..ad4db4cb70 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -1,16 +1,16 @@ general: appName: Gleev # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here appDescription: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' # Application description - used in index.html meta tags + appTagline: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' appId: '$VITE_APP_ID' # App ID for Apps as first-class citizens - appTwitterId: '@Gleevapp' # Twitter handle for the app - used in open graph meta tags in HTML - appTagline: 'Gleev brings together the like-minded creators and viewers around the shared passion of the present and the future of Crypto affairs.' - appUrl: 'https://gleev.xyz' # URL at which the app is hosted - used in open graph meta tags in HTML - appGithubUrl: 'https://github.com/Joystream/gleev' # URL for Atlas GitHub repository - used in the footer - appOgImgPath: 'https://gleev.xyz/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML + appTwitterId: '@JoystreamDAO' # Twitter handle for the app - used in open graph meta tags in HTML + appUrl: 'https://play.joystream.org' # URL at which the app is hosted - used in open graph meta tags in HTML + appGithubUrl: 'https://github.com/Joystream/atlas' # URL for Atlas GitHub repository - used in the footer + appOgImgPath: '/og-image.webp' # Path to the open graph image - used in open graph meta tags in HTML pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links joystreamDiscordUrl: 'https://discord.gg/joystream' # URL for Joystream Discord - used for support when errors occur - appContentFocus: '' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` + appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` crtMaintenanceMode: false storage: assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried @@ -39,9 +39,9 @@ joystream: features: ypp: yppDelayThreshold: 300 # When the YPP sync backlog exceeds the threshold, Atlas will consider the YPP sync delayed. - landingPageOgTitle: 'Gleev Creator Rewards Program' # Open graph title for YPP landing page - used in open graph meta tags in HTML - landingPageOgDescription: 'Connect and monetize your content with Web3 native features on Gleev, the video streaming dApp built on Joystream blockchain.' # Open graph description for YPP landing page - used in open graph meta tags in HTML - landingPageOgImgPath: 'https://gleev.xyz/og-image-ypp.webp' # Path to the open graph image for the YPP landing page - if not set, the default image will be used + landingPageOgTitle: null # Open graph title for YPP landing page - used in open graph meta tags in HTML + landingPageOgDescription: null # Open graph description for YPP landing page - used in open graph meta tags in HTML + landingPageOgImgPath: null # Path to the open graph image for the YPP landing page - if not set, the default image will be used googleConsoleClientId: '$VITE_GOOGLE_CONSOLE_CLIENT_ID' youtubeSyncApiUrl: '$VITE_YOUTUBE_SYNC_API_URL' suspensionReasonsLink: https://joystream.notion.site/My-channel-is-suspended-what-to-do-86a3df16c55c434ab2184d61dfcfc41b # Link with explanation what might be the reason of ypp channel suspension @@ -51,16 +51,16 @@ features: enrollmentReward: 5000 # Amount for successful enrollment in YPP in joystream.tokenTicker units. enrollmentUsdReward: 5 # Amount for successful enrollment in YPP in USD. referralBaseReward: 2.5 # Self-explanatory, it should match `baseUsdAmount.min` value in last `rewards` entry - tierBoostMultiplier: 1 # Multiplier to boost specific tiers for certain conditions + tierBoostMultiplier: 2 # Multiplier to boost specific tiers for certain conditions tiersDefinition: # Tiers for YouTube partner program rewards. You can provide maximum three tiers. Each tier should has own multiplier. - tier: 'bronze' reqs: - Lower effort production. - Growing subscriber base of channel supporters. rewards: - - 1 # Reward for signup in USD + - 0 # Reward for signup in USD - 0 # Reward for synced video - - 1 # Reward for referral + - 0 # Reward for referral - tier: 'silver' reqs: - Original good quality of content. @@ -68,15 +68,15 @@ features: rewards: - 25 - 1 - - 25 + - 10 - tier: 'gold' reqs: - Great quality of content. - Large subscriber base of fans active in the comments section. rewards: - 50 - - 2 - - 50 + - 3 + - 25 - tier: 'diamond' reqs: - Top tier professional quality. @@ -84,7 +84,7 @@ features: rewards: - 100 - 5 - - 100 + - 50 rewards: - title: Sign Up to YouTube Partner Program showInDashboard: false # Optional. If false the reward will be shown only on YouTube partner program landing page. Default true @@ -106,7 +106,7 @@ features: stepsDescription: Earn when another YouTube creator signs up to the program by using your your referral link. steps: - Copy your link with get referral link button. - - Send it to as many YouTube creators as you want. + - Send it to as many Web3 YouTube creators as you want. - Get rewarded for every new successful sign up, that uses your referral link. Referral reward depends on their popularity tier. - If signed up without the link they can simply add your channel name to the referral field in the registration flow. baseAmount: null @@ -304,29 +304,29 @@ content: color: '#D92E61' # Color used in the UI for this category iconUrl: '' # URL for category icon SVG coverImgUrl: '' # URL for category cover image - videoCategories: ['4209396-2'] # List of metaprotocol category IDs that should be included in this display category - defaultVideoCategory: '4209396-2' + videoCategories: ['3142434-2'] # List of metaprotocol category IDs that should be included in this display category + defaultVideoCategory: '3142434-2' - id: '2' name: 'Animation and Film' color: '#E7BE2D' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209546-2'] - defaultVideoCategory: '4209546-2' + videoCategories: ['3142437-2'] + defaultVideoCategory: '3142437-2' - id: '3' name: 'Autos and Vehicles' color: '#BD4BE4' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209572-2'] - defaultVideoCategory: '4209572-2' + videoCategories: ['3142440-2'] + defaultVideoCategory: '3142440-2' - id: '4' name: 'Business and Finance' color: '#BDE933' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209583-2'] - defaultVideoCategory: '4209583-2' + videoCategories: ['3142443-2'] + defaultVideoCategory: '3142443-2' - id: '5' name: 'Crypto' color: '#54A7F0' @@ -334,129 +334,133 @@ content: coverImgUrl: '' videoCategories: [ - '4209591-2', - '254423-2', - '254433-2', - '254434-2', - '254435-2', - '254436-2', - '254437-2', - '254438-2', - '254441-2', - '254445-2', - '254446-2', - '254449-2', - '887567-2', - '254450-2', + '3142446-2', + '57-2', + '59-2', + '61-2', + '63-2', + '848-2', + '852-2', + '856-2', + '860-2', + '864-2', + '868-2', + '873-2', + '878-2', + '883-2', + '888-2', + '893-2', + '898-2', + '905-2', + '910-2', + '915-2', ] - defaultVideoCategory: '4209591-2' + defaultVideoCategory: '3142446-2' - id: '6' name: 'DIY' color: '#DD379D' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209595-2'] - defaultVideoCategory: '4209595-2' + videoCategories: ['3142448-2'] + defaultVideoCategory: '3142448-2' - id: '7' name: 'Education' color: '#5A7AEE' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209603-2'] - defaultVideoCategory: '4209603-2' + videoCategories: ['3142451-2'] + defaultVideoCategory: '3142451-2' - id: '8' name: 'Entertainment' color: '#41EE5A' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209609-2'] - defaultVideoCategory: '4209609-2' + videoCategories: ['3142456-2'] + defaultVideoCategory: '3142456-2' - id: '9' name: 'Lifestyle' color: '#9455E8' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209637-2'] - defaultVideoCategory: '4209637-2' + videoCategories: ['3142459-4'] + defaultVideoCategory: '"3142459-4' - id: '10' name: 'Memes and Humour' color: '#4FE1F2' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209643-2'] - defaultVideoCategory: '4209643-2' + videoCategories: ['3142468-2'] + defaultVideoCategory: '3142468-2' - id: '11' name: 'Music and Music Videos' color: '#6E5FEC' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209650-2'] - defaultVideoCategory: '4209650-2' + videoCategories: ['3142471-2'] + defaultVideoCategory: '3142471-2' - id: '12' name: 'Nature' color: '#E57827' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209658-2'] - defaultVideoCategory: '4209658-2' + videoCategories: ['3142475-2'] + defaultVideoCategory: '3142475-2' - id: '13' name: 'News and Current Affairs' color: '#6EEC3A' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209664-2'] - defaultVideoCategory: '4209664-2' + videoCategories: ['3142484-2'] + defaultVideoCategory: '3142484-2' - id: '14' name: 'People and Blogs' color: '#E141D6' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209674-2'] - defaultVideoCategory: '4209674-2' + videoCategories: ['3142490-2'] + defaultVideoCategory: '3142490-2' - id: '15' name: 'Pets and Animals' color: '#48F0B3' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209679-2'] - defaultVideoCategory: '4209679-2' + videoCategories: ['3142493-2'] + defaultVideoCategory: '3142493-2' - id: '16' name: 'Sports' color: '#B0E839' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209685-2'] - defaultVideoCategory: '4209685-2' + videoCategories: ['3142501-3'] + defaultVideoCategory: '3142501-3' - id: '17' name: 'Technology' color: '#3EE7B4' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209691-2'] - defaultVideoCategory: '4209691-2' + videoCategories: ['3142503-2'] + defaultVideoCategory: '3142503-2' - id: '18' name: 'Travel' color: '#68FA63' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209700-2'] - defaultVideoCategory: '4209700-2' + videoCategories: ['3142506-2'] + defaultVideoCategory: '3142506-2' - id: '19' name: 'Unboxing' color: '#EE4BB7' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209707-2'] - defaultVideoCategory: '4209707-2' + videoCategories: ['3142509-2'] + defaultVideoCategory: '3142509-2' - id: '20' name: 'Video Games' color: '#FCAC4D' iconUrl: '' coverImgUrl: '' - videoCategories: ['4209721-2'] - defaultVideoCategory: '4209721-2' - - showAllContent: false # With this disabled, Atlas will display only content from display categories defined above. If you want your app to display all Joystream content, set this to true. + videoCategories: ['3142511-2'] + defaultVideoCategory: '3142511-2' languages: # List of languages to be used in the app. Those will be used when setting video's language, for adding subtitles, etc. - isoCode: ar @@ -720,7 +724,7 @@ legal: Licenses supported may be updated at any time and full set of licenses that are available for selection in the App upon video upload or uploaded via Command Line interface are contained in [this file](https://github.com/Joystream/atlas/blob/master/packages/atlas/src/data/knownLicenses.json) privacyPolicy: | # 1. Privacy Policy - Last updated on the 4th of December 2023 + Last updated on the 9th of June 2023 ## 1.1 Agreement to the Policy