diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 48afc43..0fd08be 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -274,12 +274,11 @@
       @seeking="seeking = !seeking"
     />
     <sponsorblock
-      v-if="$refs.player"
-      :video="$refs.player"
-      :seeking="seeking"
-      :videoid="videoid"
-      :controls="controls"
+      v-if="$refs.player && blocks.length > 0"
+      :duration="$refs.player.duration"
       :fullscreen="isFullscreen"
+      :controls="controls"
+      :seeking="seeking"
       :blocks="blocks"
     />
   </div>
@@ -354,7 +353,7 @@ export default {
     });
 
     vid.addEventListener("loadeddata", (e) => {
-      // TODO: detect video loading state and send this.loading to play button :loading = loading
+      // TODO: detect video loading state and send this.loading to play button :loading = loading here
       // console.log(e);
       if (vid.readyState >= 3) {
         vid.addEventListener("timeupdate", () => {
@@ -362,7 +361,7 @@ export default {
           this.watched = this.$vuetube.humanTime(vid.currentTime);
           if (!this.seeking) this.progress = vid.currentTime;
 
-          // console.log("sb check", data);
+          // console.log("sb check", this.blocks);
           // iterate over data.segments array
           if (this.blocks.length > 0)
             this.blocks.forEach((sponsor) => {
@@ -378,6 +377,7 @@ export default {
               }
             });
         });
+        // TODO: detect video loading state and send this.loading to play button :loading = loading here
         vid.addEventListener("progress", () => {
           this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
         });
diff --git a/NUXT/components/Player/sponsorblock.vue b/NUXT/components/Player/sponsorblock.vue
index 31ec13d..51632d4 100644
--- a/NUXT/components/Player/sponsorblock.vue
+++ b/NUXT/components/Player/sponsorblock.vue
@@ -23,13 +23,18 @@
           : 'width: 100%; left: 0; bottom: 1px;'
       "
     />
+    <!-- // TODO:background-color="colors[block.category]" -->
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    video: {
+    blocks: {
+      type: Array,
+      required: true,
+    },
+    duration: {
       type: Object,
       required: true,
     },
@@ -37,10 +42,6 @@ export default {
       type: Boolean,
       required: true,
     },
-    videoid: {
-      type: String,
-      required: true,
-    },
     fullscreen: {
       type: Boolean,
       required: true,
@@ -49,40 +50,19 @@ export default {
       type: Boolean,
       required: true,
     },
-    blocks: {
-      type: Array,
-      required: true,
-    },
   },
+  data: () => ({
+    colors: {
+      sponsor: "green",
+      selfpromo: "yellow",
+      exclusive_access: "teal",
+      interaction: "fuchsia",
+      poi_highlight: "deeppink",
+      intro: "lightblue",
+      outro: "blue",
+      music_offtopic: "orange",
+      filter: "purple",
+    },
+  }),
 };
 </script>
-
-<style>
-.sponsor {
-  color: green;
-}
-.selfpromo {
-  color: yellow;
-}
-.exclusive_access {
-  color: orange;
-}
-.interaction {
-  color: blue;
-}
-.intro {
-  color: purple;
-}
-.outro {
-  color: purple;
-}
-.music_offtopic {
-  color: red;
-}
-.poi_highlight {
-  color: #ff00ff;
-}
-.filler {
-  color: blue;
-}
-</style>