vue-video | Optimize mobile video components and try to be | Mobile library

Unhandled promise rejection SyntaxError: Expected ':'

in console and I have to hit the login button twice to enter the app. Here I do not see the main content of page, only sidebar menu gets displayed and the main content is not renderd and I again get an error in my console which is

Unhandled promise rejection NavigationDuplicated: Navigating to current location(/dashboard/home/something) is not allowed

This is my package.json

I try to find a way to hide or disable those controls: play button, playback rate, and make the progress bar readonly.

I the video.js docs there is controls: false which hide all controls bar. and this is not what I want.

I also try to figure out in typescript DefinitelyTyped, in controlBar options there only two properties: volumePanel and fullscreenToggle. nothing about play or progress-bar or rate.

Edit I find controlBar: { playToggle: false } which hide play button.

But I still find a way to make readonly/disable progressbar.

Any idea how to do it?

My code is looks like this snippet:

HTML is:

Sometimes when video is loading after I enter page I see weird frame rotating very fast at the bottom right of page. I took 2 screenshots I clicked PrtScr button very fast:

It sometimes also happen when video stop because of slow network connection:

It looks like it's related to loading but I don't think it's spinner. Can I somehow remove/hide it?

I have not been able to find anything in the documentation. In fact, the inclusion of css files was a little confusing and I'm uncertain if my import (versus the require in the docs) is correct.

How can I set the width of the player?