#Need help with asset file from windows path

6 messages · Page 1 of 1 (latest)

rigid umbra
#

I am currently making a karaoke player app where I have this main.ts:

import { BaseDirectory, resourceDir } from '@tauri-apps/api/path';
import { exists, mkdir, readDir } from '@tauri-apps/plugin-fs';

export async function loadBackgrounds() {
  const dir = await readDir('backgrounds', { baseDir: BaseDirectory.Resource });
  const resDir = await resourceDir();
  return dir.map(file => `${resDir}/backgrounds/${file.name}`);
}

And this is in my SongVideoBackground.tsx:

import "./SongVideoBackground.scss";
import { convertFileSrc } from "@tauri-apps/api/core";

interface SongVideoBackgroundProps {
  backgroundFile: string;
}

export default function SongVideoBackground({
  backgroundFile,
}: SongVideoBackgroundProps) {

  console.log(convertFileSrc(backgroundFile));

  return (
    <div className="song-video-background">
      <video
        src={convertFileSrc(backgroundFile)}
        autoPlay
        loop
        muted
        playsInline
      />
    </div>
  );
}

However, converting this path that I currently have:
D:\Coding\Typescript\karaoke-player\src-tauri\target\debug\backgrounds\video.mp4
into:
http://asset.localhost/D%3A%5CCoding%5CTypescript%5Ckaraoke-player%5Csrc-tauri%5Ctarget%5Cdebug%2Fbackgrounds%2Fvideo.mp4
will not work however despite I did it correctly.

Just to make sure the bg is working, I did place a dummy mp4 link on the internet hardcoded and it worked. What went wrong though?

#

Already have this:

{
      "identifier": "fs:scope",
      "allow": [{ "path": " $RESOURCE/**/*" }]
    }

and read-dirs so no errors printed on console about permission

#

Or if there's a better way to handle a 500mb video file, would be appreciated too

limpid veldt
rigid umbra
#

Yeah I already figured out yesterday lol

limpid veldt
#

coolio