Add video library button on main page

src/lib/components/world-layers/feed/Feed.svelte

@@ -69,7 +69,7 @@ button {
     position: fixed;
     cursor: pointer;
     background: $e-ink-medium;
-    top: 80px;
+    top: 120px;
     right: 20px;
     width: 160px;
     display: flex;

src/lib/components/world-layers/videoLibraries/VideoLibraryComponent.svelte

@@ -22,12 +22,10 @@ function scrollLeft() {
 function scrollRight() {
   carousel.scrollBy({ left: 300, behavior: 'smooth' });
 }
-  console.log("lib!!",lib.activeVideos)
 
   $: if (lib) {
     videosByDate = {};
     lib.activeVideos.forEach(video => {
-      console.log("video.startDate",video.startDate)
       if(video.startDate !== undefined){
         const date = video.startDate?.split('T')[0];
 
@@ -45,17 +43,12 @@ function scrollRight() {
   }
 
   function selectDate(date) {
-    console.log("selectDate",date)
-    console.log("videosByDate[date]",videosByDate[date])
     selectedDate = date;
     selectedVideos = videosByDate[date];
-    console.log("ted",selectedVideos)
   }
 
 
 </script>
-
-
     <div class="video-item" class:is-mobile={$isPhone}>
       <span class="title-button">
       <span class="title" >{lib.title}</span></span>
@@ -75,7 +68,6 @@ function scrollRight() {
       <div class="video-carousel" bind:this={carousel}>
             {#each selectedVideos as video}
           <div class="video">
-
              <div class="youtube-container">
                <iframe
                  src={"https://www.youtube.com/embed/" +

src/routes/__layout.svelte

@@ -24,6 +24,7 @@
     playSound,
     activeArticle,
     trayOpen,
+    activeVideoLibrary,
   } from "$lib/modules/ui.js"
   import { currentRoom } from "$lib/modules/movement.js"
   // *** VARIABLES
@@ -37,6 +38,8 @@
     }
   }
 
+
+
 </script>
 <svelte:window on:keydown={e => {
       if (e.key === "Escape") {
@@ -77,28 +80,37 @@
 <!-- OPTIONS -->
 {#if !$trayOpen && !$activeArticle}
   <div class="options">
-    <div
-      class="option sound"
-      on:click={() => {
-        playSound.set(!$playSound)
-      }}
-    >
-      {#if $playSound}
-        <SoundOn />
-      {:else}
-        <SoundOff />
-      {/if}
+    <div class="top_options">
+      <div
+        class="option sound"
+        on:click={() => {
+          playSound.set(!$playSound)
+        }}
+      >
+        {#if $playSound}
+          <SoundOn />
+        {:else}
+          <SoundOff />
+        {/if}
+      </div>
+      <div
+        class="option labels"
+        class:on={$showLabels}
+        on:click={() => {
+          showLabels.set(!$showLabels)
+        }}
+      >
+        <span>abc</span>
+      </div>
     </div>
     <div
-      class="option labels"
-      class:on={$showLabels}
-      on:click={() => {
-        showLabels.set(!$showLabels)
-      }}
+      class="video_library_button"
+      on:click={activeVideoLibrary.set(!$activeVideoLibrary)}
     >
-      <span>abc</span>
+      <span>Video Library    →</span>
     </div>
   </div>
+
 {/if}
 
 <style lang="scss">
@@ -150,12 +162,35 @@
     @include screen-size("small") {
       display: none;
     }
+
+    .top_options {
+      display: flex;
+    }
+
+    .video_library_button {
+      margin-left: 5px;
+      font-size: $font-size-small;
+      background: $e-ink-medium;
+      color: $e-ink-light;
+      padding: 10px;
+      user-select: none;
+      cursor: pointer;
+      background-color: $e-ink-dark;
+      border-radius: 10px;
+      border: 1px solid $e-ink-light;
+      width: 200px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      width: 100%;
+    }
 
     .option {
       margin-left: 5px;
       font-size: $font-size-extra-small;
       background: $e-ink-medium;
-      float: right;
       padding: 5px;
       user-select: none;
       cursor: pointer;