bug: styling of DefaultControls gone in static build nuxt.js

[dataexcess]

trafficstars

Bug Report

Vime version: 5.0.27

Provider:

[] Audio [x] Video [] HLS [] DASH [] YouTube [] Vimeo [] Dailymotion

Current behavior: incorrect styling after 'npm run generate' and 'surge dist/'

Expected behavior: to have the same stylings/css of the Player regardless of local dev server or static deployed website

Steps to reproduce: using nuxt.js use the Player to play a video, and use the DefaultControls as UI... test locally by a dynamic server 'npm run dev' ... => all good. now build the project for static upload by running 'npm run generate' now upload with surge to a url of choice using 'surge dist/'

Related code: I tried making a plugin and use Vue.component() etc. instead of locally importing the components and the css files, but doesn't change anything..

Other information: here's the website, click on a gif on the map, and then click to play the video... the stylings is all black and incorrect. => http://agexpo.surge.sh/ <=

[shakhzodkudratov]

same here

[dataexcess]

So happy someone else has the same bug! Please fix this, I need this for a project in production soon.

[shakhzodkudratov]

@dataexcess for now, I'm replacing with vue-plyr, but will return back, because vime has better support for hls

[shakhzodkudratov]

@dataexcess I found the workaround. Just import default.css and it'll work perfectly. in my scss: @import '@vime/core/themes/default.css';

you can import it directly in nuxt.config.js

[dataexcess]

I don't use scss... I tried changing my nuxtconfig like so:

    css: [
        '@vime/core/themes/default.css'
    ],

But it simply does not work :(

[shakhzodkudratov]

@dataexcess did you tried to add tilda(~) at start?

css: [ '~@vime/core/themes/default.css' ],

[dataexcess]

That doesn't work, gives me: Cannot resolve "~@vime/core/themes/default.css"

Maybe I should try to work with scss haha maybe that will solve it somehow

[shakhzodkudratov]

@dataexcess check your node_modules folder. Do you have @vime folder? Follow by this path (<your project root>/node_modules/@vime/core/themes) and ensure that you have default.css

I've tried css: [ '~@vime/core/themes/default.css' ], and I haven't any error.

[dataexcess]

Yes I have the file there in my node_modules, but it doesn't work. Weirdly enough I made a global scss file and imported it there like you did @import '@vime/core/themes/default.css'; and referenced this global scss file in my nuxt-config and now it works!!

[1shaked]

When do they plan to fix the bug?