fix

--Fixed issue with strip-select firing change event twice

-- removed all tabs other than movie in browse page

components.js

@@ -1725,6 +1725,17 @@ customElements.define('strip-select', class extends HTMLElement{
             behavior: 'smooth'
         })
     }
+    fireEvent = () => {
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        )
+    }
     connectedCallback() {
         const slot = this.shadowRoot.querySelector('slot')
         const coverLeft = this.shadowRoot.querySelector('.cover--left')
@@ -1749,12 +1760,13 @@ customElements.define('strip-select', class extends HTMLElement{
                 coverRight.classList.add('hide')
             }
         })
-        this.stripSelect.addEventListener('change', e => {
+        this.stripSelect.addEventListener('option-clicked', e => {
             if (this._value !== e.target.value) {
                 this._value = e.target.value
                 slot.assignedElements().forEach(elem => elem.removeAttribute('active'))
                 e.target.setAttribute('active', '')
-                e.target.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"})
+                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
+                this.fireEvent()
             }
         })
         const firstOptionObserver = new IntersectionObserver(entries => {
@@ -1818,12 +1830,14 @@ stripOption.innerHTML = `
         border-radius: var(--border-radius);
         padding: 0.5rem 0.8rem;
         -webkit-tap-highlight-color: transparent;
-
     }
     :host([active]) .strip-option{
         color: var(--active-option-color);
         background-color: var(--active-option-backgroud-color);
     }
+    :host(:hover:not([active])) .strip-option{
+        background-color: rgba(var(--text-color), 0.06);
+    }
 </style>
 <label class="strip-option" tabindex="0">
     <slot></slot>
@@ -1845,7 +1859,7 @@ customElements.define('strip-option', class extends HTMLElement{
     }
     fireEvent = () => {
         this.dispatchEvent(
-            new CustomEvent("change", {
+            new CustomEvent("option-clicked", {
                 bubbles: true,
                 composed: true,
                 detail: {

index.html

@@ -55,7 +55,8 @@
                 <path
                     d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z" />
             </svg>
-            <h4 class="app-name">FLO Torrent</h4>
+            <h4>FLO Torrent</h4>
+            <p>Getting torrents from FLO blockchain</p>
         </section>
         <section id="homepage" class="page hide-completely">
             <section id="search_section" class="page-layout">
@@ -166,14 +167,14 @@
                 <h1 class="page__title">Browse</h1>
                 <strip-select id="browse_category_selector">
                     <strip-option value="movie" selected>Movie</strip-option>
-                    <strip-option value="tv series">TV series</strip-option>
+<!--                     <strip-option value="tv series">TV series</strip-option>
                     <strip-option value="video">Video</strip-option>
                     <strip-option value="music">Music</strip-option>
                     <strip-option value="software">Software</strip-option>
                     <strip-option value="game">Game</strip-option>
                     <strip-option value="image">Image</strip-option>
                     <strip-option value="audio">Audio</strip-option>
-                    <strip-option value="misc">Misc</strip-option>
+                    <strip-option value="misc">Misc</strip-option> -->
                 </strip-select>
             </section>
             <section id="browser_category_torrents" class="torrent-container"></section>
@@ -947,7 +948,7 @@
                     result = await getFilteredTorrents(['name', 'filename', 'tags'], searchKey, {torrents: result})
                 }
                 else {
-                    result = getFilteredTorrents(['name', 'filename', 'tags'], searchKey)
+                    result = await getFilteredTorrents(['name', 'filename', 'tags'], searchKey)
                 }
                 if (result.length) {
                     getRef('result_for').innerHTML = `Showing results for <strong>${searchKey}</strong>`
@@ -956,8 +957,6 @@
                     getRef('result_for').innerHTML = `No results for <strong>${searchKey}</strong>`
                 }
 
-                console.log(result.length, result.length/20)
-
                 getRef('search_result').innerHTML = ``
                 getRef('search_page_selector').innerHTML = ``
                 if(result.length > 20){
@@ -1014,7 +1013,7 @@
                     break;
                 default:
                     page = 'homepage'
-                    history.replaceState(null, null, '#homepage')
+                    history.replaceState(null, null, ' ')
                     let allTorrents = await getDataFromIDB()
                     allTorrents = allTorrents.reverse().slice(0, 8)
                     getRef('torrent_container').innerHTML = ``
@@ -1032,7 +1031,6 @@
         }
 
         async function getFilteredTorrents(keys, searchKey, options = {}){
-            console.log(options)
             let {limit, torrents} = options
             if(!torrents){
                 torrents = await getDataFromIDB()