Update index.svelte

changed `playVideo` to `play`
added `paused()`, `pause()`, `jumpTo`, and `position`

README.md

@@ -3,29 +3,41 @@
 This Component allows you to add Youtube-Videos to your Svelte Project
 
 The orginal Component template comes from [HERE](https://github.com/sveltejs/component-template)
-
+The Youtube stuff comes from [HERE](https://developers.google.com/youtube/iframe_api_reference)
 
 ---
 
 # How to use it ?
 
-Just
+Just add this to your dependencies in `package.json`, then run `npm install`:
 
-```bash
-npm install --save-dev @sveltecasts/svelte-youtube
+```json
+  "svelte-youtube": "https://github.com/zevaverbach/svelte-youtube.git",
 ````
 
 And in your Source Code under Script:
 
 ```
-import Youtube from "@sveltecasts/svelte-youtube";
+import Youtube from "svelte-youtube"
 
 <Youtube videoId="..." />
 ```
 
+## Methods
+- `play()`
+- `pause()`
+- `paused()`
+- `jumpTo(seconds)`
+- `position()`
 
-# Btw
+# YouTube Video About Its Making
 
 Here is a youtube video about this component:
 
 https://www.youtube.com/watch?v=Ank3IdQHOuE
+
+# Changelog
+0.0.5 Fixed some errors when YT-Component gets destroyed and re-initialized, the problem was that YT replaced my div with an iframe and then on the component-destroy Svelte searches for an inexistent div ¯\_(ツ)_/¯ , an other problem was that the YouTubeIframeAPIReady only get called once when the first YT-Component is used, so when we recreate a Player the 'new YT.Player' function got never called
+0.0.4 Update svelte version
+0.0.2 Changed descripton
+0.0.1 Init

package.json

@@ -11,7 +11,7 @@
     "rollup": "^1.11.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-svelte": "^5.0.0",
-    "svelte": "^3.0.0"
+    "svelte": "^3.6.8"
   },
   "keywords": [
     "svelte"
@@ -21,8 +21,8 @@
     "index.mjs",
     "index.js"
   ],
-  "description": "*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*",
-  "version": "0.0.1",
+  "description": "Youtube Component for Svelte 3",
+  "version": "0.0.5",
   "dependencies": {},
   "repository": {
     "type": "git",

src/index.svelte

@@ -1,15 +1,18 @@
+<script context="module">
+  let YouTubeIframeAPIReady = false;
+</script>
 
 <script>
   let player;
-  import { createEventDispatcher , onMount} from "svelte";
-  const dispatch = createEventDispatcher();
-  let divId = "player_"+parseInt(Math.random() * 100000).toString()
+  import { onMount, createEventDispatcher } from "svelte";
+  let divId = "player_" + parseInt(Math.random() * 100000).toString();
   export let videoId;
-  export let height = '390';
-  export let width = '640';
+  export let height = "390";
+  export let width = "640";
+  const dispatch = createEventDispatcher()
   onMount(() => {
     let ytTagUrl = "https://www.youtube.com/iframe_api";
-      if(!isMyScriptLoaded(ytTagUrl)){
+    if (!isMyScriptLoaded(ytTagUrl)) {
       // 2. This code loads the IFrame Player API code asynchronously.
       var tag = document.createElement("script");
       tag.src = ytTagUrl;
@@ -19,37 +22,66 @@
 
     window.onYouTubeIframeAPIReady = function() {
       //console.log('hello')
-        window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
-      }
+      window.dispatchEvent(new Event("YouTubeIframeAPIReady"));
+    };
 
-      window.addEventListener("YouTubeIframeAPIReady", function(){
-          console.log('load player..')
+    window.addEventListener("YouTubeIframeAPIReady", function() {
+      if (YouTubeIframeAPIReady == false) {
+        // first load of an YT Video on this project
+        YouTubeIframeAPIReady = true; // now the Player can be created
+        createPlayer();
+      }
+    });
+    
+   function onPlayerStateChange({ data }) {		
+     dispatch("StateChange", data);		  
+   }
+    function createPlayer() {
       player = new YT.Player(divId, {
         height,
         width,
         videoId: videoId,
         events: {
           //'onReady': onPlayerReady,
-                'onStateChange': onPlayerStateChange
+          onStateChange: onPlayerStateChange
+        }
+      });
+    }
+    if (YouTubeIframeAPIReady) {
+      createPlayer(); // if the YT Script is ready, we can create our player
     }
   });
-      })
 
-  })
-
-function isMyScriptLoaded(url ="") {
-    var scripts = document.getElementsByTagName('script');
-    for (var i = scripts.length; i--;) {
+  function isMyScriptLoaded(url = "") {
+    var scripts = document.getElementsByTagName("script");
+    for (var i = scripts.length; i--; ) {
       if (scripts[i].src == url) return true;
     }
     return false;
-}
+  }
 
-  function onPlayerStateChange({data}){
-    dispatch("StateChange",data)
-  }
-  export function playVideo(){
+  export function position() { return player.getCurrentTime() }
+  export function play() { player.playVideo() }
+  export function jumpTo(seconds) { player.seekTo(seconds) }
+  export function pause() { player.pauseVideo() }
+  export function paused() { return [5, 2, -1].includes(player.getPlayerState()) }
+  export function buffering() { return player.getPlayerState() === 3 }
+  export function state() { return player.getPlayerState() }
+  export function toggle() {
+      if (paused()) {
           player.playVideo()
+      } else {
+          player.pauseVideo()
       }
+  }
+
 </script>
-<div id={divId}></div>
+
+<span class="yt-component" style="float: left">
+  <div id={divId} />
+</span>
+<style>
+  .yt-component {
+    box-shadow: 15px 15px #111;
+  }
+</style>