Nossie Posts - Answer Overflow

Nossie

•Created by Nossie on 9/11/2024 in #❓・help

Youtube SDK

So i want to show youtube videos on a page , so im loading in the sdk with a plugin like this

// plugins/youtube.client.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      loadYouTubeAPI: () => {
        return new Promise<void>((resolve) => {
          if (!import.meta.client) return resolve(); // Ensure this runs only on the client-side

          if (window.YT && window.YT.Player) {
            resolve(); // If already loaded, resolve immediately
          } else {
            const scriptTag = document.createElement("script");
            scriptTag.src = "https://www.youtube.com/iframe_api";
            document.head.appendChild(scriptTag);

            window.onYouTubeIframeAPIReady = () => {
              resolve(); // Resolve when the API is fully loaded
            };
          }
        });
      },
    },
  };
});

// plugins/youtube.client.ts

export default defineNuxtPlugin(() => {
  return {
    provide: {
      loadYouTubeAPI: () => {
        return new Promise<void>((resolve) => {
          if (!import.meta.client) return resolve(); // Ensure this runs only on the client-side

          if (window.YT && window.YT.Player) {
            resolve(); // If already loaded, resolve immediately
          } else {
            const scriptTag = document.createElement("script");
            scriptTag.src = "https://www.youtube.com/iframe_api";
            document.head.appendChild(scriptTag);

            window.onYouTubeIframeAPIReady = () => {
              resolve(); // Resolve when the API is fully loaded
            };
          }
        });
      },
    },
  };
});

and in my component i do this :

// Props to accept videoId
const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
});

// Create a ref for the YouTube player element
const playerElement = ref(null);
let playerInstance = null;

onMounted(async () => {
  const { $loadYouTubeAPI } = useNuxtApp();

  await $loadYouTubeAPI();

  // Use nextTick to ensure DOM is updated
  await nextTick();

  if (playerElement.value) {
    // Initialize YouTube Player
    playerInstance = new YT.Player(playerElement.value, {
      height: "390",
      width: "640",
      videoId: props.videoId,
      events: {
        onReady: (event) => {
          event.target.playVideo();
        },
      },
    });
  }
});

// Cleanup the player when the component is unmounted
onBeforeUnmount(() => {
  if (playerInstance) {
    playerInstance.destroy();
  }
});

// Props to accept videoId
const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
});

// Create a ref for the YouTube player element
const playerElement = ref(null);
let playerInstance = null;

onMounted(async () => {
  const { $loadYouTubeAPI } = useNuxtApp();

  await $loadYouTubeAPI();

  // Use nextTick to ensure DOM is updated
  await nextTick();

  if (playerElement.value) {
    // Initialize YouTube Player
    playerInstance = new YT.Player(playerElement.value, {
      height: "390",
      width: "640",
      videoId: props.videoId,
      events: {
        onReady: (event) => {
          event.target.playVideo();
        },
      },
    });
  }
});

// Cleanup the player when the component is unmounted
onBeforeUnmount(() => {
  if (playerInstance) {
    playerInstance.destroy();
  }
});

this works when you only have 1 video, but if you have multiple it only loads the last on , im getting confused does somebody have some help ?

26 replies

NNuxt

•Created by Nossie on 7/9/2024 in #❓・help

Nuxt 3 + GSAP

Ok so im not having any issues getting GSAP to work with NUXT3 but more like can someone help me in the right direction My template =

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

 <div class="grid">
        <template v-for="teaser in episodes" :key="teaser.name">
          <Teaser v-bind="teaser" class="teaser" />
        </template>
      </div>

My script part =

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

onMounted(() => {
  ctx = gsap.context((self) => {
    if (self.selector) {
      const teasers = self.selector('.teaser');
      ScrollTrigger.batch(teasers, {
        onEnter: (batch) =>
          gsap.to(batch, {
            filter: 'blur(0px)',
            autoAlpha: 1,
            y: 0,
            stagger: {
              each: 0.1,
              onComplete() {
                console.log(this.targets[0]);
              },
            },
          }),
      });
    }
  }, main.value); // <- Scope!
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});

What i want to do is trigger a prop inside the teaser when each indivudual teaser has finished the animation ( so in stagger you will see the onComplete this works ) but i cant figure out how to change a prop of an element when the animation is completed for the specfic item does anyone knows ?

2 replies

NNuxt

•Created by Nossie on 6/26/2024 in #❓・help

JsonToken

Oke so im trying to implement a video player that can only be accessed when having a jsonwebtoken currently i have this code ( and its working )

const payload:JWTPayload = {
  "iat" : Math.floor(Date.now() / 1000),
  "sub": id as string,
  "iss": 'company-name',
}

const secret = 'jwt-secret-overhere';
const alg = 'HS256';

key.value = new TextEncoder().encode(secret)

token.value =  await new jose.SignJWT(payload)
    .setProtectedHeader({ alg })
    .setIssuedAt()
    .sign(key.value)



onMounted(()=> {
  if(import.meta.client) {
    const playerContainer = document.body.querySelector('.player') as HTMLElement;
    if(playerContainer) {
    const player = new $Player(playerContainer, playerConfig);

        player.loadStream(token.value, streamConfiguration);

    }

  }
})

const payload:JWTPayload = {
  "iat" : Math.floor(Date.now() / 1000),
  "sub": id as string,
  "iss": 'company-name',
}

const secret = 'jwt-secret-overhere';
const alg = 'HS256';

key.value = new TextEncoder().encode(secret)

token.value =  await new jose.SignJWT(payload)
    .setProtectedHeader({ alg })
    .setIssuedAt()
    .sign(key.value)



onMounted(()=> {
  if(import.meta.client) {
    const playerContainer = document.body.querySelector('.player') as HTMLElement;
    if(playerContainer) {
    const player = new $Player(playerContainer, playerConfig);

        player.loadStream(token.value, streamConfiguration);

    }

  }
})

The only thing is i dont want the secret of my jjwt in side client, i already tried to move this to the env file , but for some reason i doesnt work anymore , ( if i log the config.jwtSecret from env) i see the secret in terminal. but the whole signing doestn work anymore does someone has a solution to help me out putting my secrete not client side

2 replies

NNuxt

•Created by Nossie on 6/20/2023 in #❓・help

Nuxt 3 Layers Broken ?

Is it me or is the Layer option ( extend) broken in nuxt ? everything works when running localy but when trying to run a build for production it breaks even on a simple extend of 1 component BTW this is only when using a extend from a github repo giving the following error

 ERROR  [vite]: Rollup failed to resolve import "vue/server-renderer" from "/Users/***/.cache/c12/***/components/Button.vue". 1:28:38 PM
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

 ERROR  [vite]: Rollup failed to resolve import "vue/server-renderer" from "/Users/***/.cache/c12/***/components/Button.vue". 1:28:38 PM
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

12 replies

NNuxt

•Created by Nossie on 6/12/2023 in #❓・help

External Components

So im trying to build a platform(nuxt 3) with a base template that can use external components ( build in and with nuxt 3) , from what i read it the documentation you can set a different folder to import component like :

 components: [
        { path: '~/node_modules/special', prefix: 'Special' },
        '~/components'
    ],

 components: [
        { path: '~/node_modules/special', prefix: 'Special' },
        '~/components'
    ],

this works like it should, the only thing is that if you use refs inside the script part in those components that are loaded from somewhere else it gived a 500 error saying ref is not defined. is there a way to get this working without importing ref from vue ? in components that are auto imported because of the path in nuxt.config ? also this is only happening when the folder is in node_modules

15 replies

Gaming

Programming