add language toggle function for transcription (#179)

ocw-central · Nov 16, 2022 · d82d50e · d82d50e
1 parent 515bcac
commit d82d50e
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 36 deletions.
diff --git a/graphql.schema.json b/graphql.schema.json
@@ -220,6 +220,11 @@
             "name": "Syllabus",
             "ofType": null
           },
+          {
+            "kind": "OBJECT",
+            "name": "Translation",
+            "ofType": null
+          },
           {
             "kind": "OBJECT",
             "name": "Video",
@@ -1658,6 +1663,71 @@
         "enumValues": null,
         "possibleTypes": null
       },
+      {
+        "kind": "OBJECT",
+        "name": "Translation",
+        "description": null,
+        "fields": [
+          {
+            "name": "id",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "ID",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "languageCode",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "translation",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          }
+        ],
+        "inputFields": null,
+        "interfaces": [
+          {
+            "kind": "INTERFACE",
+            "name": "Node",
+            "ofType": null
+          }
+        ],
+        "enumValues": null,
+        "possibleTypes": null
+      },
       {
         "kind": "OBJECT",
         "name": "Video",
@@ -1811,6 +1881,26 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "translations",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "LIST",
+                "name": null,
+                "ofType": {
+                  "kind": "OBJECT",
+                  "name": "Translation",
+                  "ofType": null
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "videoLength",
             "description": null,

diff --git a/src/components/subjectPageComponents/VideoTranscription.tsx b/src/components/subjectPageComponents/VideoTranscription.tsx
@@ -1,16 +1,30 @@
+import { Maybe, Translation } from "@/generated/graphql";
 import { theme } from "@/utils/themes";
-import { Box, Grid, List, Typography } from "@mui/material";
+import {
+  Grid,
+  List,
+  Typography,
+  Select,
+  SelectChangeEvent,
+  MenuItem,
+  FormControl,
+} from "@mui/material";
 import ListItem from "@mui/material/ListItem";
 import { alpha } from "@mui/material/styles";
+import { useState } from "react";
 
 type Props = {
   transcription: string;
+  translations: Maybe<Translation>[];
   setTime: (time: { start: number }) => void;
   setAutoPlayOn: (autoPlayOn: number) => void;
 };
 
-function processText(text: string) {
+function processText(text?: string) {
   //remove empty lines
+  if (text === undefined) {
+    return [];
+  }
   const lines = text.split(/\r?\n/);
   const processedLines = lines.map((line) => {
     const [startTime] = line.split(",");
@@ -35,57 +49,115 @@ function convertSecondToTime(second: number) {
 }
 
 export function VideoTranscription(props: Props) {
-  const processedLines = processText(props.transcription);
+  const [language, setLanguage] = useState("original");
+  const handleLanguageChange = (event: SelectChangeEvent) => {
+    setLanguage(event.target.value as string);
+  };
+  const translations = new Map<string, string>();
+  for (const t of props.translations) {
+    if (t) {
+      translations.set(t.languageCode, t.translation);
+    }
+  }
+  const transcription =
+    language == "original" ? props.transcription : translations.get(language);
+  const processedLines = processText(transcription);
+
+  const languages = ["original", ...translations.keys()];
+  const language_map: { [key: string]: string } = {
+    original: "オリジナル",
+    en: "English",
+    ja: "日本語",
+  };
 
   return (
-    <Box
+    <Grid
+      container
       className="VideoTranscription"
       sx={{
         bgcolor: alpha(theme.palette.primary.main, 0.15),
         borderRadius: 0.5,
-        p: { xs: 2, sm: 3 },
-        overflow: "auto",
-        "&::-webkit-scrollbar": {
-          width: 10,
-        },
-        "&::-webkit-scrollbar-track": {
-          backgroundColor: alpha(theme.palette.primary.dark, 0.3),
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "darkgrey",
-          outline: "3px solid slategrey",
-
-          "&:hover": {
-            backgroundColor: "grey",
-            cursor: "pointer",
-          },
-        },
-        "&::-webkit-scrollbar-thumb:hover": {
-          background: "#555",
-          cursor: "grabbing",
-        },
+        pt: 1,
       }}
     >
-      <List
+      <Grid
+        container
+        direction="row"
         sx={{
-          width: "100%",
-          maxHeight: { xs: 250, sm: 540 },
+          mt: 1,
+          mb: 1,
         }}
-        subheader={
+      >
+        <Grid
+          container
+          xs={12}
+          sx={{
+            justifyContent: "end",
+            pr: 2,
+          }}
+        >
+          <FormControl size="small">
+            <Select
+              value={language}
+              onChange={handleLanguageChange}
+              sx={{
+                height: 30,
+              }}
+            >
+              {languages.map((l) => (
+                <MenuItem key={l} value={l}>
+                  {language_map[l]}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12}>
           <Typography
-            fontSize={{ xs: 15, sm: 25 }}
-            component="div"
+            fontSize={{ xs: 20, sm: 20 }}
             align="left"
             sx={{
               borderLeft: 1,
-              p: 1,
+              ml: 2,
+              pl: 1,
               color: theme.palette.primary.dark,
               fontWeight: "bold",
             }}
           >
             自動書き起こし
           </Typography>
-        }
+        </Grid>
+      </Grid>
+
+      <List
+        sx={{
+          width: "100%",
+          maxHeight: { xs: 250, sm: 540 },
+          px: {
+            xs: 2,
+            md: 2,
+          },
+          overflow: "auto",
+          "&::-webkit-scrollbar": {
+            width: 10,
+          },
+          "&::-webkit-scrollbar-track": {
+            backgroundColor: alpha(theme.palette.primary.dark, 0.3),
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "darkgrey",
+            outline: "3px solid slategrey",
+
+            "&:hover": {
+              backgroundColor: "grey",
+              cursor: "pointer",
+            },
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: "#555",
+            cursor: "grabbing",
+          },
+        }}
       >
         {processedLines.map((line, index) => {
           return (
@@ -98,7 +170,6 @@ export function VideoTranscription(props: Props) {
               }}
               sx={{
                 color: "white",
-                p: 0,
                 "&:hover, &:focus": {
                   bgcolor: alpha(theme.palette.primary.main, 0.3),
                   cursor: "pointer",
@@ -140,6 +211,6 @@ export function VideoTranscription(props: Props) {
           );
         })}
       </List>
-    </Box>
+    </Grid>
   );
 }
diff --git a/src/components/subjectPageComponents/VideoWithTranscription.tsx b/src/components/subjectPageComponents/VideoWithTranscription.tsx
@@ -124,6 +124,7 @@ export function VideoWithTranscription(props: Props) {
         >
           <VideoTranscription
             transcription={FocusedVideo.transcription}
+            translations={FocusedVideo.translations}
             setTime={SetVideoStartTime}
             setAutoPlayOn={SetAutoPlayOn}
           />

diff --git a/src/documents/subject.graphql b/src/documents/subject.graphql
@@ -45,6 +45,11 @@ query subject($id: ID!) {
       videoLength
       language
       transcription
+      translations {
+        id
+        languageCode
+        translation
+      }
     }
     location
     resources {

diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -154,6 +154,13 @@ export type Syllabus = Node & {
   targetedAudience: Scalars['String'];
 };
 
+export type Translation = Node & {
+  __typename?: 'Translation';
+  id: Scalars['ID'];
+  languageCode: Scalars['String'];
+  translation: Scalars['String'];
+};
+
 export type Video = Node & {
   __typename?: 'Video';
   chapters: Array<Chapter>;
@@ -165,6 +172,7 @@ export type Video = Node & {
   ordering: Scalars['Int'];
   title: Scalars['String'];
   transcription: Scalars['String'];
+  translations: Array<Maybe<Translation>>;
   videoLength: Scalars['Int'];
 };
 
@@ -195,7 +203,7 @@ export type SubjectQueryVariables = Exact<{
 }>;
 
 
-export type SubjectQuery = { __typename?: 'Query', subject: { __typename?: 'Subject', id: string, title: string, category: string, location: string, department: string, firstHeldOn?: any | null, faculty: string, language: string, freeDescription: string, series: string, academicField: string, thumbnailLink: string, videos: Array<{ __typename?: 'Video', id: string, title: string, ordering: number, link: string, faculty: string, lecturedOn?: any | null, videoLength: number, language: string, transcription: string, chapters: Array<{ __typename?: 'Chapter', id: string, startAt: number, topic: string, thumbnailLink: string }> }>, resources: Array<{ __typename?: 'Resource', id: string, title: string, ordering: number, description: string, link: string }>, relatedSubjects: Array<{ __typename?: 'RelatedSubject', id: string, title: string, thumbnailLink: string, faculty: string }>, syllabus?: { __typename?: 'Syllabus', id: string, faculty: string, language: string, subjectNumbering: string, academicYear: number, semester: string, numCredit: number, courseFormat: string, assignedGrade: string, targetedAudience: string, courseDayPeriod: string, outline: string, objective: string, lessonPlan: string, gradingMethod: string, courseRequirement: string, outClassLearning: string, reference: string, remark: string, subpages: Array<{ __typename?: 'Subpage', id: string, content: string }> } | null } };
+export type SubjectQuery = { __typename?: 'Query', subject: { __typename?: 'Subject', id: string, title: string, category: string, location: string, department: string, firstHeldOn?: any | null, faculty: string, language: string, freeDescription: string, series: string, academicField: string, thumbnailLink: string, videos: Array<{ __typename?: 'Video', id: string, title: string, ordering: number, link: string, faculty: string, lecturedOn?: any | null, videoLength: number, language: string, transcription: string, chapters: Array<{ __typename?: 'Chapter', id: string, startAt: number, topic: string, thumbnailLink: string }>, translations: Array<{ __typename?: 'Translation', id: string, languageCode: string, translation: string } | null> }>, resources: Array<{ __typename?: 'Resource', id: string, title: string, ordering: number, description: string, link: string }>, relatedSubjects: Array<{ __typename?: 'RelatedSubject', id: string, title: string, thumbnailLink: string, faculty: string }>, syllabus?: { __typename?: 'Syllabus', id: string, faculty: string, language: string, subjectNumbering: string, academicYear: number, semester: string, numCredit: number, courseFormat: string, assignedGrade: string, targetedAudience: string, courseDayPeriod: string, outline: string, objective: string, lessonPlan: string, gradingMethod: string, courseRequirement: string, outClassLearning: string, reference: string, remark: string, subpages: Array<{ __typename?: 'Subpage', id: string, content: string }> } | null } };
 
 export type SubjectOnHomepageQueryVariables = Exact<{
   id: Scalars['ID'];
@@ -358,6 +366,11 @@ export const SubjectDocument = gql`
       videoLength
       language
       transcription
+      translations {
+        id
+        languageCode
+        translation
+      }
     }
     location
     resources {

diff --git a/src/gqltypes/subject.ts b/src/gqltypes/subject.ts
@@ -30,6 +30,12 @@ export type Subject = {
       topic: string;
       thumbnailLink: string;
     }[];
+    translations: ({
+      __typename?: "Translation" | undefined;
+      id: string;
+      languageCode: string;
+      translation: string;
+    } | null)[];
   }[];
   resources: {
     __typename?: "Resource" | undefined;