change name & component source

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "SvelteComponent",
+  "name": "@sveltecasts/svelte-youtube",
   "svelte": "src/index.svelte",
   "module": "index.mjs",
   "main": "index.js",
@@ -20,5 +20,18 @@
     "src",
     "index.mjs",
     "index.js"
-  ]
+  ],
+  "description": "*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*",
+  "version": "0.0.1",
+  "dependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sveltecasts/svelte-youtube.git"
+  },
+  "author": "Sveltecasts.dev",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sveltecasts/svelte-youtube/issues"
+  },
+  "homepage": "https://github.com/sveltecasts/svelte-youtube#readme"
 }

src/index.svelte

@@ -1,35 +1,50 @@
-<script context="module">
-  // 2. This code loads the IFrame Player API code asynchronously.
-  var tag = document.createElement("script");
-
-  tag.src = "https://www.youtube.com/iframe_api";
-  var firstScriptTag = document.getElementsByTagName("script")[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-  window.onYouTubeIframeAPIReady = function() {
-    //console.log('hello')
-    window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
-  }
-</script>
 
 <script>
   let player;
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher , onMount} from "svelte";
   const dispatch = createEventDispatcher();
   let divId = "player_"+parseInt(Math.random() * 100000).toString()
   export let videoId;
-  window.addEventListener("YouTubeIframeAPIReady", function(){
+  export let height = '390';
-      console.log('load player..')
+  export let width = '640';
-      player =  new YT.Player(divId, {
+  onMount(() => {
-          height: '390',
+      let ytTagUrl = "https://www.youtube.com/iframe_api";
-          width: '640',
+      if(!isMyScriptLoaded(ytTagUrl)){
-          videoId: videoId,
+    // 2. This code loads the IFrame Player API code asynchronously.
-          events: {
+        var tag = document.createElement("script");
-            //'onReady': onPlayerReady,
+        tag.src = ytTagUrl;
-            'onStateChange': onPlayerStateChange
+        var firstScriptTag = document.getElementsByTagName("script")[0];
-          }
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-        });
+       }
+      
+      window.onYouTubeIframeAPIReady = function() {
+        //console.log('hello')
+        window.dispatchEvent(new Event("YouTubeIframeAPIReady"))
+      }
+
+      window.addEventListener("YouTubeIframeAPIReady", function(){
+          console.log('load player..')
+          player =  new YT.Player(divId, {
+              height,
+              width,
+              videoId: videoId,
+              events: {
+                //'onReady': onPlayerReady,
+                'onStateChange': onPlayerStateChange
+              }
+            });
+      })
+
   })
+
+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)
   }
@@ -37,5 +52,4 @@
     player.playVideo()
   }
 </script>
-YT-Component VID: {videoId}<br>
+<div id={divId}></div>
-<div id={divId}></div><br>