feat: 电影卡片增加TMDB相关信息

修复Metacritic链接优化搜索框
pt-plugins · Dec 24, 2024 · 9b6356f · 9b6356f
1 parent 1337e51
commit 9b6356f
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 94 deletions.
diff --git a/resource/i18n/en.json b/resource/i18n/en.json
@@ -1111,8 +1111,9 @@
       "duration": "Duration: ",
       "ratings": {
         "douban": "Douban {average} ({numRaters})",
-        "imdb": "IMDb {average} ({numRaters})"
+        "imdb": "IMDb {average} ({numRaters})",
+        "tmdb": "TMDB {average}% ({numRaters})"
       }
     }
   }
-}
+}
diff --git a/resource/i18n/zh-CN.json b/resource/i18n/zh-CN.json
@@ -1107,8 +1107,9 @@
       "duration": "片长：",
       "ratings": {
         "douban": "豆瓣 {average} 共 {numRaters} 人参与评价",
-        "imdb": "IMDb {average} 共 {numRaters} 人参与评价"
+        "imdb": "IMDb {average} 共 {numRaters} 人参与评价",
+        "tmdb": "TMDB {average}% 共 {numRaters} 人参与评价"
       }
     }
   }
-}
+}
diff --git a/resource/publicSites/douban.com/config.json b/resource/publicSites/douban.com/config.json
@@ -25,5 +25,5 @@
   "schema": "publicSite",
   "host": "movie.douban.com",
   "path": "douban.com",
-  "cdn": ["www.douban.com"]
+  "cdn": ["http://www.douban.com"]
 }
diff --git a/src/options/components/MovieInfoCard.vue b/src/options/components/MovieInfoCard.vue
@@ -5,23 +5,15 @@
       <v-card-title class="pb-2">
         <div :class="$vuetify.breakpoint.mdAndUp ? 'headline' : 'title'">
           <span>{{ info.title }}</span>
-          <span
-            :class="[
-              'ml-1',
-              'grey--text',
-              $vuetify.breakpoint.mdAndUp ? 'title' : 'caption',
-            ]"
-            >({{ info.year || info.attrs.year[0] }})</span
-          >
+          <span :class="[
+            'ml-1',
+            'grey--text',
+            $vuetify.breakpoint.mdAndUp ? 'title' : 'caption',
+          ]">({{ info.year || info.attrs.year[0] }})</span>
         </div>
       </v-card-title>
-      <v-img
-        :src="info.image || info.pic.normal"
-        class="ml-3 mb-3"
-        contain
-        :max-height="maxHeight"
-        position="left center"
-      >
+      <v-img :src="info.image || info.pic.normal" class="ml-3 mb-3" contain :max-height="maxHeight"
+        position="left center">
         <v-layout style="margin-left: 220px" v-if="$vuetify.breakpoint.mdAndUp">
           <!-- omit 格式 -->
           <v-card-title class="pt-0" v-if="info.updateTime">
@@ -56,10 +48,7 @@
             <v-flex xs12 class="my-2">
               <v-divider light></v-divider>
             </v-flex>
-            <div
-              class="caption"
-              v-html="`　　${info.summary.replace(/\n/g, '<br>')} @豆瓣`"
-            ></div>
+            <div class="caption" v-html="`　　${info.summary.replace(/\n/g, '<br>')} @豆瓣`"></div>
           </v-card-title>
 
           <v-card-title class="pt-0" v-else-if="info.attrs">
@@ -162,32 +151,21 @@
       <v-divider light></v-divider>
       <v-card-actions class="px-3">
         <!-- 豆瓣评分 -->
-        <v-btn
-          color="success"
-          :href="info.link || info.url || info.mobile_link"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          >豆瓣
-          {{ info.average || info.rating.value || info.rating.average }}</v-btn
-        >
+        <v-btn color="success" :href="info.link || info.url || info.mobile_link" target="_blank"
+          rel="noopener noreferrer nofollow">豆瓣
+          {{ info.average || info.rating.value || info.rating.average }}</v-btn>
 
         <!-- IMDb评分 -->
