diff --git a/api/src/captions.js b/api/src/captions.js
index 3195793..ce4f207 100644
--- a/api/src/captions.js
+++ b/api/src/captions.js
@@ -66,22 +66,26 @@ export default class Captions {
return obj
}
+ mapResult(d) {
+ return {
+ id: d._id,
+ link: d._source.url,
+ content: d._source.text,
+ time_start: Math.floor(d._source.start),
+ time_end: Math.ceil(d._source.end),
+ programme: {
+ id: d._source.programme_id,
+ title: d._source.programme_title,
+ date: d._source.programme_date
+ }
+ }
+ }
+
parseResults(results, page) {
const data = {
page,
length: results.hits.total.value,
- results: results.hits.hits.map(d => ({
- id: d._id,
- link: d._source.url,
- content: d._source.text,
- time_start: Math.floor(d._source.start),
- time_end: Math.ceil(d._source.end),
- programme: {
- id: d._source.programme_id,
- title: d._source.programme_title,
- date: d._source.programme_date
- }
- }))
+ results: results.hits.hits.map(this.mapResult)
}
if (results.aggregations) {
data.aggregations = results.aggregations.matches_over_time.buckets.map(
@@ -116,4 +120,27 @@ export default class Captions {
})
return this.parseResults(results, page)
}
+
+ async fetchContext(
+ programme_id,
+ start_time,
+ range
+ ) {
+ const query = {
+ query: {
+ bool: {
+ filter: [
+ { term: { programme_id: programme_id } },
+ { range: { start: { gte: parseInt(start_time)-range/2, lte: parseInt(start_time)+range/2 }} }
+ ]
+ }
+ },
+ sort: { start: { order: 'asc' }}
+ }
+ const results = await this.client.search({
+ index: 'captions',
+ body: query
+ })
+ return results.hits.hits.map(this.mapResult)
+ }
}
diff --git a/api/src/index.js b/api/src/index.js
index 7e5a5f6..0ed5752 100644
--- a/api/src/index.js
+++ b/api/src/index.js
@@ -34,5 +34,14 @@ app.get('/search', cors(), async (request, response) => {
}
})
+app.get('/fetchContext', cors(), async (request, response) => {
+ const results = await captions.fetchContext(
+ request.query.programme_id,
+ request.query.start_time,
+ request.query.range
+ )
+ response.json(results)
+})
+
// Register express routes & serve
app.listen(PORT, () => console.log(`Server running on port ${PORT}`))
diff --git a/web/src/App.vue b/web/src/App.vue
index 3fa2a20..8595903 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -19,7 +19,7 @@
-
+
@@ -27,7 +27,7 @@
import Results from './components/Results.vue'
import Search from './components/Search.vue'
import SearchFilters from './components/SearchFilters.vue'
-import VideoModal from './components/VideoModal.vue'
+import ResultContext from './components/ResultContext.vue'
export default {
name: 'app',
@@ -35,7 +35,7 @@ export default {
Results,
Search,
SearchFilters,
- VideoModal
+ ResultContext
}
}
diff --git a/web/src/components/VideoModal.vue b/web/src/components/ResultContext.vue
similarity index 72%
rename from web/src/components/VideoModal.vue
rename to web/src/components/ResultContext.vue
index e41468b..8d184db 100644
--- a/web/src/components/VideoModal.vue
+++ b/web/src/components/ResultContext.vue
@@ -9,8 +9,10 @@
-
-
+
+
+ {{ items.time_start | formatTime }}: {{ items.content }}
+
@@ -24,9 +26,12 @@ import moment from 'moment'
import { mapActions, mapState } from 'vuex'
export default {
- name: 'VideoModal',
+ name: 'ResultContext',
computed: {
- ...mapState(['currentResult']),
+ ...mapState([
+ 'currentResult',
+ 'resultContext'
+ ]),
title: function() {
const date = this.currentResult.programme.date
return `${moment(date).format(
@@ -37,13 +42,6 @@ export default {
)}h (${this.$options.filters.formatTime(
this.currentResult.time_start
)})`
- },
- videoUrl: function() {
- // XXX: We try embedding from a given time, but it doesn't work, see #27
- const parts = this.currentResult.link.split('/')
- return `https://secure-embed.rtve.es/drmn/embed/video/${
- parts[parts.length - 1]
- }`
}
},
watch: {
@@ -88,17 +86,4 @@ export default {
z-index: 1;
cursor: pointer;
}
-.video-responsive {
- position: relative;
- height: 0;
- padding-bottom: 56.25%;
-
- iframe {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-}
diff --git a/web/src/components/Results.vue b/web/src/components/Results.vue
index acbd8a2..1c7ca2b 100644
--- a/web/src/components/Results.vue
+++ b/web/src/components/Results.vue
@@ -41,14 +41,8 @@
>
-
- Play Video
-
+
+ Show context
@@ -129,7 +123,7 @@ export default {
onGoToVideoBtnClick(result) {
window.open(result.link, '_blank')
},
- onPlayVideoBtnClick(result) {
+ onShowContextBtnClick(result) {
this.setCurrentResult(result)
},
getAggregationObject(d) {
diff --git a/web/src/store.js b/web/src/store.js
index ca032f0..4cc01e2 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -9,6 +9,7 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentResult: null,
+ resultContext: null,
loading: false,
query: '',
queryDate: null, // date.from - date.to
@@ -24,6 +25,7 @@ export default new Vuex.Store({
},
setCurrentResult({ commit }, payload) {
commit('setCurrentResult', payload)
+ commit('fetchResultContext', payload)
},
setQueryDate({ commit, state }, payload) {
commit('setQueryDate', payload)
@@ -64,6 +66,22 @@ export default new Vuex.Store({
setCurrentResult(state, payload) {
state.currentResult = payload
},
+ fetchResultContext(state, payload) {
+ if (state.currentResult === null) {
+ state.resultContext = null
+ } else {
+ const params = {
+ programme_id: state.currentResult.programme.id,
+ start_time: state.currentResult.time_start,
+ range: 60 // 1 minute context
+ }
+ axios
+ .get(process.env.VUE_APP_API_URL + 'fetchContext', { params })
+ .then(response => {
+ state.resultContext = response.data
+ })
+ }
+ },
setQuery(state, payload) {
state.loading = true
state.query = payload.trim() // store query