Release v3.3.1

CHANGELOG.md

@@ -5,6 +5,17 @@ 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).
 
+## [3.3.1] - 2023-05-25
+
+### Changed
+
+- Changed featured NFTs allowance criteria
+
+### Fixed
+
+- Fixed wrong environment selection
+- Fixed share modal incorrect behaviour
+
 ## [3.3.0] - 2023-05-23
 
 ### Added

packages/atlas/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",

packages/atlas/src/api/hooks/nfts.ts

@@ -196,13 +196,6 @@ export const useFeaturedNftsVideos = () => {
       orderBy: [OwnedNftOrderByInput.VideoViewsNumDesc],
       where: {
         isFeatured_eq: true,
-        transactionalStatus: {
-          isTypeOf_in: ['TransactionalStatusAuction', 'TransactionalStatusBuyNow'],
-          auction: {
-            isCompleted_eq: false,
-            isCanceled_eq: false,
-          },
-        },
       },
     },
   })

packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx

@@ -16,16 +16,18 @@ export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
   ({ isInView, author, title, ...videoPlayerProps }, ref) => {
     const [forceExit, setForceExit] = useState(false)
     const [isPaused, setIsPaused] = useState(false)
+    const [wasPausedOnTop, setWasPausedTop] = useState(false)
     const isAllowed = usePersonalDataStore((state) => state.allowMinimizedPleyer)
     const mdMatch = useMediaMatch('md')
 
     useEffect(() => {
       if (isInView) {
         setForceExit(false)
+        setWasPausedTop(isPaused)
       }
-    }, [isInView])
+    }, [isInView, isPaused])
 