-        <v-btn
-          color="amber"
-          :href="`https://www.imdb.com/title/${this.IMDbId}/`"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          >IMDb {{ ratings.imdbRating }}</v-btn
-        >
+        <v-btn color="amber" :href="`https://www.imdb.com/title/${IMDbId}/`" target="_blank"
+          rel="noopener noreferrer nofollow">IMDb {{ ratings.imdbRating }}</v-btn>
+
+        <!-- TMDB评分 -->
+        <v-btn v-if="info.tmdb && info.tmdb.vote_average" color="cyan darken-1" :href="info.tmdbURL" target="_blank"
+          rel="noopener noreferrer nofollow">TMDB {{ info.tmdbAverage }}%</v-btn>
 
         <!-- 烂番茄新鲜度 -->
-        <v-btn
-          v-if="tomatoRating > 0"
-          color="red lighten-3"
-          :href="ratings.tomatoURL"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
+        <v-btn v-if="tomatoRating > 0" color="red lighten-3" :href="ratings.tomatoURL" target="_blank"
+          rel="noopener noreferrer nofollow">
           <v-avatar size="20" class="mr-1">
             <img :src="rottenTomatoes.fresh" v-if="tomatoRating >= 60" />
             <img :src="rottenTomatoes.rotten" v-else />
@@ -196,36 +174,20 @@
         </v-btn>
 
         <!-- Metacritic评分 -->
-        <v-btn
-          v-if="metascore > 0"
-          :color="
-            metascore > 60 ? 'success' : metascore > 40 ? 'warning' : 'error'
-          "
-          :href="`https://www.metacritic.com/search/movie/${info.title}/results`"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          style="min-width: unset"
-        >
+        <v-btn v-if="metascore > 0" :color="metascore > 60 ? 'success' : metascore > 40 ? 'warning' : 'error'
+          " :href="`https://www.metacritic.com/search/${info.originalTitle || info.title}`"
+          target="_blank" rel="noopener noreferrer nofollow" style="min-width: unset">
           <v-avatar size="20" class="mr-2">
-            <img
-              src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Metacritic_M.png"
-            />
+            <img src="https://upload.wikimedia.org/wikipedia/commons/f/f2/Metacritic_M.png" />
           </v-avatar>
           {{ metascore }}
         </v-btn>
 
         <v-spacer></v-spacer>
         <v-layout v-if="$vuetify.breakpoint.mdAndUp">
-          <v-flex xs6 v-if="rating > 0">
-            <v-rating
-              v-model="rating"
-              background-color="white"
-              color="yellow accent-4"
-              dense
-              readonly
-              half-increments
-              size="30"
-            ></v-rating>
+          <v-flex xs4 v-if="rating > 0">
+            <v-rating v-model="rating" background-color="white" color="yellow accent-4" dense readonly half-increments
+              size="30"></v-rating>
             <span class="ma-2">{{
               $t("movieInfoCard.ratings.douban", {
                 average:
@@ -235,23 +197,26 @@
               })
             }}</span>
           </v-flex>
-          <v-flex xs6 v-if="imdbRating > 0">
-            <v-rating
-              v-model="imdbRating"
-              background-color="white"
-              color="yellow accent-4"
-              dense
-              readonly
-              half-increments
-              size="30"
-            ></v-rating>
+          <v-flex xs4 v-if="imdbRating > 0">
+            <v-rating v-model="imdbRating" background-color="white" color="yellow accent-4" dense readonly
+              half-increments size="30"></v-rating>
             <span class="ma-2">{{
               $t("movieInfoCard.ratings.imdb", {
                 average: ratings.imdbRating,
                 numRaters: ratings.imdbVotes.replace(/,/g, ""),
               })
             }}</span>
           </v-flex>
+          <v-flex xs4 v-if="tmdbRating > 0">
+            <v-rating v-model="tmdbRating" background-color="white" color="yellow accent-4" dense readonly
+              half-increments size="30"></v-rating>
+            <span class="ma-2">{{
+              $t("movieInfoCard.ratings.tmdb", {
+                average: info.tmdbAverage,
+                numRaters: info.tmdb.vote_count,
+              })
+            }}</span>
+          </v-flex>
         </v-layout>
       </v-card-actions>
     </v-card>
