vime-js / vime

Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
https://vimejs.com
MIT License
2.77k stars 152 forks source link

setting PlayerProps #67

Closed anito closed 4 years ago

anito commented 4 years ago

Hi @mihar-22,

I'd love to be able to set some PlayerProps (especially Player.currentPoster) from outside vime-player through usePlayerStore from @vime/svelte.

Obviously some (stores) are writable and some aren't.

Here's whats happening setting some of the exposed PlayerProps after declaring appropriate store constants with:

const {
   currentPoster, loop, autoplay, ...
} = usePlayerStore(() => player);

// $currentPoster = "some-new-poster.png"; // throws error: store.set is undefined although declared as externalWritable ? $currentTime = 50; // works -> externalWritable $paused = false; // works -> externalWritable $language = 'de'; // works -> externalWritable $volume = 20; // works -> externalWritable $muted = true; // works -> externalWritable // $loop = true; // throws error (internalReadonly && externalWritable ?) // $debug = false; // throws error ( internalReadonly && externalWritable ?) // $autoplay = true; // throws error ( internalReadonly && externalWritable ?) // $autopause = true; // throws error ( internalReadonly && externalWritable ?) // $aspectRatio = '16:9'; // throws error ( internalReadonly && externalWritable ?) ...

Again, my main goal would be to reactively update PlayerProp.currentPoster (with a different poster chosen by some user input). How should I accomplish this to make it work?

Thx

mihar-22 commented 4 years ago

Hey @anito I'm sorry about the relayed response, I was busy finishing up some things. You could update the poster like so...

<VimePlayer>
  <!-- You set the poster here. -->
  <VimeVideo {poster}>
    <!-- ... -->
  </VimeVideo>
</VimePlayer>

<script>
  // ...

  let poster = '/poster.png';

  // Change anywhere here.
</script>

The currentPoster player property is readonly and can only be set by a provider, so just update it on the provider and it should all work.