Remove konami, segment, clean up Collectible3D (#7131)

packages/common/src/services/remote-config/defaults.ts

@@ -114,7 +114,6 @@ export const remoteConfigBooleanDefaults: {
   [BooleanKeys.DISPLAY_WEB3_PROVIDER_WALLET_LINK]: true,
   [BooleanKeys.DISPLAY_SOLANA_WEB3_PROVIDER_PHANTOM]: true,
   [BooleanKeys.SKIP_ROLLOVER_NODES_SANITY_CHECK]: false,
-  [BooleanKeys.USE_AMPLITUDE]: true,
   [BooleanKeys.AUDIO_TRANSACTIONS_ENABLED]: false,
   [BooleanKeys.ENABLE_DISCOVERY_NODE_MAX_SLOT_DIFF_PLAYS]: false
 }

packages/common/src/services/remote-config/types.ts

@@ -248,11 +248,6 @@ export enum BooleanKeys {
    */
   SKIP_ROLLOVER_NODES_SANITY_CHECK = 'SKIP_ROLLOVER_NODES_SANITY_CHECK',
 
-  /**
-   * Boolean to use amplitude as the metrics tracking.
-   */
-  USE_AMPLITUDE = 'USE_AMPLITUDE',
-
   /**
    * Boolean to enable "Transactions" button on Audio page.
    */

packages/embed/package.json

@@ -37,6 +37,7 @@
     "@audius/stems": "*",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@google/model-viewer": "3.3.0",
     "@radix-ui/react-slot": "1.0.2",
     "@react-spring/web": "9.7.3",
     "amplitude-js": "8.11.1",

packages/embed/src/components/collectibles/CollectibleDetailsView.jsx

@@ -8,20 +8,17 @@ import { getHash } from '../../util/collectibleHelpers'
 import { getScrollParent } from '../../util/scrollParent'
 import { getCopyableLink } from '../../util/shareUtil'
 import Button from '../button/Button'
+import '@google/model-viewer/dist//model-viewer.min.js'
 
 import styles from './CollectibleDetailsView.module.css'
 
-const MODEL_VIEWER_SCRIPT_URL =
-  'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js'
-
 const messages = {
   videoNotSupported: 'Your browser does not support the video tag.'
 }
 
 const CollectibleMedia = ({ collectible, isMuted, toggleMute, isMobile }) => {
   const { mediaType, imageUrl, videoUrl, gifUrl, threeDUrl } = collectible
   const [isSvg, setIsSvg] = useState(false)
-  const [scriptLoaded, setScriptLoaded] = useState(false)
   const [isLoading, setIsLoading] = useState(
     mediaType === 'IMAGE' || mediaType === 'GIF'
   )
@@ -45,25 +42,7 @@ const CollectibleMedia = ({ collectible, isMuted, toggleMute, isMobile }) => {
   )
 
   useEffect(() => {
-    const handleScript = (e) => setScriptLoaded(e.type === 'load')
-
-    const script = document.createElement('script')
-    script.src = MODEL_VIEWER_SCRIPT_URL
-    script.type = 'module'
-    script.async = true
-    document.body.appendChild(script)
-
-    script.addEventListener('load', handleScript)
-    script.addEventListener('error', handleScript)
-
-    return () => {
-      script.removeEventListener('load', handleScript)
-      script.removeEventListener('error', handleScript)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (threeDUrl && ref3D?.current && scriptLoaded) {
+    if (threeDUrl && ref3D?.current) {
       ref3D.current.innerHTML = `<model-viewer src=${threeDUrl} auto-rotate camera-controls />`
       const modelViewer = ref3D.current.children[0]
 
@@ -93,7 +72,7 @@ const CollectibleMedia = ({ collectible, isMuted, toggleMute, isMobile }) => {
         }
       }
     }
-  }, [threeDUrl, ref3D, isMobile, scriptLoaded])
+  }, [threeDUrl, ref3D, isMobile])
 
   return mediaType === 'THREE_D' ? (
     <div

packages/web/package.json

@@ -62,6 +62,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/styled": "^11.11.0",
     "@fingerprintjs/fingerprintjs-pro": "3.5.6",
+    "@google/model-viewer": "3.3.0",
     "@hcaptcha/react-hcaptcha": "0.3.6",
     "@juggle/resize-observer": "^3.3.1",
     "@jup-ag/api": "6.0.6",

packages/web/src/app/web-player/WebPlayer.jsx

@@ -38,7 +38,6 @@ import { ChatListener } from 'components/chat-listener/ChatListener'
 import CookieBanner from 'components/cookie-banner/CookieBanner'
 import { DevModeMananger } from 'components/dev-mode-manager/DevModeManager'
 import { HeaderContextConsumer } from 'components/header/mobile/HeaderContextProvider'
-import Konami from 'components/konami/Konami'
 import ConnectedMusicConfetti from 'components/music-confetti/ConnectedMusicConfetti'
 import Navigator from 'components/nav/Navigator'
 import TopLevelPage from 'components/nav/mobile/TopLevelPage'
@@ -971,7 +970,6 @@ class WebPlayer extends Component {
             <RewardClaimedToast />
           </Suspense>
           {/* Non-mobile */}
-          {!isMobileClient ? <Konami /> : null}
           {!isMobileClient ? <Visualizer /> : null}
           {!isMobileClient ? <PinnedTrackConfirmation /> : null}
           {!isMobileClient ? <DevModeMananger /> : null}

packages/web/src/components/collectibles/components/Collectible3D.tsx

@@ -0,0 +1,75 @@
+import { MutableRefObject, useEffect, useRef } from 'react'
+
+import type { ModelViewerElement } from '@google/model-viewer'
+import '@google/model-viewer/dist//model-viewer.min.js'
+
+import { getScrollParent } from 'utils/scrollParent'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'model-viewer': Partial<ModelViewerElement> & {
+        ref: MutableRefObject<Partial<ModelViewerElement> | null>
+      }
+    }
+  }
+}
+
+export const Collectible3D = ({
+  src,
+  isMobile
+}: {
+  src: string
+  isMobile: boolean
+}) => {
+  const ref = useRef<ModelViewerElement>(null)
+
+  useEffect(() => {
+    const modelViewer = ref.current
+    if (modelViewer) {
+      modelViewer.style.minWidth = '50vw'
+      modelViewer.style.minHeight = '50vh'
+
+      if (isMobile) {
+        modelViewer.style.width = '100%'
+
+        // for 3d objects, disable parent nft drawer element scrollability if user is on 3d object
+        const scrollableAncestor = getScrollParent(modelViewer)
+        let foundDrawerAncestor = false
+        for (const item of (scrollableAncestor?.classList ?? []).values()) {
+          if (item.includes('nftDrawer')) {
+            foundDrawerAncestor = true
+            break
+          }
+        }
+        if (foundDrawerAncestor) {
+          const scrollableAncestorElement = scrollableAncestor as HTMLElement
+          const mouseEnterListener = () => {
+            scrollableAncestorElement.style.overflowY = 'hidden'
+          }
+          const mouseLeaveListener = () => {
+            scrollableAncestorElement.style.overflowY = 'scroll'
+          }
+          modelViewer.addEventListener('mouseenter', mouseEnterListener)
+          modelViewer.addEventListener('mouseleave', mouseLeaveListener)
+
+          return () => {
+            modelViewer.removeEventListener('mouseenter', mouseEnterListener)
+            modelViewer.removeEventListener('mouseleave', mouseLeaveListener)
+          }
+        }
+      }
+    }
+  }, [isMobile, ref])
+
+  return (
+    <model-viewer
+      auto-rotate
+      camera-controls
+      ar-status='not-presenting'
+      ref={ref}
+      src={src}
+    />
+  )
+}

packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx

@@ -1,9 +1,9 @@
 import {
+  Suspense,
+  lazy,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
-  useRef,
   useState
 } from 'react'
 
@@ -41,22 +41,24 @@ import Toast from 'components/toast/Toast'
 import { ToastContext } from 'components/toast/ToastContext'
 import Tooltip from 'components/tooltip/Tooltip'
 import { ComponentPlacement, MountPlacement } from 'components/types'
-import { useScript } from 'hooks/useScript'
 import { MIN_COLLECTIBLES_TIER } from 'pages/profile-page/ProfilePageProvider'
 import { useIsMobile } from 'utils/clientUtil'
 import { copyToClipboard, getCopyableLink } from 'utils/clipboardUtil'
-import { getScrollParent } from 'utils/scrollParent'
 import zIndex from 'utils/zIndex'
 
 import { collectibleMessages } from './CollectiblesPage'
 import styles from './CollectiblesPage.module.css'
+
+const Collectible3D = lazy(() =>
+  import('./Collectible3D').then((module) => ({
+    default: module.Collectible3D
+  }))
+)
+
 const { setCollectible } = collectibleDetailsUIActions
 const { getCollectibleDetails, getCollectible } = collectibleDetailsUISelectors
 const getAccountUser = accountSelectors.getAccountUser
 
-const MODEL_VIEWER_SCRIPT_URL =
-  'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js'
-
 type CollectibleMediaProps = {
   collectible: Collectible
   isMuted: boolean
@@ -66,9 +68,6 @@ type CollectibleMediaProps = {
 
 const CollectibleMedia = (props: CollectibleMediaProps) => {
   const { collectible, isMuted, toggleMute, isMobile } = props
-  // if it becomes possible to render more than 1 collectible detail (model or mobile drawer), then
-  // update useScript hook to handle multiple in-flight requests
-  const scriptLoaded = useScript(MODEL_VIEWER_SCRIPT_URL, true)
 
   const { mediaType, imageUrl, videoUrl, gifUrl, threeDUrl } = collectible
 
@@ -89,49 +88,14 @@ const CollectibleMedia = (props: CollectibleMediaProps) => {
     [mediaType, imageUrl, setIsSvg]
   )
 
-  const ref3D = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (threeDUrl && ref3D?.current && scriptLoaded) {
-      ref3D.current.innerHTML = `<model-viewer src=${threeDUrl} auto-rotate camera-controls />`
-      const modelViewer = ref3D.current.children[0] as HTMLElement
-      modelViewer.style.minWidth = '50vw'
-      modelViewer.style.minHeight = '50vh'
-
-      if (isMobile) {
-        modelViewer.style.width = '100%'
-
-        // for 3d objects, disable parent nft drawer element scrollability if user is on 3d object
-        const scrollableAncestor = getScrollParent(modelViewer)
-        let foundDrawerAncestor = false
-        for (const item of (scrollableAncestor?.classList ?? []).values()) {
-          if (item.includes('nftDrawer')) {
-            foundDrawerAncestor = true
-            break
-          }
-        }
-        if (foundDrawerAncestor) {
-          const scrollableAncestorElement = scrollableAncestor as HTMLElement
-          const mouseEnterListener = () => {
-            scrollableAncestorElement.style.overflowY = 'hidden'
-          }
-          const mouseLeaveListener = () => {
-            scrollableAncestorElement.style.overflowY = 'scroll'
-          }
-          modelViewer.addEventListener('mouseenter', mouseEnterListener)
-          modelViewer.addEventListener('mouseleave', mouseLeaveListener)
-
-          return () => {
-            modelViewer.removeEventListener('mouseenter', mouseEnterListener)
-            modelViewer.removeEventListener('mouseleave', mouseLeaveListener)
-          }
-        }
-      }
-    }
-  }, [threeDUrl, ref3D, isMobile, scriptLoaded])
-
   return mediaType === CollectibleMediaType.THREE_D ? (
-    <div className={styles.detailsMediaWrapper} ref={ref3D} />
+    <div className={styles.detailsMediaWrapper}>
+      {threeDUrl ? (
+        <Suspense>
+          <Collectible3D isMobile={isMobile} src={threeDUrl} />
+        </Suspense>
+      ) : null}
+    </div>
   ) : mediaType === CollectibleMediaType.GIF ? (
     <div className={styles.detailsMediaWrapper}>
       <img src={gifUrl!} alt='Collectible' />