動画検索対象切り替え対応

JQinglong · JQinglong · commit 6732e6414833 · 2021-05-23T12:29:03.000+09:00
diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
@@ -77,7 +77,7 @@
         "date": "日付設定",
         "time": "時間設定",
         "subject_label_color": "ラベル色",
-        "video_keyword": "オプション機能：{source}の動画検索",
+        "video_keyword": "オプション機能：{source}動画検索",
         "video_url": "参考動画URL",
         "video_thumbnail": "動画サムネイル・キャプション表示",
         "textbook_page": "教科書ページ",
@@ -90,7 +90,7 @@
       "required": "*マークのあるものは必須項目です",
       "search_videos": {
         "search": "検索",
-        "search_result": "{source}の動画検索結果",
+        "search_result": "{source}動画検索結果",
         "add_to_video_urls": "参考動画URLに登録する"
       }
     },
diff --git a/src/components/EditLessonScreenInner3.vue b/src/components/EditLessonScreenInner3.vue
@@ -9,22 +9,24 @@
     <div class="VideoSearch">
       <editor-input-field-pickable
         v-model="videoSearchWord"
+        selector="video"
         :title="
           $t('components.editing_screen.labels.video_keyword', {
-            source: 'NHK For School',
+            source: '',
           })
         "
         :placeholder="$t('components.editing_screen.placeholder.video_keyword')"
         icon-name="mdi-magnify"
         :button-text="$t('components.editing_screen.search_videos.search')"
         @clickButton="handleVideoSearchWord"
+        @changeMovie="handleChangeMovie"
       />
 
       <div v-if="videoSearchResult.length > 0" class="SearchResult">
         <h3 class="SearchResultTitle">
           {{
             $t('components.editing_screen.search_videos.search_result', {
-              source: 'NHK For School',
+              source: '',
             })
           }}
         </h3>
@@ -114,6 +116,7 @@ export default class EditLessonScreenInner3 extends Vue {
   })
   public value!: formData
 
+  videoSourceType: string = ''
   videoSearchWord: string = ''
   videoSearchResult: formData[] = []
   page: number = 1
