An error occured while uploading your video. Please check the CLI logs for more info.

[Leviathan91]

Using next-video BackgroundPlayer, I get this:

When the component loads(error visible for maybe 0.2s):

Right after :

But I cannot find any bugs in the console/in my MUX Dashboard. Where to look for it?

Also, a bit confused by the message. Why is it trying to upload something?

Relevant code:

     <BackgroundVideoPlayer
                    src={fullMuxUrl}
                    height={260}
                    width={260}
                    className={styles.video}
       />

and

 const muxVideoBackground =
 watchData.attributes.mux_video?.data?.attributes?.playback_id;
 fullMuxUrl = `https://stream.mux.com/${muxVideoBackground}.m3u8`;

[luwes]

could you provide the rest of the app code?

normally if the player only is used there should be no Alert message. see an example here:
https://github.com/muxinc/next-video/blob/main/examples/default-provider/app/(default)/player-only/page.tsx

yes, the uploading is a feature of next-video. it includes a local upload workflow.
if you don't need that just use the player-only imports:
https://github.com/muxinc/next-video#player-only-demo

[Leviathan91]

Thanks for the quick reply,
here is the entire code. It is still WIP.

'use client';

import type { Watch as WatchType } from '@/types/api/Watch';
import WatchNew from '../WatchNew';
import BackgroundVideoPlayer from 'next-video/background-video';
import styles from './Configurator.module.css';
import { getStrapiMedia } from '@/app/utils/api-helpers';
import { ChevronLeft, ChevronRight } from '@/app/icons';
import clsx from 'clsx';
import Link from 'next/link';

import {
  BlocksRenderer,
  type BlocksContent,
} from '@strapi/blocks-react-renderer';

type ConfiguratorProps = {
  watchData: WatchType;
};
{
  /* ToDo MUX Video player integeration */
}
{
  /* ToDo if still needed util function to map img src to cms url */
}

const Configurator = ({ watchData }: ConfiguratorProps) => {
  console.log('watchData', watchData);
  const {
    Name: name,
    Slug: slug,
    Description: description,
  } = watchData.attributes;
  console.log('??', watchData.attributes.Name);

  const backgroudVideoSrcPath =
    watchData.attributes.video?.data?.attributes?.url;

  const videoBackground = getStrapiMedia(backgroudVideoSrcPath);

  let fullMuxUrl = '';
  const muxVideoBackground =
    watchData.attributes.mux_video?.data?.attributes?.playback_id;
  fullMuxUrl = `https://stream.mux.com/${muxVideoBackground}.m3u8`;

  return (
    <>
      <h5>Hallo Configurator</h5>

      <div className={styles.outerContainer}>
        <div className={styles.mainGrid}>
          <div className={styles.leftSide}>
            <Link
              className={clsx(styles.left, styles.link)}
              href={`/watches/${watchData.attributes.prevWatch.Slug}`}
              scroll={false}
            >
              <ChevronLeft />
            </Link>
            <div className={styles.middle}>
              <div className={styles.watchWrapper}>
                <WatchNew />
              </div>
              <div className={styles.videoWrapper}>
                {muxVideoBackground ? (
                  <BackgroundVideoPlayer
                    src={fullMuxUrl}
                    height={260}
                    width={260}
                    className={styles.video}
                    disableTracking
                  />
                ) : (
                  // <BackgroundVideoPlayer
                  //   src={videoBackground}
                  //   height={260}
                  //   width={260}
                  //   className={styles.video}
                  // />
                  <BackgroundVideoPlayer
                    src={videoBackground}
                    height={260}
                    width={260}
                    className={styles.video}
                    disableTracking
                  />
                )}
              </div>
            </div>

            <Link
              className={clsx(styles.right, styles.link)}
              href={`/watches/${watchData.attributes.nextWatch.Slug}`}
              scroll={false}
            >
              <ChevronRight />
            </Link>
          </div>
          <div className={styles.rightSide}>
            <div className={styles.headingContainer}>
              <h2>{name}</h2>
              <div className={styles.descriptionWrapper}>
                <BlocksRenderer content={description} />
              </div>
            </div>
            <div className={styles.otherWatchesContainer}>
              {/* {watchData.attributes.allWatches.map((watch) => {
                return (
                  <Link href={`/watches/${watch.Slug}`} key={watch.Slug}>
                    <Image src={watch.thumbnailUrl} alt={'watch thumbnail'} />
                  </Link>
                );
              })} */}
              <pre>
                {(JSON.stringify(watchData.attributes.allWatches), null, 2)}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Configurator;

[Leviathan91]

Thought about it in the shower. I think the uploading feature is probably bugged because I am testing it on localhost and using the strapi mux-video uploade. But for MUX/localhost to work i used smee.io as proxy to pass requests btwn mux and my localhost.
But that was only active for the uploading part in my strapi UI,
after that I turned it off. Could that be the issue?

[luwes]

you're importing the one from next-video/background-video

you need https://github.com/muxinc/next-video#player-only-demo
import BackgroundPlayer from 'next-video/background-player';