Merge branch 'development' into translations_src-assets-locales-ja-json--development_en

Author: MaySoMusician

src/assets/locales/ja.json

@@ -24,8 +24,8 @@
         "title": "タイトル",
         "subject_name": "教科名",
         "textbook": "教科書",
-        "goal": "学習の目的",
-        "description": "詳細",
+        "goal": "ねらい",
+        "description": "内容（ないよう）",
         "videos": "参考動画",
         "materials": "副教材"
       },
@@ -69,13 +69,17 @@
         "date": "日付設定",
         "time": "時間設定",
         "subject_label_color": "ラベル色",
-        "description": "詳細説明",
+        "description": "内容（ないよう）",
+        "video_keyword": "（オプション機能）動画検索",
         "video_url": "参考動画URL",
         "video_thumbnail": "動画サムネイル・キャプション表示",
         "textbook_page": "教科書ページ",
         "material_title": "副教材タイトル",
         "material_url": "副教材URL"
       },
+      "placeholders": {
+        "video_keyword": "例） 理科"
+      },
       "required": "*マークのあるものは必須項目です"
     },
     "editing_visibility_dialog": {

src/components/EditLessonScreenInner1.vue

@@ -141,12 +141,6 @@
         @clickButton="endTimePickerOpen = true"
       />
     </div>
-    <editor-input-field-pickable
-      v-model="tempFormData.title"
-      :title="`${$t('common.lesson_data.labels.title')} *`"
-      :label="$t('common.lesson_data.labels.title')"
-      placeholder="例）理科"
-    />
     <div class="EditingScreen-Flex">
       <editor-input-field-pickable
         v-model="tempFormData.subjectName"
@@ -164,6 +158,12 @@
         @clickPickerButton="colorPickerOpen = true"
       />
     </div>
+    <editor-input-field-pickable
+      v-model="tempFormData.title"
+      :title="`${$t('common.lesson_data.labels.title')} *`"
+      :label="$t('common.lesson_data.labels.title')"
+      placeholder="例）理科"
+    />
   </div>
 </template>
 

src/components/EditLessonScreenInner3.vue

@@ -6,29 +6,71 @@
       label="video"
       placeholder="https://"
     />
-    <video-thumbnail
-      v-if="tempFormData.videoTitle && tempFormData.videoThumbnailUrl"
-      :caption="tempFormData.videoTitle"
-      :title="$t('components.editing_screen.labels.video_thumbnail')"
-      :thumbnail-url="tempFormData.videoThumbnailUrl"
+
+    <editor-input-field-pickable
+      v-model="videoSearchWord"
+      :title="$t('components.editing_screen.labels.video_keyword')"
+      :placeholders="$t('components.editing_screen.placeholder.video_keyword')"
     />
+
+    <button class="Button" @click="handleVideoSearchWord">検索する</button>
+
+    <div v-if="videoSearchResult.length > 0" class="SearchResult">
+      <h3>NHK For Schoolの動画検索結果</h3>
+      <ul>
+        <li v-for="(v, i) in displayLists" :key="i" class="SearchResultItem">
+          <component
+            :is="v.videoUrl ? 'a' : 'span'"
+            :href="v.videoUrl"
+            :target="v.videoUrl ? '_blank' : null"
+            class="SearchResultLink"
+          >
+            {{ v.videoTitle }}&emsp;{{ v.videoSubTitle }}
+          </component>
+          <p class="SearchResultDescription">{{ v.videoDescription }}</p>
+          <span>{{ v.videoPlayTime }}</span>
+          <br v-if="v.videoThumbnailUrl" />
+          <img
+            v-if="v.videoThumbnailUrl"
+            :src="v.videoThumbnailUrl"
+            :alt="v.videoTitle"
+            width="240"
+          />
+          <br v-if="v.videoUrl" />
+          <button
+            v-if="v.videoUrl"
+            class="Button"
+            @click="registerVideoUrl(v.videoUrl)"
+          >
+            参考動画URLに登録する
+          </button>
+        </li>
+      </ul>
+      <v-pagination
+        v-model="page"
+        :length="length"
+        :total-visible="5"
+        @input="pageChange"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator'
-import VideoThumbnail from '@/components/VideoThumbnail.vue'
 import EditorInputFieldPickable from '~/components/EditorInputFieldPickable.vue'
 
+let movies: any[] = []
+
 export type formData = {
-  videoUrl: string
+  videoUrl: string | null
   videoTitle: string
   videoThumbnailUrl: string
 }
+
 @Component({
   components: {
     EditorInputFieldPickable,
-    VideoThumbnail,
   },
 })
 export default class EditLessonScreenInner3 extends Vue {
@@ -42,13 +84,28 @@ export default class EditLessonScreenInner3 extends Vue {
     type: Object as () => formData,
     required: true,
     default: () => ({
-      videoUrl: '',
+      videoUrl: null,
       videoTitle: '',
       videoThumbnailUrl: '',
     }),
   })
   public value!: formData
 
+  videoSearchWord: string = ''
+  videoSearchResult: formData[] = []
+  page: number = 1
+  pageSize: number = 5
+  length: number = 0
+  displayLists: formData[] = []
+
+  mounted() {
+    fetch('/data/movies.json')
+      .then((res) => res.json())
+      .then((data) => {
+        movies = data
+      })
+  }
+
   private get form(): formData {
     return this.value
   }
@@ -58,9 +115,61 @@ export default class EditLessonScreenInner3 extends Vue {
     this.input(this.tempFormData)
   }
 
-  @Watch('value', { deep: true })
-  onChangeValueFormData() {
-    this.tempFormData = this.value
+  private handleVideoSearchWord() {
+    if (this.videoSearchWord) {
+      this.page = 1
+      this.videoSearchResult = movies
+        .filter((v) => {
+          const fullText = Object.keys(v)
+            .map((k) => v[k])
+            .join()
+          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`
+              break
+            case 3:
+            case 4:
+              videoUrl = `${nfsMovieUrl}clip.cgi?das_id=${videoId}&p=box`
+              break
+            default:
+              videoUrl = null
+              videoThumbnailUrl = ''
+          }
+          return {
+            videoUrl,
+            videoTitle: v['教材_タイトル'],
+            videoSubTitle: v['教材_サブタイトル'],
+            videoDescription: v['教材_説明'],
+            videoPlayTime: v['教材_再生時間'],
+            videoThumbnailUrl,
+          }
+        })
+
+      this.length = Math.ceil(this.videoSearchResult.length / this.pageSize)
+
+      this.displayLists = this.videoSearchResult.slice(0, this.pageSize)
+    }
+  }
+
+  private registerVideoUrl(url: string) {
+    this.tempFormData.videoUrl = url
+  }
+
+  private pageChange(pageNumber: number) {
+    this.displayLists = this.videoSearchResult.slice(
+      this.pageSize * (pageNumber - 1),
+      this.pageSize * pageNumber
+    )
   }
 
   /* CORS 回避必須
@@ -91,3 +200,23 @@ export default class EditLessonScreenInner3 extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.Button {
+  color: $color-white;
+  margin-bottom: 20px;
+}
+.SearchResult {
+  color: $color-white;
+  margin-bottom: 20px;
+}
+.SearchResultItem {
+  margin-bottom: 12px;
+}
+.SearchResultLink {
+  color: $color-white;
+}
+.SearchResultDescription {
+  margin: 0;
+}
+</style>