diff --git a/libs/orchestra/index.js b/libs/orchestra/index.js index 93286393..bd2885e2 100644 --- a/libs/orchestra/index.js +++ b/libs/orchestra/index.js @@ -1,77 +1,34 @@ -import { del, get, set } from 'idb-keyval' -// import { Studio } from 'libs/theatre/studio' import { broadcast } from 'libs/zustand-broadcast' -import { createContext, useContext, useEffect } from 'react' +import { useEffect, useState } from 'react' +import { create } from 'zustand' import { createJSONStorage, persist } from 'zustand/middleware' -import { shallow } from 'zustand/shallow' -import { createWithEqualityFn } from 'zustand/traditional' import s from './orchestra.module.scss' // avoid to display debug tools on orchestra page -const useInternalStore = createWithEqualityFn( - (set) => ({ - isVisible: true, - setIsVisible: (isVisible) => set({ isVisible }), - }), - shallow, -) - -// https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md -const INDEXEDDB_STORAGE = { - getItem: async (name) => { - // console.log(name, 'has been retrieved') - return (await get(name)) || null - }, - setItem: async (name, value) => { - // console.log(name, 'with value', value, 'has been saved') - await set(name, value) - }, - removeItem: async (name) => { - // console.log(name, 'has been deleted') - await del(name) - }, -} +let isOrchestraPage = false -export const useOrchestraStore = createWithEqualityFn( +const useOrchestraStore = create( persist(() => ({}), { name: 'orchestra', - storage: createJSONStorage(() => INDEXEDDB_STORAGE), + storage: createJSONStorage(() => localStorage), }), - shallow, ) broadcast(useOrchestraStore, 'orchestra') -export const OrchestraContext = createContext({}) - export function useOrchestra() { - return useContext(OrchestraContext) -} + const values = useOrchestraStore() -// add around the app -export function Orchestra({ children }) { - const isVisible = useInternalStore(({ isVisible }) => isVisible) + const [isVisible, setIsVisible] = useState(false) - const value = useOrchestraStore((value) => value, shallow) + useEffect(() => { + setIsVisible(!isOrchestraPage) + }, []) - return ( - <> - - {children(isVisible ? value : {})} - - > - ) + return isVisible && values } export function OrchestraToggle({ icon, title, id }) { - // useEffect(() => { - // useOrchestraStore.setState((state) => { - // const clone = { ...state } - // clone[id] = defaultValue - // return clone - // }) - // }, [defaultValue]) - return ( { @@ -90,11 +47,7 @@ export function OrchestraToggle({ icon, title, id }) { // to be added to debug pages export function OrchestraPage({ children }) { - useEffect(() => { - useInternalStore.setState(() => ({ - isVisible: false, - })) - }, []) + isOrchestraPage = true return {children} } diff --git a/libs/theatre/studio/index.js b/libs/theatre/studio/index.js index 25556f17..6bda4cfd 100644 --- a/libs/theatre/studio/index.js +++ b/libs/theatre/studio/index.js @@ -21,7 +21,7 @@ export function Studio() { initialized = true } - }, [studio, rafDriver]) + }, [rafDriver]) useEffect(() => { studio.ui.restore() @@ -32,33 +32,31 @@ export function Studio() { }, []) return ( - <> - - { - // setVisible(!visible) - const id = project.address.projectId - const json = studio.createContentOfSaveFile(id) - const file = new File( - [jsonminify(JSON.stringify(json, null, 2))], - 'config.json', - { - type: 'application/json', - }, - ) - const url = URL.createObjectURL(file) - const a = document.createElement('a') - a.href = url - // create title using id and date up to seconds - const title = `${id}-${new Date().toISOString().slice(0, 19)}` - a.download = title - a.click() - }} - className={s.save} - > - 💾 - - - > + + { + // setVisible(!visible) + const id = project.address.projectId + const json = studio.createContentOfSaveFile(id) + const file = new File( + [jsonminify(JSON.stringify(json, null, 2))], + 'config.json', + { + type: 'application/json', + }, + ) + const url = URL.createObjectURL(file) + const a = document.createElement('a') + a.href = url + // create title using id and date up to seconds + const title = `${id}-${new Date().toISOString().slice(0, 19)}` + a.download = title + a.click() + }} + className={s.save} + > + 💾 + + ) } diff --git a/next.config.js b/next.config.js index 330c1af0..aff79c84 100644 --- a/next.config.js +++ b/next.config.js @@ -30,7 +30,7 @@ const nextConfig = { }, images: { // ADD in case you need to import SVGs in next/image component - // dangerouslyAllowSVG: true, + dangerouslyAllowSVG: true, // contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", remotePatterns: [ { diff --git a/pages/_app.js b/pages/_app.js index 5bd96b37..70f441be 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -5,7 +5,7 @@ import { DeviceDetectionProvider } from 'components/device-detection' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { GTM_ID } from 'libs/analytics' -import { Orchestra } from 'libs/orchestra' +import { useOrchestra } from 'libs/orchestra' import { useStore } from 'libs/store' import { ProjectProvider, RafDriverProvider } from 'libs/theatre' import dynamic from 'next/dynamic' @@ -37,7 +37,7 @@ if (typeof window !== 'undefined') { gsap.defaults({ ease: 'none' }) gsap.registerPlugin(ScrollTrigger) - ScrollTrigger.clearScrollMemory('manual') + ScrollTrigger.clearScrollMemory(window.history.scrollRestoration) ScrollTrigger.defaults({ markers: process.env.NODE_ENV === 'development' }) // merge rafs @@ -62,6 +62,8 @@ function MyApp({ Component, pageProps }) { } }, [lenis, isNavOpened]) + const { stats, grid, studio, dev } = useOrchestra() + return ( <> {/* Google Tag Manager - Global base code */} @@ -86,28 +88,19 @@ function MyApp({ Component, pageProps }) { )} - - {( - { studio, grid, stats, dev }, // check _debug/orchestra page to match ids - ) => ( - - - - {studio && } - {stats && } - {grid && } - {typeof document !== 'undefined' && - document.documentElement.classList.toggle( - 'dev', - Boolean(dev), - )} - - - )} - + + + + {studio && } + {stats && } + {grid && } + {typeof document !== 'undefined' && + document.documentElement.classList.toggle('dev', Boolean(dev))} + + > )