Merge pull request #152 from Serhii-DV/dev

Version 0.18.1

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change log
 
-## 0.18.0 (2024-12-YY)
+## 0.18.1 (2024-12-25)
+
+### Features
+
+- popup: Show again artist and album information in the separate Card tab
+
+## 0.18.0 (2024-12-24)
 
 ### Features
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.0",
+  "version": "0.18.1",
   "devDependencies": {
     "@github/relative-time-element": "^4.4.4",
     "@swc/html": "^1.10.1",

src/popup/content/messages/bcDataNotProvided.html

@@ -0,0 +1,11 @@
+<div
+  class="b2d-warning alert alert-warning d-flex align-items-center m-3"
+  role="alert"
+>
+  <b2d-icon name="exclamation-triangle" width="32" height="32"></b2d-icon>
+  <div class="ms-3">
+    Artist/Label or Album data is not provided<br />
+    Please select an artist/label or album from the history, or visit the
+    related Bandcamp page.
+  </div>
+</div>

src/popup/modules/main.ts

@@ -4,9 +4,7 @@ import { Release } from '../../app/release';
 import {
   click,
   getDataAttribute,
-  getVisibleElement,
   hasDataAttribute,
-  onClick,
   setActiveTab,
   setDataAttribute
 } from '../../utils/html';
@@ -16,15 +14,17 @@ import { Music } from '../../app/music';
 import { hasClass } from '../../utils/utils';
 
 export function showLatestViewed(): void {
-  const tab = getLatestViewedContentElement();
-  showBandcampTab(tab);
+  const btn = getBandcampTabButton();
+  if (btn) {
+    click(btn);
+  }
 }
 
 export function showReleaseCard(release: Release): void {
   setupReleaseCardTab(release);
 
   const tab = getReleaseCardContentElement();
-  showBandcampTab(tab);
+  showCardTab(tab);
 }
 
 export function showReleases(
@@ -35,7 +35,7 @@ export function showReleases(
   setupReleasesTab(storage, music, searchValue);
 
   const tab = getReleasesContentElement();
-  showBandcampTab(tab);
+  showCardTab(tab);
 }
 
 export function getBandcampTabButton(): HTMLElement | null {
@@ -46,6 +46,10 @@ export function getBandcampTabContentElement(): HTMLElement | null {
   return document.getElementById('bandcamp');
 }
 
+export function getCardTabButton(): HTMLElement | null {
+  return document.getElementById('card-tab');
+}
+
 export function getLatestViewedContentElement(): HTMLElement | null {
   return document.getElementById('latest-viewed');
 }
@@ -70,18 +74,6 @@ export function getHistoryContentElement(): HTMLElement | null {
   return document.getElementById('history');
 }
 
-export function setupBandcampButton(): void {
-  const btn = getBandcampTabButton();
-  onClick(btn, () => {
-    const tabs = getBandcampContentCards();
-    const visibleTab = getVisibleElement(tabs);
-
-    if (visibleTab && visibleTab !== getLatestViewedContentElement()) {
-      showLatestViewed();
-    }
-  });
-}
-
 export function setupNavigationLinks(storage: Storage): void {
   const wishlistLink = document.getElementById('wishlist-link');
   const feedLink = document.getElementById('feed-link');
@@ -125,20 +117,20 @@ function getOriginalTitle(element: HTMLElement): string {
   return getDataAttribute(element, 'org-title');
 }
 
-function showBandcampTab(tab: HTMLElement | null): void {
-  log(`Show bandcamp tab "${tab?.id}"`);
+function showCardTab(tab: HTMLElement | null): void {
+  log(`Show card tab "${tab?.id}"`);
 
-  const btn = getBandcampTabButton();
+  const btn = getCardTabButton();
   if (btn && !hasClass(btn, 'active')) {
     click(btn);
   }
 
-  setActiveTab(tab, getBandcampContentCards());
+  setActiveTab(tab, getCardContentCards());
 }
 
-function getBandcampContentCards(): Array<HTMLElement | null> {
+function getCardContentCards(): Array<HTMLElement | null> {
   return [
-    getLatestViewedContentElement(),
+    document.getElementById('bc-data-not-provided'),
     getReleaseCardContentElement(),
     getReleasesContentElement()
   ];

src/popup/popup.ejs

@@ -9,6 +9,9 @@
       <button class="btn btn-dark rounded-0" id="bandcamp-tab" data-bs-toggle="tab" data-bs-target="#bandcamp" role="tab" aria-controls="bandcamp" aria-selected="false" type="button" title="Bandcamp latest viewed releases">
         <b2d-icon name="view-list"></b2d-icon>
       </button>
+      <button class="btn btn-dark rounded-0" id="card-tab" data-bs-toggle="tab" data-bs-target="#card" role="tab" aria-controls="release-card" aria-selected="false" type="button" title="Artist/Album preview">
+        <b2d-icon name="card-text"></b2d-icon>
+      </button>
       <button class="btn btn-dark rounded-0" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" role="tab" aria-controls="history" aria-selected="false" type="button" title="History">
         <b2d-icon name="clock-history"></b2d-icon>
       </button>
@@ -32,9 +35,15 @@
       <!-- Bandcamp -->
       <div class="tab-pane fade" id="bandcamp" role="tabpanel" aria-labelledby="bandcamp-tab" tabindex="0">
         <!-- Latest viewed -->
-        <div id="latest-viewed" class="content-text d-none">
+        <div id="latest-viewed" class="content-text">
           <%= tabContentBandcamp %>
         </div>
+      </div>
+      <!-- Card -->
+      <div class="tab-pane fade overflow-hidden" id="card" role="tabpanel" aria-labelledby="card-tab" tabindex="0">
+        <div id="bc-data-not-provided">
+          <%= bcDataNotProvided %>
+        </div>
         <!-- Release -->
         <div id="release-card" class="d-none">
           <%= tabContentReleaseCard %>

src/popup/tabs/bandcamp_tab.js

@@ -5,12 +5,10 @@ import {
   historyItemsToArtistOrReleaseItems
 } from '../../bandcamp/modules/history';
 import { Release } from '../../app/release';
-import { setupBandcampButton } from '../modules/main';
 
 export function setupBandcampTab(btnHistoryTab, storage) {
   log('Setup bandcamp tab');
 
-  setupBandcampButton();
   setupLatestVisitedWidget(btnHistoryTab, storage);
 }
 

webpack.config.js

@@ -86,6 +86,7 @@ module.exports = (env, argv) => {
           tabContentReleases: fs.readFileSync('./src/popup/content/releases_tab.html', 'utf-8'),
           tabContentHistory: fs.readFileSync('./src/popup/content/history_tab.html', 'utf-8'),
           tabContentAbout: fs.readFileSync('./src/popup/content/about.html', 'utf-8'),
+          bcDataNotProvided: fs.readFileSync('./src/popup/content/messages/bcDataNotProvided.html', 'utf-8'),
           templates: [
             fs.readFileSync('./src/popup/content/release-card-template.html', 'utf-8'),
           ]