@@ -289,12 +254,14 @@ export default Vue.extend({
           movie_type: [],
           pubdate: [],
           movie_duration: []
-        }
+        },
+        tmdbAverage: 0,
+        tmdbURL: ""
       } as any,
       ratings: {
-        imdbRating: "",
         Ratings: [],
-        imdbVotes: ""
+        imdbRating: "",
+        imdbVotes: "",
       } as any,
 
       rottenTomatoes: {
@@ -318,9 +285,8 @@ export default Vue.extend({
     reset() {
       this.visible = false;
       this.ratings = {
-        imdbRating: "",
         Ratings: [],
-        imdbVotes: ""
+        imdbRating: "",
       };
       console.log(this.doubanId, this.IMDbId);
       if (this.IMDbId) {
@@ -344,6 +310,13 @@ export default Vue.extend({
               }
             }
 
+            const tmdb = r.tmdb;
+            // 判断是否存在 TMDB 信息
+            if (tmdb) {
+              r.tmdbAverage = Math.round(tmdb.vote_average * 10);
+              r.tmdbURL = tmdb.tmdbURL;
+            }
+
             this.info = r;
           })
           .catch(error => {
@@ -399,6 +372,12 @@ export default Vue.extend({
       }
       return 0;
     },
+    tmdbRating(): number {
+      if (this.info && this.info.tmdb && this.info.tmdb.vote_average) {
+        return parseFloat(this.info.tmdb.vote_average) / 2;
+      }
+      return 0;
+    },
     tomatoRating(): number {
       if (this.ratings && this.ratings.Ratings) {
         let ratings = 0;

diff --git a/src/options/components/SearchBox.vue b/src/options/components/SearchBox.vue
@@ -304,6 +304,7 @@ export default Vue.extend({
       topSearches: [] as any[],
       topSearchesUpdateTime: "N/A" as any,
       topSearchesLoading: false,
+      timeout: 1500
     };
   },
 
@@ -324,8 +325,8 @@ export default Vue.extend({
         : EBeforeSearchingItemSearchMode.id;
       switch (searchMode) {
         case EBeforeSearchingItemSearchMode.id:
-          if (item && item.id) {
-            key = `douban${item.id}|${item.title}|${item.originalTitle || item.aka || item.original_title}|${key}`;
+          if (item) {
+            key = item.imdbId || `douban${item.id}|${item.title}|${item.originalTitle || item.aka || item.original_title}|${key}`;
           }
           break;
 
@@ -349,7 +350,7 @@ export default Vue.extend({
       } else if (this.searchKey) {
         this.timer = setTimeout(() => {
           this.getDoubanInfos(this.searchKey);
-        }, 750);
+        }, this.timeout);
       }
     },
     /**
@@ -491,7 +492,7 @@ export default Vue.extend({
 
       this.timer = setTimeout(() => {
         this.getDoubanInfos(this.searchKey);
-      }, 750);
+      }, this.timeout);
     },
     /**
      * 监控最后的搜索关键字，前显示当前搜索框

diff --git a/src/service/movieInfoService.ts b/src/service/movieInfoService.ts
@@ -12,6 +12,10 @@ export type MovieInfoCache = {
  * 电影信息
  */
 export class MovieInfoService {
+  // 用于加载评分信息
+  public omdbApiURL = "https://www.omdbapi.com";
+  // 用于获取IMDbID
+  public omitApiURL = "https://omit.mkrobot.org";
   // 豆瓣标准接口
   public doubanApiURL = "https://api.douban.com/v2";
   // 豆瓣 frodo 接口
@@ -44,8 +48,8 @@ export class MovieInfoService {
               "id": "1294833"
             }]
           */
-          imdb: `https://omit.mkrobot.org/movie/infos/$imdbid$`,
-          subject: `https://omit.mkrobot.org/movie/infos/douban$id$`
+          imdb: `${this.omitApiURL}/movie/infos/$imdbid$`,
+          subject: `${this.omitApiURL}/movie/infos/douban$id$`
           // imdb: `https://movie.douban.com/j/subject_suggest?q=$imdbid$`,
           // subject: `${this.doubanFrodoApi}/movie/$id$?apiKey=$apikey$`
         },
@@ -72,10 +76,6 @@ export class MovieInfoService {
     }
   }
 
-  // 用于加载评分信息
-  public omdbApiURL = "https://www.omdbapi.com";
-  // 用于获取IMDbID
-  public omitApiURL = "https://omit.mkrobot.org";
   // omdbapi 申请的Key列表
   // 每个 key 一天有1000次请求限制
   public omdbApiKeys = [