Why import ui from '@oplayer/ui' could not Found in Next.js App

[heirro]

Hi Dev,

I try it developing in Next.js App, but i got issue about in when import module @oplayer/ui.
Can you explain, or give some examples. By the way, i interested for your player, maybe will build web/mobile app using this Player, since the UI and look fresh and modern XD.

Thank you!

[shiyiya]

[heirro]

Hmm i don't understand, since i just following our Documentation add package like pnpm add @oplayer/ui.

Can explain or give example?

[shiyiya]

Please provide a minimal repository on GitHub.

[heirro]

https://github.com/heirro/oplayer-next

This my example app using next.js and live m3u8

[shiyiya]

source type is Source

[heirro]

Then i didn't show the video.

'use client'

import Player from '@oplayer/react'
import ui from '@oplayer/ui'
import hls from '@oplayer/hls'
import { useEffect, useState, useRef } from 'react'

const plugins = [
  ui({
    pictureInPicture: true,
    slideToSeek: 'always',
    screenshot: true,
    keyboard: { global: true }
  }),
  hls()
]

export default function Home() {
  const [sources, setSources] = useState<string | null>(null);
  const player = useRef<Player>(null);
 
  useEffect(() => {
    // Fetch the source URL for the player
    fetch(`master.m3u8`)
      .then((response) => {
        if (response.ok) {
          return response.url;
        }
        throw new Error('Failed to fetch source');
      })
      .then((url) => {
        setSources(url);
      })
      .catch((error) => {
        console.error('Error fetching source:', error);
      });
  }, []);

  return (
    <>
    <Player
        plugins={plugins}
        ref={player}
        autoplay={true}
        Source={sources}
      />
    </>
  );
}

[shiyiya]

1. UI TypeError fixed in @oplayer/[email protected]
2. React TypeError fixed in @oplayer/[email protected]
3. Disable react strict mode

pnpm i @oplayer/[email protected] @oplayer/[email protected]

'use client'

import ReactOPlayer from '@oplayer/react'
import ui from '@oplayer/ui'
import Player, { Source } from '@oplayer/core'

import hls from '@oplayer/hls'
import { useEffect, useState, useRef } from 'react'

const plugins = [
  ui({
    theme: {
      controller: {
        slideToSeek: 'always'
      }
    },
    pictureInPicture: false,
    screenshot: false,
    keyboard: { global: true }
  }),
  hls()
]

export default function Home() {
  const [source, setSource] = useState<Promise<Source>>()
  const player = useRef<Player>(null)

  useEffect(() => {
    setSource(
      fetch('111').then(() => ({
        src: 'https://streamweb.qdei.co:8443/ae96f3d3-e229-4b29-b9f3-68973140b935/master.m3u8'
      }))
    )
  }, [])

  return (
    <>
      <ReactOPlayer plugins={plugins} ref={player} autoplay={false} source={source} />
    </>
  )
}

@heirro

[heirro]

Oh no, i still encounter issues with different things. u,u

[shiyiya]

code？

[heirro]

Same as the example you provided.

[shiyiya]

pnpm i @oplayer/[email protected]

[heirro]

BIG THANKS! ❤️‍🔥❤️‍🔥❤️‍🔥