Casacobra Comments - Answer Overflow

Casacobra

Posts Comments

SSolidJS

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

yes, this actually fixed the issue, thank you @Madaxen86

12 replies

SSolidJS

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

You'll notice if you remove the controls, it won't render in safari if inside the Suspense, then try it outside suspense without controls and it will render on safari

12 replies

SSolidJS

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

Hey Max yeah the main concern is I don’t want controls to be set to true I need it without controls and safari policy or iOS policy is you can play a video automatically as long as it’s muted

12 replies

SSolidJS

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

@Madaxen86 yeah unfortunately that didn't do anything 😦

12 replies

SSolidJS

•Created by Casacobra on 10/1/2024 in #support

Safari Video Not AutoPlaying when inside a Suspense

Sorry just got back from work, will try this now and keep you updated! Thanks 😄

12 replies

SSolidJS

•Created by Casacobra on 7/26/2024 in #support

Best approach for using createResource

@mdynnl I think I know the issue... thanks for getting back to me! I have the following app.tsx

export default function App() {
  return (
    <>
      <Router
        root={(props) => (
          <>
            <MetaProvider>
              <Title>Supaflags</Title>
              <ColorModeScript storageType={storageManager.type} />
              <ColorModeProvider storageManager={storageManager}>
                <AuthProvider>
                  <FlagsProvider>
                    <AuthGuard>{props.children}</AuthGuard>
                  </FlagsProvider>
                </AuthProvider>
              </ColorModeProvider>
            </MetaProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagDetails} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
        <FileRoutes />
      </Router>
      <Toaster />
    </>
  )
}

export default function App() {
  return (
    <>
      <Router
        root={(props) => (
          <>
            <MetaProvider>
              <Title>Supaflags</Title>
              <ColorModeScript storageType={storageManager.type} />
              <ColorModeProvider storageManager={storageManager}>
                <AuthProvider>
                  <FlagsProvider>
                    <AuthGuard>{props.children}</AuthGuard>
                  </FlagsProvider>
                </AuthProvider>
              </ColorModeProvider>
            </MetaProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagDetails} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
        <FileRoutes />
      </Router>
      <Toaster />
    </>
  )
}

Then I have an AuthGuard that basically checks whether you have an auth session or not. If you visit / and have no session it redirects you to the login page auth/login.tsx I think the problem here is, it automatically runs createResource on the / page first then directs you to auth/login.tsx when you then log in it then directs you back to / which runs this twice. This is the AuthGuard page:

export default function AuthGuard(props: ComponentProps<"div">) {
  const navigate = useNavigate()
  const location = useLocation<LocationState>()
  const rootPathName = "/"
  const loginPathName = "/auth/signin"
  const [isLoading, setIsLoading] = createSignal(false)
  const [initialPath, setInitialPath] = createSignal(location.pathname)

  const checkSession = async () => {
    setIsLoading(true)
    const { data } = await supabase.auth.getSession()
    const session = data?.session

    if (!session) {
      if (location.pathname !== loginPathName) {
        setInitialPath(location.pathname)
        setSession(null)
      }
      navigate(loginPathName, { replace: true, state: { from: initialPath() } })
    } else {
      const redirectTo = location.state?.from || rootPathName
      if (location.pathname === loginPathName) {
        navigate(redirectTo, { replace: true })
      }
    }

    setIsLoading(false)
  }

  checkSession()

  return (
    <Show when={isLoading()} fallback={<>{props.children}</>}>
      <LoadingLayout />
    </Show>
  )
}

export default function AuthGuard(props: ComponentProps<"div">) {
  const navigate = useNavigate()
  const location = useLocation<LocationState>()
  const rootPathName = "/"
  const loginPathName = "/auth/signin"
  const [isLoading, setIsLoading] = createSignal(false)
  const [initialPath, setInitialPath] = createSignal(location.pathname)

  const checkSession = async () => {
    setIsLoading(true)
    const { data } = await supabase.auth.getSession()
    const session = data?.session

    if (!session) {
      if (location.pathname !== loginPathName) {
        setInitialPath(location.pathname)
        setSession(null)
      }
      navigate(loginPathName, { replace: true, state: { from: initialPath() } })
    } else {
      const redirectTo = location.state?.from || rootPathName
      if (location.pathname === loginPathName) {
        navigate(redirectTo, { replace: true })
      }
    }

    setIsLoading(false)
  }

  checkSession()

  return (
    <Show when={isLoading()} fallback={<>{props.children}</>}>
      <LoadingLayout />
    </Show>
  )
}

I then made the index page in app.tsx lazy load the component for the index page that basically fetches the resource, this definitely doesn't run the fetcher twice and fixes the issue, but its not what i wanted. Do you see what the issue could be here by any chance?

3 replies

SSolidJS

•Created by Casacobra on 7/20/2024 in #support

Outlet issue on routes

Thanks guys, I fixed it I was basically using an older version of solid-start 😄

6 replies

SSolidJS

•Created by Casacobra on 5/21/2023 in #support