feat: split album title

src/utils/common.js

@@ -107,3 +107,67 @@ export function changeAppearance(appearance) {
     .querySelector('meta[name="theme-color"]')
     .setAttribute("content", appearance === "dark" ? "#222" : "#fff");
 }
+
+export function splitSoundtrackAlbumTitle(title) {
+  let keywords = [
+    "Music from the Original Motion Picture Score",
+    "The Original Motion Picture Soundtrack",
+    "Original MGM Motion Picture Soundtrack",
+    "Complete Original Motion Picture Score",
+    "Original Music From The Motion Picture",
+    "Original Music From The Netflix Film",
+    "Original Score to the Motion Picture",
+    "Original Motion Picture Soundtrack",
+    "Soundtrack from the Motion Picture",
+    "Original Television Soundtrack",
+    "Original Motion Picture Score",
+    "Music From the Motion Picture",
+    "Music From The Motion Picture",
+    "Complete Motion Picture Score",
+    "Music from the Motion Picture",
+    "Original Videogame Soundtrack",
+    "La Bande Originale du Film",
+    "Music from the Miniseries",
+    "Bande Originale du Film",
+    "Die Original Filmmusik",
+    "Original Soundtrack",
+    "Complete Score",
+    "Original Score",
+  ];
+  for (let keyword of keywords) {
+    if (title.includes(keyword) === false) continue;
+    return {
+      title: title
+        .replace(`(${keyword})`, "")
+        .replace(`: ${keyword}`, "")
+        .replace(`[${keyword}]`, "")
+        .replace(`- ${keyword}`, "")
+        .replace(`${keyword}`, ""),
+      subtitle: keyword,
+    };
+  }
+  return {
+    title: title,
+    subtitle: "",
+  };
+}
+
+export function splitAlbumTitle(title) {
+  let keywords = ["Bonus Tracks Edition", "Complete Edition", "Deluxe Edition"];
+  for (let keyword of keywords) {
+    if (title.includes(keyword) === false) continue;
+    return {
+      title: title
+        .replace(`(${keyword})`, "")
+        .replace(`: ${keyword}`, "")
+        .replace(`[${keyword}]`, "")
+        .replace(`- ${keyword}`, "")
+        .replace(`${keyword}`, ""),
+      subtitle: keyword,
+    };
+  }
+  return {
+    title: title,
+    subtitle: "",
+  };
+}

src/views/album.vue

@@ -11,9 +11,8 @@
         :id="album.id"
       />
       <div class="info">
-        <div class="title">
+        <div class="title"> {{ title }}</div>
-          {{ album.name }}
+        <div class="subtitle" v-if="subtitle !== ''">{{ subtitle }}</div>
-        </div>
         <div class="artist">
           <span>{{ album.type | formatAlbumType(album) }} by </span
           ><router-link :to="`/artist/${album.artist.id}`">{{
@@ -53,7 +52,12 @@
         </div>
       </div>
     </div>
-    <TrackList :tracks="tracks" :type="'album'" :id="album.id" />
+    <TrackList
+      :tracks="tracks"
+      :type="'album'"
+      :id="album.id"
+      :albumObject="album"
+    />
     <div class="extra-info">
       <div class="album-time"></div>
       <div class="release-date">
@@ -103,6 +107,7 @@ import { getArtistAlbum } from "@/api/artist";
 import { getTrackDetail } from "@/api/track";
 import { playAlbumByID } from "@/utils/play";
 import { getAlbum, albumDynamicDetail, likeAAlbum } from "@/api/album";
+import { splitSoundtrackAlbumTitle, splitAlbumTitle } from "@/utils/common";
 import NProgress from "nprogress";
 import { isAccountLoggedIn } from "@/utils/auth";
 
@@ -135,6 +140,8 @@ export default {
       show: false,
       moreAlbums: [],
       dynamicDetail: {},
+      subtitle: "",
+      title: "",
     };
   },
   created() {
@@ -161,7 +168,11 @@ export default {
           realAlbums.find((a1) => a1.id === a.id) === undefined &&
           eps.find((a1) => a1.id === a.id) === undefined
       );
+      if (realAlbums.length === 0) {
         return [...realAlbums, ...eps, ...restItems].slice(0, 5);
+      } else {
+        return [...realAlbums, ...restItems].slice(0, 5);
+      }
     },
   },
   methods: {
@@ -182,10 +193,24 @@ export default {
           this.dynamicDetail.isSub = !this.dynamicDetail.isSub;
       });
     },
+    formatTitle() {
+      let splitTitle = splitSoundtrackAlbumTitle(this.album.name);
+      let splitTitle2 = splitAlbumTitle(splitTitle.title);
+      this.title = splitTitle2.title;
+      if (splitTitle.subtitle !== "" && splitTitle2.subtitle !== "") {
+        this.subtitle = splitTitle.subtitle + " · " + splitTitle2.subtitle;
+      } else {
+        this.subtitle =
+          splitTitle.subtitle === ""
+            ? splitTitle2.subtitle
+            : splitTitle.subtitle;
+      }
+    },
     loadData(id) {
       getAlbum(id).then((data) => {
         this.album = data.album;
         this.tracks = data.songs;
+        this.formatTitle();
         NProgress.done();
         this.show = true;
 
@@ -230,8 +255,10 @@ export default {
     .title {
       font-size: 56px;
       font-weight: 700;
-      display: inline-flex;
+    }
-      align-items: center;
+    .subtitle {
+      font-size: 22px;
+      font-weight: 600;
     }
     .artist {
       font-size: 18px;