uiuxphil Posts - Answer Overflow

uiuxphil

•Created by uiuxphil on 8/7/2023 in #questions

Video tag doesn't show up on iPhone.

Hey, so, yeah like the title says.. Video doesn't show. At all. You can see it on https://www.seve17.co on your iPhone. I tried with video tag and div with a dangerouslySetInnerHTML. Both of them don't work.

        <div
          dangerouslySetInnerHTML={{
            __html: `<video
            autoplay loop muted playsinline
            preload="auto"
            height="751px"
            width="100vw"
            ref={${fullScreenVideoRef}}
            class="h-[751px] w-screen"
          >
            <source src=${"/assets/videos/Seventeen.mp4"} type="video/mp4" />
            Your browser does not support the video tag.
          </video>`,
          }}
        ></div>
        <video
          autoPlay
          preload="auto"
          height="751px"
          width="100vw"
          loop
          muted
          playsInline
          ref={fullScreenVideoRef}
          className={"h-[751px] w-screen"}
        >
          <source src="/assets/videos/Seventeen.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

        <div
          dangerouslySetInnerHTML={{
            __html: `<video
            autoplay loop muted playsinline
            preload="auto"
            height="751px"
            width="100vw"
            ref={${fullScreenVideoRef}}
            class="h-[751px] w-screen"
          >
            <source src=${"/assets/videos/Seventeen.mp4"} type="video/mp4" />
            Your browser does not support the video tag.
          </video>`,
          }}
        ></div>
        <video
          autoPlay
          preload="auto"
          height="751px"
          width="100vw"
          loop
          muted
          playsInline
          ref={fullScreenVideoRef}
          className={"h-[751px] w-screen"}
        >
          <source src="/assets/videos/Seventeen.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

any ideas?

2 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 5/24/2023 in #questions

turbo clerk auth not working

Just cloned repo from official clerk-turbo template. My app runs just fine, untill I try to log in. I've changes oauth strategy to google, and it works.. kinda. It loads the browser, lets me provide all google credentials, lets me submit, but does not login. Just nothing. No errors, nothing. all I did was change strategy to google, my signInWithOauth looks like:

import { useOAuth } from "@clerk/clerk-expo";
import React from "react";
import { Button, View } from "react-native";
import { useWarmUpBrowser } from "../hooks/useWarmUpBrowser";

const SignInWithOAuth = () => {
  useWarmUpBrowser();

  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });

  const handleSignInWithGoogle = React.useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } =
        await startOAuthFlow();
      if (createdSessionId) {
        setActive({ session: createdSessionId });
      } else {
        // Modify this code to use signIn or signUp to set this missing requirements you set in your dashboard.
        console.log(signIn);
        console.log(signUp);

        throw new Error(
          "There are unmet requirements, modifiy this else to handle them",
        );
      }
    } catch (err) {
      console.log(JSON.stringify(err, null, 2));
      console.log("error signing in", err);
    }
  }, []);

  return (
    <View className="rounded-lg border-2 border-gray-500 p-4">
      <Button title="Sign in with Google" onPress={handleSignInWithGoogle} />
    </View>
  );
};

export default SignInWithOAuth;

import { useOAuth } from "@clerk/clerk-expo";
import React from "react";
import { Button, View } from "react-native";
import { useWarmUpBrowser } from "../hooks/useWarmUpBrowser";

const SignInWithOAuth = () => {
  useWarmUpBrowser();

  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });

  const handleSignInWithGoogle = React.useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } =
        await startOAuthFlow();
      if (createdSessionId) {
        setActive({ session: createdSessionId });
      } else {
        // Modify this code to use signIn or signUp to set this missing requirements you set in your dashboard.
        console.log(signIn);
        console.log(signUp);

        throw new Error(
          "There are unmet requirements, modifiy this else to handle them",
        );
      }
    } catch (err) {
      console.log(JSON.stringify(err, null, 2));
      console.log("error signing in", err);
    }
  }, []);

  return (
    <View className="rounded-lg border-2 border-gray-500 p-4">
      <Button title="Sign in with Google" onPress={handleSignInWithGoogle} />
    </View>
  );
};

export default SignInWithOAuth;

Also I've noticed that SetActive, SignIn and SignUp are of type any. Should it be that way?

22 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 5/22/2023 in #questions

ultra noob eslint question

I can't disable my eslint no matter what. Husky still throws an error as it runs pre commit Line I want to disable:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const GraphQLUpload = require('graphql-upload/GraphQLUpload.js');

// eslint-disable-next-line @typescript-eslint/no-var-requires
const GraphQLUpload = require('graphql-upload/GraphQLUpload.js');

Husky error:

error  Require statement not part of import statement  @typescript-eslint/no-var-require

error  Require statement not part of import statement  @typescript-eslint/no-var-require

Husky script:

"pre-commit": "lint-staged",

"pre-commit": "lint-staged",

4 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 5/20/2023 in #questions

Accessing t3 turbo envs inside expo's app.config

3 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 4/11/2023 in #questions

Error validating datasource `db`: the URL must start with the protocol `file:`

error when I run prisma db pull:

Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Error validating datasource `db`: the URL must start with the protocol `file:`.
  -->  schema.prisma:10
   | 
 9 |     provider = "sqlite"
10 |     url      = env("DATABASE_URL")
   | 

Validation Error Count: 1
[Context: getConfig]

Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Error validating datasource `db`: the URL must start with the protocol `file:`.
  -->  schema.prisma:10
   | 
 9 |     provider = "sqlite"
10 |     url      = env("DATABASE_URL")
   | 

Validation Error Count: 1
[Context: getConfig]

I've seen people on github with the same issue and the solution was to change their .env file from DATABASE_UTL="LIKE_THIS" to DATABASE_URL=LIKE_THIS but I didnt use quotes in my .env in the first place. I also run prisma generate before running db pull any ideas whats wrong?

13 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 4/10/2023 in #questions

Can't import defaultTheme from tailwind.

I wanna refacor my entire app from daisyUI to shadcn UI but I can't really change anything in tailwind config config:

const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

issue:

'tailwind.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

'tailwind.config.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

when I change to import { } from ' ' tailwind doesn't work at all. adding export { } doesnt work -- my tailwind still doesn't work. body with bg-black doesnt change body's background to black help :P

32 replies

TTCTheo's Typesafe Cult

•Created by uiuxphil on 10/30/2022 in #questions

RTK Query (with no redux) or React Query?

I'm a noob, obviously, but a bunch of my friend called me out for making api requests in useEffect and they recommended me to use RTK query instead. The problem is that I'm not planing on using redux in my project, since its way too small for that. So... should I go with RTK query (with no redux) or with React Query instead? Just please elaborate a bit because I want to understand why, not just blindly follow. Huge thanks <33

11 replies

Gaming

Programming