-    const inView = isAllowed && mdMatch && !isPaused ? isInView || forceExit : true
+    const inView = isAllowed && mdMatch && !wasPausedOnTop ? isInView || forceExit : true
 
     return (
       <Wrapper isInView={inView}>

packages/atlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx

@@ -5,6 +5,7 @@ import { CSSTransition } from 'react-transition-group'
 
 import { getNftStatus } from '@/api/hooks/nfts'
 import { GetFeaturedNftsVideosQuery } from '@/api/queries/__generated__/nfts.generated'
+import { SvgActionNotForSale } from '@/assets/icons'
 import { AvatarGroup } from '@/components/Avatar/AvatarGroup'
 import { JoyTokenIcon } from '@/components/JoyTokenIcon'
 import {
@@ -210,6 +211,15 @@ export const NftCarouselDetails = ({
                     icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
                   />
                 )}
+                {nftStatus?.status === 'idle' && (
+                  <DetailsContent
+                    tileSize={smMatch ? 'big' : 'bigSmall'}
+                    caption="STATUS"
+                    content="Not for sale"
+                    secondary
+                    icon={<SvgActionNotForSale width={smMatch ? 24 : 16} height={smMatch ? 24 : 16} />}
+                  />
+                )}
 
                 {timeLeft && (
                   <DetailsContent

packages/atlas/src/components/_overlays/AdminModal/AdminModal.tsx

@@ -14,7 +14,7 @@ import { Select } from '@/components/_inputs/Select'
 import { Switch } from '@/components/_inputs/Switch'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
-import { NODE_URL, availableEnvs, getEnvName } from '@/config/env'
+import { ENV_SELECTION_ENABLED, NODE_URL, availableEnvs } from '@/config/env'
 import { absoluteRoutes } from '@/config/routes'
 import { useConfirmationModal } from '@/providers/confirmationModal'
 import { useEnvironmentStore } from '@/providers/environment'
@@ -31,8 +31,6 @@ import {
   VerticalSpacedContainer,
 } from './AdminModal.styles'
 
-const ENV_SELECTION_ENABLED: boolean = import.meta.env[getEnvName('ENV_SELECTION_ENABLED')] === 'true'
-
 const ENVIRONMENT_NAMES: Record<string, string> = {
   production: 'Joystream Mainnet',
   development: `${atlasConfig.general.appName} Dev Testnet`,

packages/atlas/src/components/_video/VideoPlayer/VideoPlayer.tsx

@@ -717,7 +717,14 @@ const VideoPlayerComponent: ForwardRefRenderFunction<HTMLVideoElement, VideoPlay
       className={className}
       isSettingsPopoverOpened={isSettingsPopoverOpened}
     >
-      <div data-vjs-player onClick={() => handlePlayPause()}>
+      <div
+        data-vjs-player
+        onClick={() => {
+          if (!(isShareDialogOpen || isSharingOverlayOpen)) {
+            handlePlayPause()
+          }
+        }}
+      >
         {needsManualPlay && (
           <BigPlayButtonContainer
             onClick={() => {

packages/atlas/src/components/_video/VideoPlayer/VideoShare.tsx

@@ -63,7 +63,12 @@ export const VideoShare: FC<VideoShareProps> = ({
   }
   if (!isEmbedded) {
     return (
-      <DialogModal title="Share video" show={isShareDialogOpen} onExitClick={onCloseShareDialog}>
+      <DialogModal
+        title="Share video"
+        show={isShareDialogOpen}
+        onClickOutside={onCloseShareDialog}
+        onExitClick={onCloseShareDialog}
+      >
         <VideoShareContent {...commonVideoShareContentProps} />
       </DialogModal>
     )

packages/atlas/src/config/env.ts

@@ -8,8 +8,19 @@ export const getEnvName = (name: string) => {
   return `${ENV_PREFIX}_${name}`
 }
 
+export const ENV_SELECTION_ENABLED: boolean = import.meta.env[getEnvName('ENV_SELECTION_ENABLED')] === 'true'
+
 export const BUILD_ENV = (import.meta.env[getEnvName('ENV')] || 'production') as BuildEnv
 
+// if it's a case that the environment selection is disabled, but user has different value in the localstorage
+// we need to reset the state
+if (ENV_SELECTION_ENABLED === false) {
+  const environmentState = useEnvironmentStore.getState()
+
+  if (environmentState.actions.getInitialState().targetDevEnv !== environmentState.targetDevEnv) {
+    useEnvironmentStore.getState().actions.reset()
+  }
+}
 export const availableEnvs = () => {
   return Array.from(
     new Set(

packages/atlas/src/providers/environment/store.ts

@@ -15,6 +15,8 @@ const INITIAL_STATE: EnvironmentState = {
 export type EnvironmentStoreActions = {
   setTargetDevEnv: (env: string) => void
   setNodeOverride: (node: string | null) => void
+  reset: () => void
+  getInitialState: () => EnvironmentState
 }
 
 export const useEnvironmentStore = createStore<EnvironmentState, EnvironmentStoreActions>(
@@ -31,6 +33,10 @@ export const useEnvironmentStore = createStore<EnvironmentState, EnvironmentStor
           state.targetDevEnv = env
         })
       },
+      reset: () => {
+        set(() => INITIAL_STATE)
+      },
+      getInitialState: () => INITIAL_STATE,
     }),
   },
   {

packages/atlas/src/views/viewer/EmbeddedView/EmbeddedView.tsx

@@ -92,7 +92,7 @@ export const EmbeddedView: FC = () => {
     <>
       <EmbeddedGlobalStyles />
       <Container>
-        {loading && video ? (
+        {!loading && video ? (
           <VideoPlayer
             onAddVideoView={handleAddVideoView}
             isVideoPending={!video?.media?.isAccepted}

packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx

@@ -109,22 +109,11 @@ export const FeatureNftModal: FC<FeatureNftModalProps> = ({ isOpen, onClose }) =
         },
       })
       if (!ownedNftById) {
-        return 'This video is not an NFT.'
+        setVideoId('')
+        return "This video doesn't exists or is not an NFT."
       }
       setVideoId(id)
-      if (
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusIdle' ||
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusInitiatedOfferToMember'
-      ) {
-        return "This video's NFT is not put on sale."
-      }
 
-      if (
-        ownedNftById.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
-        ownedNftById.transactionalStatus.auction.isCompleted
-      ) {
-        return "This video's NFT is not put on sale."
-      }
       return true
     },
     [client]

packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx

@@ -56,31 +56,15 @@ export const FeaturedNftsSection: FC = () => {
   const { nfts, loading } = useNfts({
     variables: {
       where: {
-        OR: [
-          {
-            isFeatured_eq: true,
-            transactionalStatus: {
-              isTypeOf_eq: 'TransactionalStatusAuction',
-              auction: {
-                isCompleted_eq: false,
-                isCanceled_eq: false,
-              },
-            },
-          },
-          {
-            isFeatured_eq: true,
-            transactionalStatus: {
-              isTypeOf_eq: 'TransactionalStatusBuyNow',
-            },
-          },
-        ],
+        isFeatured_eq: true,
       },
     },
   })
+  const nftsToSort = nfts || []
 
   // 1. English auctions(not upcoming) first - sorted by blocks left
-  const englishAuctions = nfts
-    ?.filter(
+  const englishAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
         nft.transactionalStatus.auction.auctionType.__typename === 'AuctionTypeEnglish' &&
@@ -103,8 +87,8 @@ export const FeaturedNftsSection: FC = () => {
     })
 
   // 2. Open and buy now auctions(not upcoming) - sorted by popularity
-  const openAuctionsAndBuyNowAuctions = nfts
-    ?.filter(
+  const openAuctionsAndBuyNowAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusBuyNow' ||
         (nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
@@ -114,8 +98,8 @@ export const FeaturedNftsSection: FC = () => {
     .sort((a, b) => b.video.viewsNum - a.video.viewsNum)
 
   // 3. Upcoming auctions - sorted by planned start
-  const plannedAuctions = nfts
-    ?.filter(
+  const plannedAuctions = nftsToSort
+    .filter(
       (nft) =>
         nft.transactionalStatus?.__typename === 'TransactionalStatusAuction' &&
         nft.transactionalStatus.auction.startsAtBlock > currentBlock
@@ -133,9 +117,15 @@ export const FeaturedNftsSection: FC = () => {
       return aPlannedStart - bPlannedStart
     })
 
-  const sorted = [...(englishAuctions || []), ...(openAuctionsAndBuyNowAuctions || []), ...(plannedAuctions || [])]
+  // 4. Not for sale - sorted by popularity
+
+  const notForSale = nftsToSort
+    .filter((nft) => nft.transactionalStatus?.__typename === 'TransactionalStatusIdle')
+    .sort((a, b) => b.video.viewsNum - a.video.viewsNum)
+
+  const sortedNfts = [...englishAuctions, ...openAuctionsAndBuyNowAuctions, ...plannedAuctions, ...notForSale]
 
-  const items = loading ? createPlaceholderData(10) : sorted ?? []
+  const items = loading ? createPlaceholderData(10) : sortedNfts ?? []
 
   const mdMatch = useMediaMatch('md')