Fixed options in Plyr.svelte, so passed in options are used

[MartinElsaesser]

The passed in options to are not used. This is because you are not passing the options object to the plyr class but rather the opts() function which adds properties to the options object. Alternatively you could also replace the formerly used opts with opts(). I just think it is more meaningful to actually pass in the options object.

P.S.: I reworked as little as needed to get it working for me. But I could see this code getting a lot neater by replacing

$: opts();

function opts() {
	if (!options.hasOwnProperty('hideYouTubeDOMError')) {
		options.hideYouTubeDOMError = true;
	}
	return options;
}

with

$: {
	if (!options.hasOwnProperty('hideYouTubeDOMError')) {
		options.hideYouTubeDOMError = true;
	}
}

[benwoodward]

Thanks, LGTM. One issue is that you've changed the indentation for 3 files. Are you able to revert the indentation back to 2 space tabs?

[MartinElsaesser]

I'll try. What about my other proposed fix? Changing opt() to an expression svelte then evaluates?

[MartinElsaesser]

Hi again, so for going from tabs to spaces I would need to change too much of my vs-code config for what it's worth. So here is the edited code as a snippet.

<script>
  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
  import Plyr from 'plyr';
  import '../plyr.scss';

  export let eventsToEmit = [];
  export let options = {};
  export let player = {};
  let plyrDiv;
  const dispatch = createEventDispatcher();

  $: if (!options.hasOwnProperty('hideYouTubeDOMError')) {
    options.hideYouTubeDOMError = true;
  }

  onMount(async () => {
    player = new Plyr(plyrDiv.firstChild, options);
    eventsToEmit.forEach(event => dispatchOnPlayerEvent(event));
  });

  onDestroy(() => {
    try {
      player.destroy();
    } catch (e) {
      if (!(options.hideYouTubeDOMError && e.message === 'The YouTube player is not attached to the DOM.')) {
        // eslint-disable-next-line no-console
        console.error(e);
      }
    }
  });

  function dispatchOnPlayerEvent (event) {
    player.on(event, data => dispatch(event, data.detail.plyr))
  }
</script>

<div bind:this={plyrDiv}>
  <slot></slot>
</div>

It is even neater now.

[benwoodward]

I just downloaded VS Code to check this, it's super easy to fix. Just click the indentation button in the status bar, change it to 2 space tabs, save the file, repeat for each affected file, commit the changes, push the commit, done.

VS Code saves these settings on a project by project basis, so it shouldn't be a problem.

[MartinElsaesser]

Well it's just that I can't find the Spaces button in the status bar. Nevertheless I implemented the wrapper myself, because I needed some specific extra functionality for use with Routify.