Separate logic of offline buttons

bcc-code · Apr 11, 2024 · 36b5cf9 · 36b5cf9
1 parent 92bad0b
commit 36b5cf9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 65 deletions.
diff --git a/src/Experience/Utils/Offline.js b/src/Experience/Utils/Offline.js
@@ -1,9 +1,6 @@
 import Experience from '../Experience.js'
 import _appInsights from './AppInsights.js'
 import _lang from './Lang.js'
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css'
-import 'tippy.js/animations/shift-away.css'
 
 let offline = null
 
@@ -520,22 +517,6 @@ export default class Offline {
             (downloadedEpisodes) => {
                 if (downloadedEpisodes.length == chapter.episodes.length) {
                     document.querySelector('.chapter[data-id="' + chapter.id + '"]').classList.add('downloaded')
-
-                    document.querySelectorAll('.chapter.downloaded .chapter__offline').forEach((button) => {
-                        const tippyInstance = button._tippy
-                        if (tippyInstance) {
-                            tippyInstance.destroy()
-                        }
-                    })
-
-                    tippy('.chapter.downloaded .chapter__offline', {
-                        theme: 'explorers',
-                        // content: _s.offline.download.info,
-                        content: 'Re-download offline version',
-                        duration: [500, 200],
-                        animation: 'shift-away',
-                        placement: 'auto',
-                    })
                 }
             }
         )

diff --git a/src/Experience/World/World.js b/src/Experience/World/World.js
@@ -177,10 +177,14 @@ export default class World {
                         <h1 class="chapter-heading">${chapter.title}</h1>
                         <div class="chapter-date">${chapter.date}</div>
                     </div>
-                    <button class="chapter__offline button-cube">
-                        <svg class="group-[.downloaded]:hidden"><use href="#download-solid" fill="currentColor"></use></svg>
-                        <svg class="hidden group-[.downloaded]:block"><use href="#arrow-rotate-right-solid" fill="currentColor"></use></svg>
-                    </button>
+                    <div class="chapter__offline">
+                        <button class="chapter__redownload button-cube !hidden">
+                            <svg><use href="#arrow-rotate-right-solid" fill="currentColor"></use></svg>
+                        </button>
+                        <button class="chapter__download button-cube group-[.downloaded]:hidden">
+                            <svg><use href="#download-solid" fill="currentColor"></use></svg>
+                        </button>
+                    </div>
                 </a>
                 <div class="chapter-status">
                     <div class="chapter__downloading">
@@ -326,15 +330,18 @@ export default class World {
             })
         })
 
-        this.chapterSelectWrapper.querySelectorAll('.chapter__offline').forEach(function (chapter) {
+        this.chapterSelectWrapper.querySelectorAll('.chapter__download').forEach(function (chapter) {
             chapter.addEventListener('click', (event) => {
                 instance.downloadChapter(chapter)
                 event.stopPropagation()
             })
         })
 
-        this.chapterSelectWrapper.querySelectorAll('.chapter__downloaded').forEach(function (button) {
-            button.addEventListener('click', instance.confirmRedownload)
+        this.chapterSelectWrapper.querySelectorAll('.chapter__redownload').forEach(function (chapter) {
+            chapter.addEventListener('click', (event) => {
+                instance.redownloadChapter(chapter)
+                event.stopPropagation()
+            })
         })
 
         // this.chapterSelectWrapper.querySelectorAll('.chapter__download-failed').forEach(function (chapter) {
@@ -346,10 +353,17 @@ export default class World {
     }
 
     setStatesTooltips() {
-        tippy('.chapter__offline', {
+        tippy('.chapter__download', {
+            theme: 'explorers',
+            content: _s.offline.download.title,
+            duration: [500, 200],
+            animation: 'shift-away',
+            placement: 'auto',
+        })
+
+        tippy('.chapter__redownload', {
             theme: 'explorers',
-            // content: _s.offline.download.info,
-            content: 'Download offline version',
+            content: _s.offline.update,
             duration: [500, 200],
             animation: 'shift-away',
             placement: 'auto',
@@ -376,36 +390,6 @@ export default class World {
 
     // Download
 
-    setDownloadHtml(button) {
-        button.innerHTML = `
-        <svg class="w-4 h-4"><use href="#check-solid" fill="currentColor"></use></svg>
-        <span>${_s.offline.availableOffline.title}</span>
-        `
-        button.addEventListener('click', instance.confirmRedownload)
-    }
-
-    confirmRedownload(event) {
-        const button = event.currentTarget
-        button.removeEventListener('click', instance.confirmRedownload)
-
-        button.innerHTML = `<span class="text-sm tv:text-base mr-1">${_s.offline.redownloadConfirmation}</span>
-            <svg class="refuse w-3 h-3 cursor-pointer"><use href="#xmark-large-solid" fill="currentColor"></use></svg>
-            <span class="separator mr-2">/</span>
-            <svg class="redownload w-4 h-4 cursor-pointer"><use href="#check-solid" fill="currentColor"></use></svg>`
-
-        button.querySelector('.refuse').addEventListener('click', (event) => {
-            instance.setDownloadHtml(button)
-            event.stopPropagation()
-        })
-        button.querySelector('.redownload').addEventListener('click', (event) => {
-            instance.redownloadChapter(button)
-            instance.setDownloadHtml(button)
-            event.stopPropagation()
-        })
-
-        event.stopPropagation()
-    }
-
     redownloadChapter(chapter) {
         instance.removeDownload(chapter)
         instance.downloadChapter(chapter)

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -675,6 +675,10 @@ body.not-logged-in {
 
     body.logged-in.electron & {
         .chapter__offline {
+            display: flex;
+        }
+
+        .chapter__download {
             display: grid;
         }
 
@@ -690,26 +694,26 @@ body.not-logged-in {
                 display: flex;
             }
 
-            .chapter__offline {
+            .chapter__download,
+            .chapter__redownload {
                 display: none;
             }
         }
 
         &.downloaded {
-            .chapter__offline {
+            .chapter__download {
                 display: none;
             }
 
             .chapter__downloaded {
                 display: flex;
                 padding-left: 10%;
             }
-        }
 
-        &:hover .chapter__offline {
-            display: grid;
+            &:hover .chapter__redownload {
+                display: grid !important;
+            }
         }
-
     }
 
     &.locked {