diff --git a/.stylelintrc.js b/.stylelintrc.js index 01c9727f2c..bb3850bd90 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -3,6 +3,7 @@ module.exports = { defaultSeverity: 'warning', customSyntax: '@stylelint/postcss-css-in-js', rules: { + 'function-url-quotes': null, 'no-empty-source': null, 'function-name-case': null, 'custom-property-empty-line-before': null, diff --git a/CHANGELOG.md b/CHANGELOG.md index 14b5f77322..84c7ca4d57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,23 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [4.10.0] - 2023-10-06 + +### Added + +- Introduced new categories +- YPP was updated to v2.0: updated landing page, new tiers system; rewards, referrals and dashboard changes + +### Changed + +- Changed channel tokens withdrawal from membership account to any Joystream account + +### Fixed + +- Fixed bug with slow loading of a homepage +- Fixed bug with bid withdrawal from an auction +- Minor markup fixes + ## [4.9.2] - 2023-09-22 ### Changed diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index 0f0da3f5ec..49db81e5c6 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -51,20 +51,38 @@ features: 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 tiersDefinition: # Tiers for YouTube partner program rewards. You can provide maximum three tiers. Each tier should has own multiplier. - tiers: - - minimumSubscribers: 0 - multiplier: 1 - - minimumSubscribers: 1000 - multiplier: 2 - - minimumSubscribers: 5000 - multiplier: 4 - - minimumSubscribers: 25000 - multiplier: 6 - - minimumSubscribers: 50000 - multiplier: 8 - - minimumSubscribers: 100000 - multiplier: 10 - tiersTooltip: The more subscribers you have on YouTube, the higher the payouts in the program. + - tier: 'bronze' + reqs: + - Lower effort production. + - Growing subscriber base of channel supporters. + rewards: + - 0 # Reward for signup in USD + - 0 # Reward for synced video + - 0 # Reward for referral + - tier: 'silver' + reqs: + - Original good quality of content. + - Sizeable subscriber base with high ratio of views for videos. + rewards: + - 25 + - 1 + - 10 + - tier: 'gold' + reqs: + - Great quality of content. + - Large subscriber base of fans active in the comments section. + rewards: + - 50 + - 3 + - 25 + - tier: 'diamond' + reqs: + - Top tier professional quality. + - Recognized influencer and large follower audience. + rewards: + - 100 + - 5 + - 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 @@ -102,7 +120,7 @@ features: label: Notion # Used for YPP Dashboard to inform user which vendor given feature uses - if empty defaults to title icon: info # Optional icon to be displayed. Possible icons: message, info, tokenStack - title: Payments - link: /studio/payments + link: https://joystream.notion.site/YouTube-Creator-Payouts-02f7cf50972145bfb64c8543914ae4bb linkText: Go to Payments label: Studio icon: tokenStack @@ -271,110 +289,167 @@ content: categories: # List of display categories to be used in the app. Those are local to the application and are related to metaprotocol categories via 'videoCategories' array. - id: '1' # Local category ID - name: 'Science & Technology' # Display name of the category + name: 'Art' # Display name of the category color: '#D92E61' # Color used in the UI for this category - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/science-and-technology.svg' # URL for category icon SVG - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/science-and-technology.webp' # URL for category cover image - videoCategories: ['848-2'] # List of metaprotocol category IDs that should be included in this display category - defaultVideoCategory: '848-2' + 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' - id: '2' - name: 'Pets & Animals' + name: 'Animation and Film' color: '#E7BE2D' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/pets-and-animals.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/pets-and-animals.webp' - videoCategories: ['893-2'] - defaultVideoCategory: '893-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142437-2'] + defaultVideoCategory: '3142437-2' - id: '3' - name: 'Film & Animation' + name: 'Autos and Vehicles' color: '#BD4BE4' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/film-and-animation.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/film-and-animation.webp' - videoCategories: ['888-2'] - defaultVideoCategory: '888-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142440-2'] + defaultVideoCategory: '3142440-2' - id: '4' - name: 'People & Blogs' + name: 'Business and Finance' color: '#BDE933' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/people-and-blogs.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/people-and-blogs.webp' - videoCategories: ['883-2'] - defaultVideoCategory: '883-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142443-2'] + defaultVideoCategory: '3142443-2' - id: '5' - name: 'Entertainment' + name: 'Crypto' color: '#54A7F0' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/entertainment.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/entertainment.webp' - videoCategories: ['878-2'] - defaultVideoCategory: '878-2' + iconUrl: '' + 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', + ] + defaultVideoCategory: '3142446-2' - id: '6' - name: 'Education' + name: 'DIY' color: '#DD379D' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/education.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/education.webp' - videoCategories: ['873-2'] - defaultVideoCategory: '873-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142448-2'] + defaultVideoCategory: '3142448-2' - id: '7' - name: 'Travel & Events' + name: 'Education' color: '#5A7AEE' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/travel-and-events.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/travel-and-events.webp' - videoCategories: ['868-2'] - defaultVideoCategory: '868-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142451-2'] + defaultVideoCategory: '3142451-2' - id: '8' - name: 'Sports' + name: 'Entertainment' color: '#41EE5A' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/sports.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/sports.webp' - videoCategories: ['864-2'] - defaultVideoCategory: '864-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142456-2'] + defaultVideoCategory: '3142456-2' - id: '9' - name: 'Gaming' + name: 'Lifestyle' color: '#9455E8' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/gaming.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/gaming.webp' - videoCategories: ['860-2'] - defaultVideoCategory: '860-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142459-4'] + defaultVideoCategory: '"3142459-4' - id: '10' - name: 'Comedy' + name: 'Memes and Humour' color: '#4FE1F2' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/comedy.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/comedy.webp' - videoCategories: ['856-2'] - defaultVideoCategory: '856-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142468-2'] + defaultVideoCategory: '3142468-2' - id: '11' - name: 'Autos & Vehicles' + name: 'Music and Music Videos' color: '#6E5FEC' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/autos-and-vehicles.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/autos-and-vehicles.webp' - videoCategories: ['852-2'] - defaultVideoCategory: '852-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142471-2'] + defaultVideoCategory: '3142471-2' - id: '12' - name: 'Howto & Style' + name: 'Nature' color: '#E57827' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/howto-and-style.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/howto-and-style.webp' - videoCategories: ['898-2'] - defaultVideoCategory: '898-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142475-2'] + defaultVideoCategory: '3142475-2' - id: '13' - name: 'Music' + name: 'News and Current Affairs' color: '#6EEC3A' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/music.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/music.webp' - videoCategories: ['905-2'] - defaultVideoCategory: '905-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142484-2'] + defaultVideoCategory: '3142484-2' - id: '14' - name: 'Nonprofits & Activism' + name: 'People and Blogs' color: '#E141D6' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/nonprofits-and-activism.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/nonprofit-and-activism.webp' - videoCategories: ['910-2'] - defaultVideoCategory: '910-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142490-2'] + defaultVideoCategory: '3142490-2' - id: '15' - name: 'News & Politics' + name: 'Pets and Animals' color: '#48F0B3' - iconUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/icons/news-and-politics.svg' - coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/categories/atlas/images/news-and-politics.webp' - videoCategories: ['915-2'] - defaultVideoCategory: '915-2' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142493-2'] + defaultVideoCategory: '3142493-2' + - id: '16' + name: 'Sports' + color: '#B0E839' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142501-3'] + defaultVideoCategory: '3142501-3' + - id: '17' + name: 'Technology' + color: '#3EE7B4' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142503-2'] + defaultVideoCategory: '3142503-2' + - id: '18' + name: 'Travel' + color: '#68FA63' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142506-2'] + defaultVideoCategory: '3142506-2' + - id: '19' + name: 'Unboxing' + color: '#EE4BB7' + iconUrl: '' + coverImgUrl: '' + videoCategories: ['3142509-2'] + defaultVideoCategory: '3142509-2' + - id: '20' + name: 'Video Games' + color: '#FCAC4D' + iconUrl: '' + coverImgUrl: '' + 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 diff --git a/packages/atlas/package.json b/packages/atlas/package.json index 159063e43a..33b81d837d 100644 --- a/packages/atlas/package.json +++ b/packages/atlas/package.json @@ -1,7 +1,7 @@ { "name": "@joystream/atlas", "description": "UI for consuming Joystream - a user governed video platform", - "version": "4.9.2", + "version": "4.10.0", "license": "GPL-3.0", "scripts": { "start": "vite", diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env index a02dc10c94..70e8dd4f58 100644 --- a/packages/atlas/src/.env +++ b/packages/atlas/src/.env @@ -19,7 +19,7 @@ VITE_HCAPTCHA_SITE_KEY=41cae189-7676-4f6b-aa56-635be26d3ceb # YPP configuration VITE_GOOGLE_CONSOLE_CLIENT_ID=246331758613-rc1psegmsr9l4e33nqu8rre3gno5dsca.apps.googleusercontent.com -VITE_YOUTUBE_SYNC_API_URL=https://52.204.147.11.nip.io +VITE_YOUTUBE_SYNC_API_URL=https://50.19.175.219.nip.io VITE_YOUTUBE_COLLABORATOR_MEMBER_ID=18 # Analytics tools @@ -43,7 +43,7 @@ VITE_DEVELOPMENT_ORION_URL=https://atlas-dev.joystream.org/orion-api/graphql VITE_DEVELOPMENT_QUERY_NODE_SUBSCRIPTION_URL=wss://atlas-dev.joystream.org/orion-v2/graphql VITE_DEVELOPMENT_NODE_URL=wss://atlas-dev.joystream.org/ws-rpc VITE_DEVELOPMENT_FAUCET_URL=https://atlas-dev.joystream.org/member-faucet/register -VITE_DEVELOPMENT_YPP_FAUCET_URL=https://52.204.147.11.nip.io/membership +VITE_DEVELOPMENT_YPP_FAUCET_URL=https://50.19.175.219.nip.io/memberships # Experimental env URLs VITE_NEXT_ORION_AUTH_URL= diff --git a/packages/atlas/src/api/hooks/video.ts b/packages/atlas/src/api/hooks/video.ts index b042ba42c9..99e67c9249 100644 --- a/packages/atlas/src/api/hooks/video.ts +++ b/packages/atlas/src/api/hooks/video.ts @@ -17,7 +17,7 @@ import { useGetMostViewedVideosConnectionQuery, useGetVideosCountQuery, } from '@/api/queries/__generated__/videos.generated' -import { publicVideoFilter } from '@/config/contentFilter' +import { publicCryptoVideoFilter } from '@/config/contentFilter' export const useFullVideo = ( id: string, @@ -48,7 +48,7 @@ export const useChannelPreviewVideos = ( const { data, ...rest } = useGetBasicVideosQuery({ ...opts, variables: { - where: { ...publicVideoFilter, channel: { id_eq: channelId } }, + where: { ...publicCryptoVideoFilter, channel: { id_eq: channelId } }, orderBy: VideoOrderByInput.CreatedAtDesc, offset: 0, limit: 10, diff --git a/packages/atlas/src/assets/icons/IconRankBronzeColor.tsx b/packages/atlas/src/assets/icons/IconRankBronzeColor.tsx new file mode 100644 index 0000000000..d9f5bb61ca --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankBronzeColor.tsx @@ -0,0 +1,77 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankBronzeColor = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)) +SvgIconRankBronzeColor.displayName = 'SvgIconRankBronzeColor' +const Memo = memo(SvgIconRankBronzeColor) +export { Memo as SvgIconRankBronzeColor } diff --git a/packages/atlas/src/assets/icons/IconRankBronzeMonochrome.tsx b/packages/atlas/src/assets/icons/IconRankBronzeMonochrome.tsx new file mode 100644 index 0000000000..a7591ff692 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankBronzeMonochrome.tsx @@ -0,0 +1,28 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankBronzeMonochrome = forwardRef((props: SVGProps, ref: Ref) => ( + + + + +)) +SvgIconRankBronzeMonochrome.displayName = 'SvgIconRankBronzeMonochrome' +const Memo = memo(SvgIconRankBronzeMonochrome) +export { Memo as SvgIconRankBronzeMonochrome } diff --git a/packages/atlas/src/assets/icons/IconRankDiamondColor.tsx b/packages/atlas/src/assets/icons/IconRankDiamondColor.tsx new file mode 100644 index 0000000000..76c034ea26 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankDiamondColor.tsx @@ -0,0 +1,304 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankDiamondColor = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)) +SvgIconRankDiamondColor.displayName = 'SvgIconRankDiamondColor' +const Memo = memo(SvgIconRankDiamondColor) +export { Memo as SvgIconRankDiamondColor } diff --git a/packages/atlas/src/assets/icons/IconRankDiamondMonochrome.tsx b/packages/atlas/src/assets/icons/IconRankDiamondMonochrome.tsx new file mode 100644 index 0000000000..f842584e11 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankDiamondMonochrome.tsx @@ -0,0 +1,54 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankDiamondMonochrome = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + +)) +SvgIconRankDiamondMonochrome.displayName = 'SvgIconRankDiamondMonochrome' +const Memo = memo(SvgIconRankDiamondMonochrome) +export { Memo as SvgIconRankDiamondMonochrome } diff --git a/packages/atlas/src/assets/icons/IconRankGoldColor.tsx b/packages/atlas/src/assets/icons/IconRankGoldColor.tsx new file mode 100644 index 0000000000..4a59a5e5ae --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankGoldColor.tsx @@ -0,0 +1,120 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankGoldColor = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)) +SvgIconRankGoldColor.displayName = 'SvgIconRankGoldColor' +const Memo = memo(SvgIconRankGoldColor) +export { Memo as SvgIconRankGoldColor } diff --git a/packages/atlas/src/assets/icons/IconRankGoldMonochrome.tsx b/packages/atlas/src/assets/icons/IconRankGoldMonochrome.tsx new file mode 100644 index 0000000000..26b7641bb4 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankGoldMonochrome.tsx @@ -0,0 +1,28 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankGoldMonochrome = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + +)) +SvgIconRankGoldMonochrome.displayName = 'SvgIconRankGoldMonochrome' +const Memo = memo(SvgIconRankGoldMonochrome) +export { Memo as SvgIconRankGoldMonochrome } diff --git a/packages/atlas/src/assets/icons/IconRankSilverColor.tsx b/packages/atlas/src/assets/icons/IconRankSilverColor.tsx new file mode 100644 index 0000000000..a33f1a44d1 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankSilverColor.tsx @@ -0,0 +1,150 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankSilverColor = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)) +SvgIconRankSilverColor.displayName = 'SvgIconRankSilverColor' +const Memo = memo(SvgIconRankSilverColor) +export { Memo as SvgIconRankSilverColor } diff --git a/packages/atlas/src/assets/icons/IconRankSilverMonochrome.tsx b/packages/atlas/src/assets/icons/IconRankSilverMonochrome.tsx new file mode 100644 index 0000000000..b64926ebc4 --- /dev/null +++ b/packages/atlas/src/assets/icons/IconRankSilverMonochrome.tsx @@ -0,0 +1,23 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgIconRankSilverMonochrome = forwardRef((props: SVGProps, ref: Ref) => ( + + + + +)) +SvgIconRankSilverMonochrome.displayName = 'SvgIconRankSilverMonochrome' +const Memo = memo(SvgIconRankSilverMonochrome) +export { Memo as SvgIconRankSilverMonochrome } diff --git a/packages/atlas/src/assets/icons/LoaderMStatic.tsx b/packages/atlas/src/assets/icons/LoaderMStatic.tsx new file mode 100644 index 0000000000..fce5ede5c3 --- /dev/null +++ b/packages/atlas/src/assets/icons/LoaderMStatic.tsx @@ -0,0 +1,23 @@ +// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY; +import { Ref, SVGProps, forwardRef, memo } from 'react' + +const SvgLoaderMStatic = forwardRef((props: SVGProps, ref: Ref) => ( + + + + + + + + + + +)) +SvgLoaderMStatic.displayName = 'SvgLoaderMStatic' +const Memo = memo(SvgLoaderMStatic) +export { Memo as SvgLoaderMStatic } diff --git a/packages/atlas/src/assets/icons/index.ts b/packages/atlas/src/assets/icons/index.ts index e2c5e444f8..908daeb06d 100644 --- a/packages/atlas/src/assets/icons/index.ts +++ b/packages/atlas/src/assets/icons/index.ts @@ -177,6 +177,14 @@ export * from './ControlsVideoModeCompactView' export * from './ControlsVideo' export * from './ControlsZoomIn' export * from './ControlsZoomOut' +export * from './IconRankBronzeColor' +export * from './IconRankBronzeMonochrome' +export * from './IconRankDiamondColor' +export * from './IconRankDiamondMonochrome' +export * from './IconRankGoldColor' +export * from './IconRankGoldMonochrome' +export * from './IconRankSilverColor' +export * from './IconRankSilverMonochrome' export * from './IllustrativeEdit' export * from './IllustrativeFileFailed' export * from './IllustrativeFileSelected' @@ -197,6 +205,7 @@ export * from './JoyTokenSilver16' export * from './JoyTokenSilver24' export * from './JoyTokenSilver32' export * from './JoyTokenSilver48' +export * from './LoaderMStatic' export * from './LogoAppleMonochrome' export * from './LogoAppleOnDark' export * from './LogoAppleOnLight' diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-color.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-color.svg new file mode 100644 index 0000000000..40ccc30e50 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-color.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-monochrome.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-monochrome.svg new file mode 100644 index 0000000000..d80280f3b0 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-bronze-monochrome.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-color.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-color.svg new file mode 100644 index 0000000000..6313b81994 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-color.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-monochrome.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-monochrome.svg new file mode 100644 index 0000000000..2e4cf1fcd3 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-diamond-monochrome.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-gold-color.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-gold-color.svg new file mode 100644 index 0000000000..74770424bc --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-gold-color.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-gold-monochrome.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-gold-monochrome.svg new file mode 100644 index 0000000000..608782a3fe --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-gold-monochrome.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-silver-color.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-silver-color.svg new file mode 100644 index 0000000000..6e66d14ee8 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-silver-color.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/icon-rank-silver-monochrome.svg b/packages/atlas/src/assets/icons/svgs/icon-rank-silver-monochrome.svg new file mode 100644 index 0000000000..31ec53b5c4 --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/icon-rank-silver-monochrome.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/atlas/src/assets/icons/svgs/loader-m-static.svg b/packages/atlas/src/assets/icons/svgs/loader-m-static.svg new file mode 100644 index 0000000000..81a8e2388b --- /dev/null +++ b/packages/atlas/src/assets/icons/svgs/loader-m-static.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/atlas/src/assets/images/illustration-crt-l1.webp b/packages/atlas/src/assets/images/illustration-crt-l1.webp index 2d507ddbdb..587251ca15 100644 Binary files a/packages/atlas/src/assets/images/illustration-crt-l1.webp and b/packages/atlas/src/assets/images/illustration-crt-l1.webp differ diff --git a/packages/atlas/src/assets/images/illustration-gated-l1.webp b/packages/atlas/src/assets/images/illustration-gated-l1.webp new file mode 100644 index 0000000000..2f9ab98ac4 Binary files /dev/null and b/packages/atlas/src/assets/images/illustration-gated-l1.webp differ diff --git a/packages/atlas/src/assets/images/illustration-gated-l2.webp b/packages/atlas/src/assets/images/illustration-gated-l2.webp new file mode 100644 index 0000000000..49c68e4bc2 Binary files /dev/null and b/packages/atlas/src/assets/images/illustration-gated-l2.webp differ diff --git a/packages/atlas/src/assets/images/illustration-my-videos-page-l1.webp b/packages/atlas/src/assets/images/illustration-my-videos-page-l1.webp deleted file mode 100644 index 28668e6cba..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-my-videos-page-l1.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/illustration-my-videos-page-l2.webp b/packages/atlas/src/assets/images/illustration-my-videos-page-l2.webp deleted file mode 100644 index ff16c74374..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-my-videos-page-l2.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/illustration-tip-l1.webp b/packages/atlas/src/assets/images/illustration-tip-l1.webp new file mode 100644 index 0000000000..1966117c71 Binary files /dev/null and b/packages/atlas/src/assets/images/illustration-tip-l1.webp differ diff --git a/packages/atlas/src/assets/images/illustration-tip-l2.webp b/packages/atlas/src/assets/images/illustration-tip-l2.webp new file mode 100644 index 0000000000..2d16b9b9a6 Binary files /dev/null and b/packages/atlas/src/assets/images/illustration-tip-l2.webp differ diff --git a/packages/atlas/src/assets/images/illustration-tip-l3.webp b/packages/atlas/src/assets/images/illustration-tip-l3.webp new file mode 100644 index 0000000000..873de692d8 Binary files /dev/null and b/packages/atlas/src/assets/images/illustration-tip-l3.webp differ diff --git a/packages/atlas/src/assets/images/illustration-video-nfts-l1.webp b/packages/atlas/src/assets/images/illustration-video-nfts-l1.webp index 827768ed9e..9db756ef76 100644 Binary files a/packages/atlas/src/assets/images/illustration-video-nfts-l1.webp and b/packages/atlas/src/assets/images/illustration-video-nfts-l1.webp differ diff --git a/packages/atlas/src/assets/images/illustration-video-nfts-l2.webp b/packages/atlas/src/assets/images/illustration-video-nfts-l2.webp index 843d308d8d..c315328728 100644 Binary files a/packages/atlas/src/assets/images/illustration-video-nfts-l2.webp and b/packages/atlas/src/assets/images/illustration-video-nfts-l2.webp differ diff --git a/packages/atlas/src/assets/images/illustration-ypp-dashboard-l1.webp b/packages/atlas/src/assets/images/illustration-ypp-dashboard-l1.webp deleted file mode 100644 index 6029234370..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-ypp-dashboard-l1.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/illustration-ypp-dashboard-l2.webp b/packages/atlas/src/assets/images/illustration-ypp-dashboard-l2.webp deleted file mode 100644 index 93280c0239..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-ypp-dashboard-l2.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/illustration-ypp-sync-l1.webp b/packages/atlas/src/assets/images/illustration-ypp-sync-l1.webp deleted file mode 100644 index 9733e9e805..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-ypp-sync-l1.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/illustration-ypp-sync-l2.webp b/packages/atlas/src/assets/images/illustration-ypp-sync-l2.webp deleted file mode 100644 index 859f52b932..0000000000 Binary files a/packages/atlas/src/assets/images/illustration-ypp-sync-l2.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/hero-1152.webp b/packages/atlas/src/assets/images/ypp-hero/hero-1152.webp deleted file mode 100644 index cda5d28a1d..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/hero-1152.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/hero-2304.webp b/packages/atlas/src/assets/images/ypp-hero/hero-2304.webp deleted file mode 100644 index 23c2648a46..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/hero-2304.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/hero-576.webp b/packages/atlas/src/assets/images/ypp-hero/hero-576.webp deleted file mode 100644 index cf8cdc35ab..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/hero-576.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/hero-864.webp b/packages/atlas/src/assets/images/ypp-hero/hero-864.webp deleted file mode 100644 index 56c6cb1db4..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/hero-864.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/hero.webp b/packages/atlas/src/assets/images/ypp-hero/hero.webp new file mode 100644 index 0000000000..da79eaa862 Binary files /dev/null and b/packages/atlas/src/assets/images/ypp-hero/hero.webp differ diff --git a/packages/atlas/src/assets/images/ypp-hero/yt-1152.webp b/packages/atlas/src/assets/images/ypp-hero/yt-1152.webp deleted file mode 100644 index bb3279a9e6..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/yt-1152.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/yt-2304.webp b/packages/atlas/src/assets/images/ypp-hero/yt-2304.webp deleted file mode 100644 index 2ceb00cada..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/yt-2304.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/yt-576.webp b/packages/atlas/src/assets/images/ypp-hero/yt-576.webp deleted file mode 100644 index 0847b0185c..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/yt-576.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/yt-864.webp b/packages/atlas/src/assets/images/ypp-hero/yt-864.webp deleted file mode 100644 index 1e5692eb5b..0000000000 Binary files a/packages/atlas/src/assets/images/ypp-hero/yt-864.webp and /dev/null differ diff --git a/packages/atlas/src/assets/images/ypp-hero/yt.webp b/packages/atlas/src/assets/images/ypp-hero/yt.webp new file mode 100644 index 0000000000..8d8afb5381 Binary files /dev/null and b/packages/atlas/src/assets/images/ypp-hero/yt.webp differ diff --git a/packages/atlas/src/components/CopyButton/CopyButton.tsx b/packages/atlas/src/components/CopyButton/CopyButton.tsx new file mode 100644 index 0000000000..3a6b2fc9ce --- /dev/null +++ b/packages/atlas/src/components/CopyButton/CopyButton.tsx @@ -0,0 +1,59 @@ +import styled from '@emotion/styled' +import { useRef, useState } from 'react' + +import { Text } from '@/components/Text' +import { Button, ButtonProps } from '@/components/_buttons/Button' +import { Popover, PopoverImperativeHandle } from '@/components/_overlays/Popover' +import { useClipboard } from '@/hooks/useClipboard' +import { cVar, sizes } from '@/styles' + +export type CopyButtonProps = { + textToCopy: string + copySuccessText?: string + className?: string + onClick?: () => void +} & Omit +export const CopyButton = ({ + textToCopy, + copySuccessText = 'Copied', + className, + onClick, + ...buttonProps +}: CopyButtonProps) => { + const { copyToClipboard } = useClipboard() + const popoverRef = useRef(null) + const [copyButtonClicked, setCopyButtonClicked] = useState(false) + const handleCopy = () => { + if (!textToCopy || copyButtonClicked) { + return + } + copyToClipboard(textToCopy) + setCopyButtonClicked(true) + onClick?.() + popoverRef.current?.show() + setTimeout(() => { + setCopyButtonClicked(false) + popoverRef.current?.hide() + }, 3_000) + } + + return ( + + }> + + + {copySuccessText} + + + + + - . - - } - /> - )} - {currentChannel?.yppStatus === 'Unverified' && ( - } - description={ - - Your channel needs to get verified before content syncing starts. It normally takes 12-48 hours for - channels to get verified. -
- Once verified, you will qualify for the rewards. Payouts are made on a weekly basis, every Friday, for the - previous calendar week. Your first payment will involve the reward for the sign up of{' '} - {' '} - USD paid out in ${atlasConfig.joystream.tokenTicker} tokens based on the market rate. - - } - /> - )} - {atlasConfig.features.ypp.widgets && ( - - {atlasConfig.features.ypp.widgets.map((widget) => ( - , - to: widget.link, - iconPlacement: 'right', - }} - /> - ))} - - )} - - {REWARDS?.map((reward) => { - const customMultiplier = reward.customMultiplier?.[currentTier] - const rewardAmount = calculateReward(reward.joyAmount, customMultiplier || multiplier, currentTier) - const rewardAmountUsd = calculateReward(reward.usdAmount, customMultiplier || multiplier, currentTier) - return ( + + + + + + + + + + + + + {formatDate(nextPayoutDate)} + + } + iconPlacement="right" + > + View payments + + + } + /> + + {atlasConfig.features.ypp.widgets && + atlasConfig.features.ypp.widgets + .filter((widget) => widget.title !== 'Payments') + .map((widget) => ( + + + + {widget.icon ? configYppIconMapper[widget.icon] : null} + + {widget.title} + + + } iconPlacement="right"> + {widget.linkText ?? `Go to ${widget.title}`} + + + } + /> + + ))} + {!hasDismissedSignupMessage && !currentChannel?.yppStatus.startsWith('Suspended') && ( + { - if ( - reward.actionButton && - 'copyReferral' in reward.actionButton && - reward.actionButton.copyReferral - ) { - trackReferralLinkGenerated(channelId) - copyToClipboard( - `${window.location.host}/ypp?referrerId=${channelId}`, - 'Referral link copied to clipboard' - ) - } - }, - } - : undefined + title={ + currentChannel?.yppStatus.startsWith('Verified') + ? 'Thank you for signing up!' + : `Sign up to ${atlasConfig.general.appName}` + } + description={ + currentChannel?.yppStatus.startsWith('Verified') + ? `You will receive sign up bonus on (Friday) ${formatDate(nextPayoutDate)}` + : 'Connect you YouTube channels via a step-by-step flow and get your first reward. You can sign up with multiple channels!' + } + dollarAmount={ + !currentChannel || !currentChannel.yppStatus.startsWith('Verified') + ? 100 + : getTierRewards(currentChannel.yppStatus.split('::')[1].toLowerCase())?.[0] + } + isRangeAmount={!currentChannel || !currentChannel.yppStatus.startsWith('Verified')} + amountTooltip="Ranks are assigned at discretion of Joystream team based on such factors as content quality and channel popularity." + actionNode={ + !currentChannel || !currentChannel.yppStatus.startsWith('Verified') ? ( + + ) : ( + updateDismissedMessages(getMessageIdForChannel(channelId as string))} + icon={smMatch && } + > + {!smMatch ? 'Close' : ''} + + ) } - joyAmount={rewardAmount} - dollarAmount={rewardAmountUsd} /> - ) - })} - - } - title="Have more than one YouTube channel?" - description={`You can apply to the YouTube Partner Program with as many YouTube & ${APP_NAME} channels as you want. Each YouTube channel can be assigned to only one ${APP_NAME} channel. \nYou can create a new channel from the top right menu.`} - /> + + )} + + + + + Suspended + + + + {syncStatusContent} + + ) + } + /> + + + trackReferralLinkGenerated(channelId)} + > + Copy referral link + + } + /> + + ) } diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx index 58cc02b6ab..02eecd45b2 100644 --- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx +++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx @@ -1,5 +1,7 @@ import { useMemo } from 'react' +import { useQuery } from 'react-query' +import { axiosInstance } from '@/api/axios' import { SvgActionLinkUrl } from '@/assets/icons' import { EmptyFallback } from '@/components/EmptyFallback' import { YppReferral, YppReferralTable } from '@/components/YppReferralTable/YppReferralTable' @@ -7,36 +9,31 @@ import { Button } from '@/components/_buttons/Button' import { atlasConfig } from '@/config' import { useClipboard } from '@/hooks/useClipboard' import { useUser } from '@/providers/user/user.hooks' -import { useGetYppSyncedChannels } from '@/views/global/YppLandingView/useGetYppSyncedChannels' +import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types' -import { TIERS } from '../../YppDashboard.config' import { FallbackContainer } from '../YppDashboardTabs.styles' -const BASE_REFERRAL_REWARD = atlasConfig.features.ypp.referralBaseReward ?? 0 +const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl export const YppDashboardReferralsTab = () => { - const { currentChannel, isLoading } = useGetYppSyncedChannels() const { copyToClipboard } = useClipboard() const { channelId } = useUser() + const { isLoading, data } = useQuery( + ['referralsTable', channelId], + () => axiosInstance.get(`${YPP_SYNC_URL}/channels/${channelId}/referrals`), + { enabled: !!channelId } + ) + const mappedData: YppReferral[] = useMemo( () => - currentChannel?.referredChannels?.map((channelData) => { - const tier = TIERS.reduce((prev, current, idx) => { - if (channelData.subscribersCount >= (current?.subscribers || 0)) { - return idx - } else { - return prev - } - }, 0) + data?.data.map((channelData) => { return { date: new Date(channelData.createdAt), channel: String(channelData.joystreamChannelId), - rewardUsd: TIERS[tier].multiplier * BASE_REFERRAL_REWARD, status: channelData.yppStatus, - tier, } }) ?? [], - [currentChannel?.referredChannels] + [data?.data] ) if (!isLoading && !mappedData?.length) { diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardSettingsTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardSettingsTab.tsx index 11778e4b7d..469e43a116 100644 --- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardSettingsTab.tsx +++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardSettingsTab.tsx @@ -125,7 +125,7 @@ export const YppDashboardSettingsTab = () => { displaySnackbar({ title: 'Settings updated successfully', description: isSync - ? 'We started syncing your YouTube videos. Please allow 30 to 60 minutes for your videos to start showing up on the My videos page.' + ? 'Auto-sync is successfully enabled. It may take up to 24 hours for the videos to start syncing.' : 'Your videos will no longer be synced with your YouTube channel.', iconType: 'success', actionText: isSync ? 'Go to My Videos' : undefined, @@ -216,7 +216,6 @@ export const YppDashboardSettingsTab = () => { iconType: 'success', }) } - navigate(absoluteRoutes.studio.ypp()) } } } catch (e) { @@ -248,7 +247,6 @@ export const YppDashboardSettingsTab = () => { handleTransaction, joystream, memberId, - navigate, proxyCallback, ]) diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardTabs.styles.ts b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardTabs.styles.ts index 502fac3bef..5a301e33e8 100644 --- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardTabs.styles.ts +++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardTabs.styles.ts @@ -1,37 +1,16 @@ +import { keyframes } from '@emotion/react' import styled from '@emotion/styled' import { SvgActionArrowRight, SvgAlertsInformative24, SvgAlertsWarning32 } from '@/assets/icons' import { ActionBar } from '@/components/ActionBar' import { Banner } from '@/components/Banner' -import { cVar, media, sizes, zIndex } from '@/styles' +import { CopyButton } from '@/components/CopyButton/CopyButton' +import { FlexBox } from '@/components/FlexBox' +import { Button } from '@/components/_buttons/Button' +import { cVar, media, sizes, square, zIndex } from '@/styles' export { Divider } from '../YppDashboard.styles' -export const RewardsWrapper = styled.div` - display: grid; - gap: ${sizes(4)}; - margin-bottom: ${sizes(4)}; - - ${media.md} { - gap: ${sizes(6)}; - margin-bottom: ${sizes(6)}; - } -` - -export const WidgetsWrapper = styled.section` - display: grid; - gap: ${sizes(4)}; - margin-bottom: ${sizes(4)}; - - ${media.sm} { - grid-template-columns: repeat(3, 1fr); - } - - ${media.md} { - margin-bottom: ${sizes(6)}; - } -` - export const StyledSvgAlertsInformative24 = styled(SvgAlertsInformative24)` path { fill: ${cVar('colorTextStrong')}; @@ -73,3 +52,84 @@ export const StyledActionBar = styled(ActionBar)` export const FallbackContainer = styled.div` margin-top: 128px; ` +const dotPulse = ({ isOn }: { isOn: boolean }) => keyframes` + 0% { + box-shadow: none; + } + + 10% { + box-shadow: 0 0 0 3px ${isOn ? '#0c984680' : '#ff695f80'}; + } + + 20%, 100% { + box-shadow: none; + } + + +` +export const YppSyncStatus = styled.div` + display: flex; + align-items: center; + justify-content: center; + gap: ${sizes(2)}; + background-color: ${cVar('colorCoreNeutral800Lighten')}; + padding: ${sizes(2.5)} ${sizes(4)}; + border-radius: 99px; + width: 100%; + + ${media.sm} { + width: fit-content; + } + + p { + white-space: nowrap; + } +` +export const StatusDotWrapper = styled.div` + ${square(20)}; + + display: grid; + place-items: center; +` +export const StatusDot = styled.div<{ isOn: boolean }>` + width: 10px; + height: 10px; + border-radius: 50%; + background: ${(props) => (props.isOn ? 'linear-gradient(#0ebe57, #096c34)' : 'linear-gradient(#ff695f, #bf0c00)')}; + box-shadow: 0 0 0 5px ${(props) => (props.isOn ? '#0c984680' : '#ff695f80')}; + animation: 10s ease-out ${(props) => dotPulse(props)} infinite; +` + +export const StyledCloseButton = styled(Button)` + position: static; + + ${media.sm} { + position: absolute; + top: ${sizes(6)}; + right: ${sizes(6)}; + } + + ${media.lg} { + position: static; + } +` + +export const StyledCopyButton = styled(CopyButton)` + width: 100%; + + ${media.sm} { + width: auto; + } +` + +export const WidgetTileContent = styled(FlexBox)` + flex-direction: column; + gap: ${({ gap }) => sizes(gap ?? 1)}; + + ${media.lg} { + gap: 0; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + } +` diff --git a/packages/atlas/src/views/viewer/CategoryView/CategoryVideos.tsx b/packages/atlas/src/views/viewer/CategoryView/CategoryVideos.tsx index 131d930ced..8459f21667 100644 --- a/packages/atlas/src/views/viewer/CategoryView/CategoryVideos.tsx +++ b/packages/atlas/src/views/viewer/CategoryView/CategoryVideos.tsx @@ -8,7 +8,7 @@ import { EmptyFallback } from '@/components/EmptyFallback' import { Section } from '@/components/Section/Section' import { Button } from '@/components/_buttons/Button' import { VideoTileViewer } from '@/components/_video/VideoTileViewer' -import { publicVideoFilter } from '@/config/contentFilter' +import { publicCryptoVideoFilter } from '@/config/contentFilter' import { absoluteRoutes } from '@/config/routes' import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid' import { DEFAULT_VIDEO_GRID } from '@/styles' @@ -27,7 +27,7 @@ export const CategoryVideos: FC = ({ categoriesId }) => { query: GetBasicVideosConnectionDocument, variables: { where: { - ...publicVideoFilter, + ...publicCryptoVideoFilter, category: { id_in: categoriesId, }, diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx index 4ecbf097c8..dc1a9fc77e 100644 --- a/packages/atlas/src/views/viewer/HomeView.tsx +++ b/packages/atlas/src/views/viewer/HomeView.tsx @@ -6,7 +6,7 @@ import { GetBasicVideosConnectionLightweightDocument } from '@/api/queries/__gen import { Section } from '@/components/Section/Section' import { VideoContentTemplate } from '@/components/_templates/VideoContentTemplate' import { VideoTileViewer } from '@/components/_video/VideoTileViewer' -import { publicVideoFilter } from '@/config/contentFilter' +import { publicCryptoVideoFilter } from '@/config/contentFilter' import { useHeadTags } from '@/hooks/useHeadTags' import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid' import { DEFAULT_VIDEO_GRID, sizes } from '@/styles' @@ -17,7 +17,7 @@ export const HomeView: FC = () => { const { columns, fetchMore, pageInfo, tiles } = useInfiniteVideoGrid({ query: GetBasicVideosConnectionLightweightDocument, variables: { - where: publicVideoFilter, + where: publicCryptoVideoFilter, orderBy: VideoOrderByInput.VideoRelevanceDesc, }, }) diff --git a/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx b/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx index 6b266b5139..c21e464e33 100644 --- a/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx +++ b/packages/atlas/src/views/viewer/VideoView/MoreVideos.tsx @@ -8,7 +8,7 @@ import { Button } from '@/components/_buttons/Button' import { ChannelLink } from '@/components/_channel/ChannelLink' import { VideoTileViewer } from '@/components/_video/VideoTileViewer' import { displayCategoriesLookup } from '@/config/categories' -import { publicVideoFilter } from '@/config/contentFilter' +import { publicCryptoVideoFilter } from '@/config/contentFilter' import { absoluteRoutes } from '@/config/routes' import { useMediaMatch } from '@/hooks/useMediaMatch' import { createPlaceholderData } from '@/utils/data' @@ -37,9 +37,9 @@ export const MoreVideos: FC = ({ const videoCategories = categoryId ? displayCategoriesLookup[categoryId].videoCategories : undefined const where = type === 'channel' - ? { ...publicVideoFilter, channel: { ...publicVideoFilter.channel, id_eq: channelId } } + ? { ...publicCryptoVideoFilter, channel: { ...publicCryptoVideoFilter.channel, id_eq: channelId } } : { - ...publicVideoFilter, + ...publicCryptoVideoFilter, category: { id_in: videoCategories, },