From d6d9e93843964b0473fe01aa0411677690b40f8b Mon Sep 17 00:00:00 2001
From: LASER-Yi <ly0007@yeah.net>
Date: Tue, 20 Apr 2021 20:07:02 +0800
Subject: [PATCH] Fix some potential issues when displaying languages

---
 frontend/src/Movies/index.tsx | 13 +++++++++++--
 frontend/src/Series/index.tsx |  7 ++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Movies/index.tsx b/frontend/src/Movies/index.tsx
index e3b79fb01..414def495 100644
--- a/frontend/src/Movies/index.tsx
+++ b/frontend/src/Movies/index.tsx
@@ -16,6 +16,7 @@ import { useReduxAction } from "../@redux/hooks/base";
 import { MoviesApi } from "../apis";
 import { ActionBadge, TextPopover } from "../components";
 import BaseItemView from "../generic/BaseItemView";
+import { BuildKey } from "../utilites";
 
 interface Props {}
 
@@ -73,7 +74,11 @@ const MovieView: FunctionComponent<Props> = () => {
         accessor: "audio_language",
         Cell: (row) => {
           return row.value.map((v) => (
-            <Badge variant="secondary" className="mr-2" key={v.code2}>
+            <Badge
+              variant="secondary"
+              className="mr-2"
+              key={BuildKey(v.code2, v.code2, v.hi)}
+            >
               {v.name}
             </Badge>
           ));
@@ -99,7 +104,11 @@ const MovieView: FunctionComponent<Props> = () => {
         Cell: (row) => {
           const missing = row.value;
           return missing.map((v) => (
-            <Badge className="mx-2" variant="warning" key={v.code2}>
+            <Badge
+              className="mx-2"
+              variant="warning"
+              key={BuildKey(v.code2, v.hi, v.forced)}
+            >
               {v.code2}
             </Badge>
           ));
diff --git a/frontend/src/Series/index.tsx b/frontend/src/Series/index.tsx
index ca13cdfe3..a01b8c06a 100644
--- a/frontend/src/Series/index.tsx
+++ b/frontend/src/Series/index.tsx
@@ -14,6 +14,7 @@ import { useReduxAction } from "../@redux/hooks/base";
 import { SeriesApi } from "../apis";
 import { ActionBadge } from "../components";
 import BaseItemView from "../generic/BaseItemView";
+import { BuildKey } from "../utilites";
 
 interface Props {}
 
@@ -59,7 +60,11 @@ const SeriesView: FunctionComponent<Props> = () => {
         accessor: "audio_language",
         Cell: (row) => {
           return row.value.map((v) => (
-            <Badge variant="secondary" className="mr-2" key={v.code2}>
+            <Badge
+              variant="secondary"
+              className="mr-2"
+              key={BuildKey(v.code2, v.forced, v.hi)}
+            >
               {v.name}
             </Badge>
           ));