@@ -122,11 +125,11 @@ export default class EditLessonScreenInner3 extends Vue {
   displayLists: formData[] = []
 
   mounted() {
-    fetch('/data/movies.json')
-      .then((res) => res.json())
-      .then((data) => {
-        movies = data
-      })
+    // fetch('/data/movies.json')
+    //   .then((res) => res.json())
+    //   .then((data) => {
+    //     movies = data
+    //   })
   }
 
   private get form(): formData {
@@ -147,6 +150,15 @@ export default class EditLessonScreenInner3 extends Vue {
     this.tempFormData = this.value
   }
 
+  private handleChangeMovie(selected) {
+    this.videoSourceType = selected.sourceType
+    fetch(`/data/${selected.dataFile}`)
+      .then((res) => res.json())
+      .then((data) => {
+        movies = data
+      })
+  }
+
   private handleVideoSearchWord() {
     if (this.videoSearchWord) {
       this.page = 1
@@ -158,33 +170,16 @@ export default class EditLessonScreenInner3 extends Vue {
           return fullText.includes(this.videoSearchWord)
         })
         .map((v) => {
-          const videoId = v['教材_ID']
-          const videoType = parseInt(videoId.slice(5, 6))
-          const nfsMovieUrl = 'https://www2.nhk.or.jp/school/movie/'
-          const videoDirectory = videoId.slice(0, 8)
-          let videoThumbnailUrl = `https://www.nhk.or.jp/das/image/${videoDirectory}/${videoId}_S_005.jpg`
-          let videoUrl
-          switch (videoType) {
-            case 1:
-            case 2:
-              videoUrl = `${nfsMovieUrl}bangumi.cgi?das_id=${videoId}&p=box`
+          let videoInfo
+          switch (this.videoSourceType) {
+            case 'NHK':
+              videoInfo = this.mapNhk(v)
               break
-            case 3:
-            case 4:
-              videoUrl = `${nfsMovieUrl}clip.cgi?das_id=${videoId}&p=box`
+            case 'junyiacademy':
+              videoInfo = this.mapJunyiacademy(v)
               break
-            default:
-              videoUrl = null
-              videoThumbnailUrl = ''
-          }
-          return {
-            videoUrl,
-            videoTitle: v['教材_タイトル'],
-            videoSubTitle: v['教材_サブタイトル'],
-            videoDescription: v['教材_説明'],
-            videoPlayTime: v['教材_再生時間'],
-            videoThumbnailUrl,
           }
+          return videoInfo
         })
 
       this.length = Math.ceil(this.videoSearchResult.length / this.pageSize)
@@ -204,6 +199,47 @@ export default class EditLessonScreenInner3 extends Vue {
     )
   }
 
+  private mapNhk(v) {
+    const videoId = v.inherentProperties.教材_ID
+    const videoType = parseInt(videoId.slice(5, 6))
+    const nfsMovieUrl = 'https://www2.nhk.or.jp/school/movie/'
+    const videoDirectory = videoId.slice(0, 8)
+    let videoThumbnailUrl = `https://www.nhk.or.jp/das/image/${videoDirectory}/${videoId}_S_005.jpg`
+    let videoUrl
+    switch (videoType) {
+      case 1:
+      case 2:
+        videoUrl = `${nfsMovieUrl}bangumi.cgi?das_id=${videoId}&p=box`
+        break
+      case 3:
+      case 4:
+        videoUrl = `${nfsMovieUrl}clip.cgi?das_id=${videoId}&p=box`
+        break
+      default:
+        videoUrl = null
+        videoThumbnailUrl = ''
+    }
+    return {
+      videoUrl,
+      videoTitle: v.title,
+      videoSubTitle: v.inherentProperties.教材_サブタイトル,
+      videoDescription: v.description,
+      videoPlayTime: v.inherentProperties.教材_再生時間,
+      videoThumbnailUrl,
+    }
+  }
+
+  private mapJunyiacademy(v) {
+    return {
+      videoUrl: v.inherentProperties.url,
+      videoTitle: v.title,
+      videoSubTitle: '',
+      videoDescription: v.description,
+      videoPlayTime: '',
+      videoThumbnailUrl: v.inherentProperties.thumbnailUrl,
+    }
+  }
+
   /* CORS 回避必須
   @Watch('form.videoUrl')
   onChangeVideoUrl() {
diff --git a/src/components/EditorInputFieldPickable.vue b/src/components/EditorInputFieldPickable.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <span v-if="title" class="EditorField-Title">{{ title }}</span>
+    <span v-if="title" class="EditorField-Title"
+      >{{ title }}
+      <movie-selector v-if="selector" @change="$emit('changeMovie', $event)" />
+    </span>
     <div class="EditorField-Form">
       <editor-input-field
         :value="value"
@@ -25,9 +28,10 @@
 import Vue from 'vue'
 import EditorInputField from '@/components/EditorInputField.vue'
 import BaseEditorButton from '@/components/BaseEditorButton.vue'
+import MovieSelector from '@/components/MovieSelector.vue'
 
 export default Vue.extend({
-  components: { EditorInputField, BaseEditorButton },
+  components: { EditorInputField, BaseEditorButton, MovieSelector },
   props: {
     title: {
       type: String,
@@ -69,13 +73,18 @@ export default Vue.extend({
       required: false,
       default: '',
     },
+    selector: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
 })
 </script>
 
 <style lang="scss" scoped>
 .EditorField-Title {
-  display: block;
+  display: flex;
   font-size: 16px;
   font-weight: bold;
   color: $color-white;
diff --git a/src/components/MovieSelector.vue b/src/components/MovieSelector.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="MovieSelector">
+    <v-select
+      v-model="selectedMovie"
+      :items="movies"
+      item-text="name"
+      item-value="sourceType"
+      return-object
+      class="MovieSelector"
+      dense
+      hide-details
+      solo
+      @change="$emit('change', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+type MovieListItem = { sourceType: string; name: string; dataFile: string }
+type LocalData = {
+  selectedMovie: string
+  movies: MovieListItem[]
+}
+
+export default Vue.extend({
+  data(): LocalData {
+    return {
+      selectedMovie: '',
+      movies: [],
+    }
+  },
+  mounted() {
+    this.selectedMovie =
+      this.$root.$i18n.locale === 'zh-tw' ? 'junyiacademy' : 'NHK'
+    fetch('/data/movie-source.json')
+      .then((res) => res.json())
+      .then((data) => {
+        this.movies = data
+        this.$emit(
+          'change',
+          this.movies.find((m) => m.sourceType === this.selectedMovie)
+        )
+      })
+  },
+})
+</script>
diff --git a/src/static/data/movie-source.json b/src/static/data/movie-source.json
@@ -0,0 +1,12 @@
+[
+  {
+    "sourceType": "NHK",
+    "name": "NHK For Schoolの動画",
+    "dataFile": "movies2-nhk.json"
+  },
+  {
+  "sourceType": "junyiacademy",
+  "name": "均一教育平台 junyiacademy",
+  "dataFile": "movies-junyiacademy.json"
+  }
+]
diff --git a/src/static/data/movies-junyiacademy.json b/src/static/data/movies-junyiacademy.json
@@ -0,0 +1,22 @@
+[
+  {
+    "title": "【暖身】認識 5 以內的數",
+    "description": "翰林國小數學",
+    "keywords": "【一上】數到 10",
+    "source": "junyiacademy",
+    "inherentProperties": {
+      "url": "https://www.junyiacademy.org/course-compare/math-grade-1-a/j-m1ach1/v/c3DGTr7Vmsc",
+      "thumbnailUrl": ""
+    }
+  },
+  {
+    "title": "【觀念】認識 5 以內的數",
+    "description": "翰林國小數學",
+    "keywords": "【一上】數到 10",
+    "source": "junyiacademy",
+    "inherentProperties": {
+      "url": "https://www.junyiacademy.org/course-compare/math-grade-1-a/j-m1ach1/v/JMN5LjxD6ds",
+      "thumbnailUrl": ""
+    }
+  }
+]
diff --git a/src/static/data/movies2-nhk.json b/src/static/data/movies2-nhk.json
