How can i clone the project and work on the frontend design

[AliKadd]

i did the installation but i wasn't able to find the source code, so now im trying to run the frontend code but i keep getting this error when i run: npm run build

Cannot read properties of undefined (reading 'hook')

PS: im using ubuntu 22.04 LTS

[jb-alvarado]

Hello @AliKadd, the frontend is git submodule and the original repo is here.

But I recommend to put not to much effort in it. At the moment I'm rewriting the code, based on NuxtJS 3 and boostrap 5. The old code is then useless.

[jb-alvarado]

Hm, yes that is right. For a qick hack, you can add to the nuxt.config.js after server: {...}:

    proxy: {
        '/api': { target: 'http://127.0.0.1:8787' },
        '/auth': { target: 'http://127.0.0.1:8787' }
    },

and change axios: {...}:

    axios: {
        proxy: true
    },

For production this needs to be removed again.

[AliKadd]

@jb-alvarado thank you so much for your help, its working now except stream in player is not working, even playing the videos that im uploading
im getting this error in console:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
Object { code: 4, message: "The media could not be loaded, either because the server or network failed or because the format is not supported." }
​
code: 4
​
message: "The media could not be loaded, either because the server or network failed or because the format is not supported."
​
: Object { code: 0, MEDIA_ERR_CUSTOM: 0, MEDIA_ERR_ABORTED: 1, … }

[AliKadd]

when i open the web from 127.0.0.1:8787 im able to play the video and the stream is playing but the stream only show black screen, but when i run the frontend separately and open 127.0.0.1:3000 im getting the above errors

[jb-alvarado]

For previewing files, you need to make a symlink from your storage folder to ./static dir. For streaming preview, maybe you need to make also a proxy, like for the API.

[imaginatech]

Hello, I know this topic is old, but I have a question and would really like some help, could you give an example of this symbolic link process, I can't find the folder with the files to carry out the procedure

[AliKadd]

thank you so much for your help, i have one more issue im running now the ffplayout master project on windows, but when calling APIs from frontend im getting internal server error when getting config, and all APIs are returning "Error in getting config!".. if you can please help with this thank you

[AliKadd]

for the videos i have everything linked, i created all folders similar to installation. The thing is when i open a video link in a new tab in the browser the video is working, but inside the project when the video url is called by the preview player its returning 400 Bad Request and the response says "The segment contained the wrapped invalid character"

[jb-alvarado]

Sorry, at the moment I have no idea why this is happen. Maybe in the new version this problem not exists.

[AliKadd]

i was able to find the problem, the url for the videos are encoded when they are set for the video element so if i change it manually to a decoded url its working normally

[jb-alvarado]

Ah good! If you want to change this in the code, it should be here: https://github.com/ffplayout/ffplayout-frontend/blob/72ebb909a9c035a301c8ebf2e7f036756e9d129f/pages/player.vue#L664

[AliKadd]

thank you so much for your help!

[AliKadd]

hey! will you make a stable release for the ffplayout-frontend any time soon?

[jb-alvarado]

The frontend repo is already up to date. But because I use now bootstrap 5.3, which is still in alpha state, it takes a bit time until I make a stable release. A beta release I can make, and you can also use the frontend code already in your dev environment.

[AliKadd]

hey! i need your help please, im trying to add a new table to the database, i couldnt figure out a way to add new one to the existing database... so i added the table to the query in create_schema function, deleted the old database and initialized the ffpapi again, restart ffpapi service, its running successfully and i get Database created, i create new user and success as well and im able to login with this user but if i try to open the sqlite file its empty not even the tables, and if i try to edit GUI configuration of the channel or add new channel im getting server error... if you can please help me with this and thank you

[jb-alvarado]

You could try: sudo -u ffpu ffpapi -i and sudo -u ffpu ffpapi -a

[AliKadd]

everything is working now, but is it normal the the db file is still the same size? i event tried to open it in sqlite viewer and not tables.. this is the ls output (ffplayout.db-wall size is bigger now)

total 228
-rw-r--r-- 1 ffpu ffpu 4096 ينا 23 16:23 ffplayout.db
-rw-r--r-- 1 ffpu ffpu 32768 ينا 23 16:28 ffplayout.db-shm
-rw-r--r-- 1 ffpu ffpu 193672 ينا 23 16:28 ffplayout.db-wal

[jb-alvarado]

I'm not an expert in sqlite, but maybe it writes not directly to the db file, but in the other ones,something like a cache.

[AliKadd]

also i wanted to ask if you can possibly explain whats the reason u went with Rust for this project ?
this is my first time working with Rust, im learning as im going through this project so maybe you can explain to me whats special about Rust for this kind of project

[jb-alvarado]

• Rust is a system language, and it is save.
• In the past I got reports about memory leaking, and with rust it is more easy to prevent this.
• The compiled code is way faster then for example python, use less RAM and can handle bigger data transfer.
• Maybe one time I will change the decoding and encoding process, and that is only possible with a system language.
• Rust is modern and has many concepts from other modern languages.
• There is a good community behind Rust and you found many useful modules.

At the moment Rust is not a killer argument for that project, you could almost use any language you want. I started to learn Rust, when I migrated from python. Now I like it and don't regret it for a second.