99 <div class =" VideoSearch"
1010 <editor-input-field-pickable
1111 v-model =" videoSearchWord"
12- :title ="
13- $t('components.editing_screen.labels.video_keyword', {
14- source: 'NHK For School',
15- })
16- "
12+ selector =" video"
13+ :title =" $t('components.editing_screen.labels.video_keyword')"
1714 :placeholder =" $t('components.editing_screen.placeholder.video_keyword')"
1815 icon-name =" mdi-magnify"
1916 :button-text =" $t('components.editing_screen.search_videos.search')"
2017 @clickButton =" handleVideoSearchWord"
18+ @changeMovie =" handleChangeMovie"
2119 />
2220
2321 <div v-if =" videoSearchResult.length > 0" class =" SearchResult"
2422 <h3 class =" SearchResultTitle"
25- {{
26- $t('components.editing_screen.search_videos.search_result', {
27- source: 'NHK For School',
28- })
29- }}
23+ {{ $t('components.editing_screen.search_videos.search_result') }}
3024 </h3 >
3125 <ul class =" SearchResultList"
3226 <li v-for =" (v, i) in displayLists" :key =" i" class =" SearchResultItem"
5448 v-if =" v.videoUrl"
5549 class =" SearchResultButton"
5650 color =" #338dce"
57- @click =" registerVideoUrl(v.videoUrl)"
51+ @click ="
52+ registerVideoUrl(
53+ v.videoUrl,
54+ v.videoTitle,
55+ v.videoThumbnailUrl
56+ )
57+ "
5858 >
5959 <v-icon color =" white" v-icon >
6060 {{
8181<script lang="ts">
8282import { Vue , Component , Prop , Emit , Watch } from ' vue-property-decorator'
8383import EditorInputFieldPickable from ' ~/components/EditorInputFieldPickable.vue'
84+ import { MovieListItem , Movie } from ' ~/types/movies'
8485
85- let movies: any [] = []
86+ let movies: Movie [] = []
8687
8788export type formData = {
8889 videoUrl: string | null
8990 videoTitle: string
91+ videoSubTitle: string | null
92+ videoDescription: string | null
93+ videoPlayTime: string | null
9094 videoThumbnailUrl: string | null
9195}
9296
@@ -99,6 +103,9 @@ export default class EditLessonScreenInner3 extends Vue {
99103 tempFormData = {
100104 videoUrl: this .form .videoUrl ,
101105 videoTitle: this .form .videoTitle ,
106+ videoSubTitle: this .form .videoSubTitle ,
107+ videoDescription: this .form .videoDescription ,
108+ videoPlayTime: this .form .videoPlayTime ,
102109 videoThumbnailUrl:
103110 this .form .videoThumbnailUrl !== ' ' ? this .form .videoThumbnailUrl : null ,
104111 }
@@ -109,24 +116,28 @@ export default class EditLessonScreenInner3 extends Vue {
109116 default : () => ({
110117 videoUrl: null ,
111118 videoTitle: ' '
119+ videoSubTitle: ' '
120+ videoDescription: ' '
121+ videoPlayTime: ' '
112122 videoThumbnailUrl: ' '
113123 }),
114124 })
115125 public value! : formData
116126
127+ videoSourceType: string = ' '
117128 videoSearchWord: string = ' '
118- videoSearchResult: formData [] = []
129+ videoSearchResult: ( formData | undefined ) [] = []
119130 page: number = 1
120131 pageSize: number = 5
121132 length: number = 0
122- displayLists: formData [] = []
133+ displayLists: ( formData | undefined ) [] = []
123134
124135 mounted() {
125- fetch (' /data/movies.json'
126- .then ((res ) => res .json ())
127- .then ((data ) => {
128- movies = data
129- })
136+ // fetch('/data/movies.json')
137+ // .then((res) => res.json())
138+ // .then((data) => {
139+ // movies = data
140+ // })
130141 }
131142
132143 private get form(): formData {
@@ -147,6 +158,15 @@ export default class EditLessonScreenInner3 extends Vue {
147158 this .tempFormData = this .value
148159 }
149160
161+ private handleChangeMovie(selected : MovieListItem ) {
162+ this .videoSourceType = selected .sourceType
163+ fetch (` /data/${selected .dataFile } ` )
164+ .then ((res ) => res .json ())
165+ .then ((data ) => {
166+ movies = data
167+ })
168+ }
169+
150170 private handleVideoSearchWord() {
151171 if (this .videoSearchWord ) {
152172 this .page = 1
@@ -158,33 +178,16 @@ export default class EditLessonScreenInner3 extends Vue {
158178 return fullText .includes (this .videoSearchWord )
159179 })
160180 .map ((v ) => {
161- const = v [' 教材_ID'
162- const = parseInt (videoId .slice (5 , 6 ))
163- const = ' https://www2.nhk.or.jp/school/movie/'
164- const = videoId .slice (0 , 8 )
165- let videoThumbnailUrl = ` https://www.nhk.or.jp/das/image/${videoDirectory }/${videoId }_S_005.jpg `
166- let videoUrl
167- switch (videoType ) {
168- case 1 :
169- case 2 :
170- videoUrl = ` ${nfsMovieUrl }bangumi.cgi?das_id=${videoId }&p=box `
181+ let videoInfo
182+ switch (this .videoSourceType ) {
183+ case ' NHK'
184+ videoInfo = this .mapNhk (v )
171185 break
172- case 3 :
173- case 4 :
174- videoUrl = ` ${nfsMovieUrl }clip.cgi?das_id=${videoId }&p=box `
186+ case ' junyiacademy'
187+ videoInfo = this .mapJunyiacademy (v )
175188 break
176- default :
177- videoUrl = null
178- videoThumbnailUrl = ' '
179- }
180- return {
181- videoUrl ,
182- videoTitle: v [' 教材_タイトル'
183- videoSubTitle: v [' 教材_サブタイトル'
184- videoDescription: v [' 教材_説明'
185- videoPlayTime: v [' 教材_再生時間'
186- videoThumbnailUrl ,
187189 }
190+ return videoInfo
188191 })
189192
190193 this .length = Math .ceil (this .videoSearchResult .length / this .pageSize )
@@ -193,8 +196,10 @@ export default class EditLessonScreenInner3 extends Vue {
193196 }
194197 }
195198
196- private registerVideoUrl(url : string ) {
199+ private registerVideoUrl(url : string , title : string , thumbnailUrl : string ) {
197200 this .tempFormData .videoUrl = url
201+ this .tempFormData .videoTitle = title
202+ this .tempFormData .videoThumbnailUrl = thumbnailUrl
198203 }
199204
200205 private pageChange(pageNumber : number ) {
@@ -204,6 +209,48 @@ export default class EditLessonScreenInner3 extends Vue {
204209 )
205210 }
206211
212+ private mapNhk(v : Movie ): formData {
213+ const = v .inherentProperties .教材_ID
214+ const = parseInt (videoId .slice (5 , 6 ))
215+ const = ' https://www2.nhk.or.jp/school/movie/'
216+ const = videoId .slice (0 , 8 )
217+ let videoThumbnailUrl = ` https://www.nhk.or.jp/das/image/${videoDirectory }/${videoId }_S_005.jpg `
218+ let videoUrl
219+ switch (videoType ) {
220+ case 1 :
221+ case 2 :
222+ videoUrl = ` ${nfsMovieUrl }bangumi.cgi?das_id=${videoId }&p=box `
223+ break
224+ case 3 :
225+ case 4 :
226+ videoUrl = ` ${nfsMovieUrl }clip.cgi?das_id=${videoId }&p=box `
227+ break
228+ default :
229+ videoUrl = null
230+ videoThumbnailUrl = ' '
231+ }
232+ return {
233+ videoUrl ,
234+ videoTitle: v .title ,
235+ videoSubTitle: v .inherentProperties .教材_ サブタイトル,
236+ videoDescription: v .description ,
237+ videoPlayTime: v .inherentProperties .教材_ 再生時間,
238+ videoThumbnailUrl ,
239+ }
240+ }
241+
242+ private mapJunyiacademy(v : Movie ): formData {
243+ const : string = v .inherentProperties .url .slice (- 11 )
244+ return {
245+ videoUrl: v .inherentProperties .url ,
246+ videoTitle: v .title ,
247+ videoSubTitle: ' '
248+ videoDescription: v .description ,
249+ videoPlayTime: ' '
250+ videoThumbnailUrl: ` https://img.youtube.com/vi/${videoId }/hqdefault.jpg ` ,
251+ }
252+ }
253+
207254 /* CORS 回避必須
208255 @Watch('form.videoUrl')
209256 onChangeVideoUrl() {
0 commit comments