package-lock.json

@@ -1630,6 +1630,11 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abortcontroller-polyfill": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.3.0.tgz",
+      "integrity": "sha512-lbWQgf+eRvku3va8poBlDBO12FigTQr9Zb7NIjXrePrhxWVKdCP2wbDl1tLDaYa18PWTom3UEWwdH13S46I+yA=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -10915,6 +10920,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

package.json

@@ -10,6 +10,7 @@
     "docker": "scripts/docker.sh"
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.3.0",
     "base64-js": "^1.3.1",
     "body-scroll-toggle": "^0.2.0",
     "date-fns": "^2.4.1",
@@ -21,6 +22,7 @@
     "reconnecting-websocket": "^4.2.0",
     "supports-webp": "^2.0.1",
     "text-encoder-lite": "^2.0.0",
+    "throttle-debounce": "^2.1.0",
     "vue": "^2.6.10",
     "vue-clamp": "^0.2.1",
     "vue-feather-icons": "^5.0.0",

src/components/generic/Header.vue

 <template>
-  <header class="header d-flex no-select">
-    <HeaderTitle :level="level" class="header-title ma-0 mr-2"
+  <header class="header d-flex no-select" :class="alwaysShowTitle ? 'show-full-title' : null">
+    <HeaderTitle :level="level" class="header-title ma-0 mr-3"
                  :class="`t-${displayLevel || (6 - level) }`">{{ title }}</HeaderTitle>
     <div class="header-addon" v-if="$slots.default">
       <slot />
@@ -15,6 +15,7 @@
     components: { HeaderTitle },
     props: {
       title: String,
+      alwaysShowTitle: Boolean,
       displayLevel: {
         type: Number,
         default: null
@@ -32,13 +33,24 @@
     align-items: center;
     max-width: 100%;
     white-space: nowrap;
+
+    &.show-full-title {
+      .header-title {
+        min-width: fit-content;
+      }
+    }
   }
 
   .header-title {
-    flex: 1;
+    flex: 0 1 auto;
     min-width: 0;
     max-width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+  .header-addon {
+    flex: 0 1 auto;
+    margin-left: auto;
+  }
 </style>

src/components/generic/Input.vue

+<template>
+  <div class="input d-flex">
+    <input :type="type" v-model="localValue" :aria-label="label" :list="autocompleteList ? id : null"
+           :autofocus="autofocus" :autocomplete="autocomplete" :placeholder="placeholder" :name="name"
+           v-bind="$attrs" ref="inputEl"/>
+    <slot/>
+    <datalist v-if="autocomplete" :id="id">
+      <option :value="option.value" v-for="option in options" :key="option.value"></option>
+    </datalist>
+  </div>
+</template>
+
+<script>
+  import { throttle } from 'throttle-debounce'
+
+  export default {
+    props: {
+      id: String,
+      name: String,
+      value: String,
+      type: String,
+      label: String,
+      autofocus: Boolean,
+      autocomplete: String,
+      autocompleteList: Function,
+      placeholder: String,
+      autocompleteThreshold: {
+        type: Number,
+        default: 2
+      }
+    },
+    data () {
+      return {
+        options: []
+      }
+    },
+    computed: {
+      localValue: {
+        get () {
+          return this.value
+        },
+        set (newValue) {
+          this.$emit('input', newValue)
+        }
+      }
+    },
+    watch: {
+      value: throttle(200, async function (newValue) {
+        if (this.autocompleteList && newValue && newValue.length > this.autocompleteThreshold) {
+          this.options = await this.autocompleteList(newValue)
+        }
+      })
+    },
+    mounted () {
+      this.$nextTick(() => {
+        if (this.autofocus && document.activeElement !== this.$el) {
+          this.$refs.inputEl.focus()
+        }
+      })
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import '../../styles/variables';
+
+  .input {
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .input input {
+    display: block;
+    border: none;
+    background: rgba(255, 255, 255, .95);
+    color: $color-base;
+    padding: .75em 1em;
+    width: 100%;
+    flex: 1;
+    border-radius: 2px;
+
+    &::placeholder {
+      color: lighten($color-base, 45%);
+    }
+
+    + .button {
+      margin-left: .5rem;
+    }
+
+    &[type="search"] {
+      border-radius: 500px;
+      padding-left: 1.25em;
+      padding-right: 1.25em;
+    }
+  }
+</style>

src/components/generic/Markdown.vue

@@ -17,7 +17,7 @@
       const markdownContent = findTextContent(this.$slots.default[0])
       return h(
         'div',
-        { domProps: { innerHTML: nmd(markdownContent) } }
+        { class: 'content', domProps: { innerHTML: nmd(markdownContent) } }
       )
     }
   }

src/components/generic/Paginator.vue

 <template>
   <div class="paginator" :class="`is-${behavior}`" v-if="!isEmpty || !hideEmpty">
-    <slot name="header" />
+    <slot name="header" :items="items" :count="count" :isLoading="isLoading"/>
 
     <div class="paginator-items" ref="items" v-bind="$attrs"
          :style="isLoading && currentItemsHeight ? { height: `${currentItemsHeight}px` } : null">
@@ -13,7 +13,7 @@
       </slot>
     </div>
 
-    <slot name="footer"/>
+    <slot name="footer" :items="items" :count="count" :isLoading="isLoading"/>
   </div>
 </template>
 
@@ -95,21 +95,26 @@
         prevUrl: null,
         isLoading: false,
         currentItemsHeight: null,
+        abortController: null,
         page: 1
       }
     },
     methods: {
       updateFrom (query, forceReplace = false) {
+        const abortController = new AbortController()
+        if (this.abortController) {
+          this.abortController.abort()
+        }
+        this.abortController = abortController
         this.currentItemsHeight = this.$refs.items
           ? this.$refs.items.getBoundingClientRect().height
           : this.minHeight || null
         this.isLoading = true
-        return this.collectionQuery(query)
+        return this.collectionQuery(query, { signal: abortController.signal })
           .then(data => {
             this.items = forceReplace || this.behavior === 'replace'
               ? data.results
               : [].concat(this.items, data.results)
-            this.items = data.results
             this.count = data.count
             this.nextUrl = getQueryString(data.next)
             this.prevUrl = getQueryString(data.previous)
@@ -122,6 +127,7 @@
           .then(this.savePageInUrl)
           .finally(() => {
             this.isLoading = false
+            this.abortController = null
           })
       },
       savePageInUrl () {

src/components/generic/Search.vue

 <template>
   <app-field>
-    <form class="search" @submit.prevent>
-      <input type="text" v-model="searchTerm" class="search-input" :placeholder="$t('search_placeholder')"
-             :aria-label="$t('search_label')"/>
-      <app-button type="submit">{{ $t('search_submit') }}</app-button>
+    <form class="search" @submit.prevent="doSearch" :class="standalone ? 'is-standalone' : null">
+      <app-input type="search" v-model="searchData.keywords" name="keywords" :autofocus="!standalone"
+                 :placeholder="$t('search.keyword_placeholder')" :label="$t('search.keyword_label')"
+                 autocomplete="lohro_search">
+        <app-button type="submit" v-if="standalone">{{ $t('search.submit') }}</app-button>
+      </app-input>
     </form>
   </app-field>
 </template>
@@ -11,45 +13,74 @@
 <script>
   export default {
     props: {
-      searchTerm: String
-    }
+      standalone: Boolean
+    },
+    data () {
+      const query = this.$route.query
+      return {
+        searchData: {
+          keywords: query.keywords || ''
+        }
+      }
+    },
+    methods: {
+      doSearch () {
+        const target = { name: 'search', query: this.searchData }
+        if (this.$route.name !== 'search') {
+          this.$router.push(target)
+        } else {
+          this.$router.replace(target)
+        }
+      }
+    },
+    watch: {
+      searchData: {
+        deep: true,
+        // as we fill pre-fill local state from the route we need
+        // to inform the receiver immediately
+        immediate: true,
+        handler (newSearchData) {
+          // we make a copy, because otherwise the receiver will
+          // get our local state and we practically invalidate
+          // any debounce or throttle mechanisms
+          this.$emit('search', { ...newSearchData })
+        }
+      }
+    },
+    inject: ['dataSources']
   }
 </script>
 
 <style lang="scss">
   .search {
     display: flex;
-  }
+    flex: 1 0 auto;
+    margin: auto;
 
-  .search-input {
-    display: block;
-    border: none;
-    background: rgba(0, 0, 0, 0.25);
-    color: white;
-    border-radius: 500px 0 0 500px;
-    padding: .75em 1em;
-    width: 100%;
-    flex: 1;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39);
+    &:not(.is-standalone) .input input[type="search"] {
+      @media (min-width: 500px) {
+        min-width: 250px;
+      }
 
-    &::placeholder {
-      color: rgba(255, 255, 255, .25);
+      @media (min-width: 1200px) {
+        min-width: 400px;
+      }
     }
   }
-
-  .search .button {
-    border-radius: 0 500px 500px 0;
-  }
 </style>
 
 <i18n lang="yaml">
   en:
-    search_label: Search for
-    search_submit: Search
-    search_placeholder: e.g. Communism
+    search.keyword_label: Search for
+    search.keyword_placeholder: Keywords, e.g. Communism
+    search.tag_label: Tags
+    search.tag_placeholder: e.g. me-too
+    search.submit: Search
 
   de:
-    search_label: Suche nach
-    search_submit: Suchen
-    search_placeholder: z.B. Frauenkampftag
+    search.keyword_label: Suche nach
+    search.keyword_placeholder: Suchbegriff, z.B. Frauenkampftag
+    search.tag_label: Schlagworte
+    search.tag_placeholder: Schlagwort, z.B. me-too
+    search.submit: Suchen
 </i18n>

src/components/player/TrackService.vue

@@ -12,7 +12,7 @@
       }
     },
     async created () {
-      if (this.env.live.trackService) {
+      if (this.env.live && this.env.live.trackService) {
         const { url, ...options } = this.env.live.trackService
         this.trackService = await createTrackServiceObservable(url, options)
       }

src/components/register.js

@@ -22,6 +22,7 @@ import Spinner from './generic/Spinner'
 import SpinnerArea from './generic/SpinnerArea'
 import Tag from './generic/Tag'
 import Time from './generic/Time'
+import Input from './generic/Input'
 
 Vue.component('app-auto-grid', AutoGrid)
 Vue.component('app-button', Button)
@@ -32,6 +33,7 @@ Vue.component('app-download', Download)
 Vue.component('app-field', Field)
 Vue.component('app-header', Header)
 Vue.component('app-image', Image)
+Vue.component('app-input', Input)
 Vue.component('app-like', Like)
 Vue.component('app-markdown', Markdown)
 Vue.component('app-page', Page)

src/data.js

@@ -15,6 +15,7 @@ const createCache = (ttl) => {
 const broadcastCache = createCache(300)
 const recordingCache = createCache(120)
 const seriesCache = createCache(600)
+const tagCache = createCache(300)
 
 export default function createDataSources (env) {
   const createUrl = subPath => {
@@ -29,15 +30,19 @@ export default function createDataSources (env) {
 
   const broadcastBase = createUrl(`/api/v1/broadcasts`)
   const queryBroadcast = id => broadcastCache(`${broadcastBase}/${id}`)
-  const queryBroadcastCollection = filterQuery => broadcastCache(`${broadcastBase}?${filterQuery}`)
+  const queryBroadcastCollection = (filterQuery, opts) => broadcastCache(`${broadcastBase}?${filterQuery}`, opts)
 
   const recordingBase = createUrl(`/api/v1/recordings`)
   const queryRecording = id => recordingCache(`${recordingBase}/${id}`)
-  const queryRecordingCollection = filterQuery => recordingCache(`${recordingBase}?${filterQuery}`)
+  const queryRecordingCollection = (filterQuery, opts) => recordingCache(`${recordingBase}?${filterQuery}`, opts)
 
   const seriesBase = createUrl(`/api/v1/series`)
   const querySeries = id => seriesCache(`${seriesBase}/${id}`)
-  const querySeriesCollection = filterQuery => seriesCache(`${seriesBase}?${filterQuery}`)
+  const querySeriesCollection = (filterQuery, opts) => seriesCache(`${seriesBase}?${filterQuery}`, opts)
+
+  const tagBase = createUrl(`/api/v1/tags`)
+  const queryTag = slug => tagCache(`${tagBase}/${slug}`)
+  const queryTagCollection = (filterQuery, opts) => tagCache(`${tagBase}?${filterQuery}`, opts)
 
   return {
     createImageUrl,
@@ -46,6 +51,8 @@ export default function createDataSources (env) {
     queryRecording,
     queryRecordingCollection,
     querySeries,
-    querySeriesCollection
+    querySeriesCollection,
+    queryTag,
+    queryTagCollection
   }
 }

src/main.js

+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import Vue from 'vue'
 import VueMq from 'vue-mq'
 import VueWindowSize from 'vue-window-size'

src/styles/util.scss

@@ -25,7 +25,8 @@
 }
 
 .content {
-  @extend .hyphens;
+  @extend .hyphens, .f-4;
+  line-height: 1.4;
 }
 
 .align-center {

src/views/AboutPage.vue

@@ -3,7 +3,7 @@
     <app-container class="my-5">
       <app-section>
         <app-header :title="$t('about_page.title', [env.name])" class="mb-4"/>
-        <app-markdown class="f-4" v-if="env.about">{{ env.about }}</app-markdown>
+        <app-markdown v-if="env.about">{{ env.about }}</app-markdown>
       </app-section>
       <app-section v-if="socialPlatforms.length > 0">
         <app-header :title="$t('about_page.social')" :level="2" class="mb-4"/>

src/views/HomePage.vue

@@ -2,7 +2,7 @@
   <app-page>
     <app-container class="my-5">
       <app-header :title="env.name" class="mb-5">
-        <PlayLive look="primary" :size="$mq !== 'xs' ? 'medium' : null"/>
+        <PlayLive look="primary" :size="$mq !== 'xs' ? 'medium' : null" v-if="env.live"/>
       </app-header>
       <app-section>
         <app-auto-grid :sizes="{ md: [2, 1], lg: [2, 1], xl: [2, 1] }" :gap-modifier="2">
@@ -28,7 +28,7 @@
           <div>
             <app-section class="mb-4">
               <app-header :title="$t('home_page_search')" :level="2" class="mb-3"/>
-              <app-search/>
+              <app-search standalone/>
             </app-section>
             <app-section>
               <app-header :title="$t('home_page_recent_topics')" :level="2" class="mb-3"/>

src/views/RecordingPage.vue

@@ -15,7 +15,7 @@
         <app-auto-grid :sizes="{ md: [2, 1], lg: [2, 1], xl: [2, 1] }" :gap-modifier="2">
           <div>
             <app-header :title="$t('recording_page.info')" :level="2" :display-level="4" class="mb-3"/>
-            <div class="content f-4 mb-2">
+            <div class="mb-2">
               <app-markdown v-if="recording.description">{{ recording.description }}</app-markdown>
               <app-markdown v-else>
                 <i18n path="recording_page.missing_description">

src/views/SearchPage.vue

@@ -2,20 +2,76 @@
   <app-page>
     <app-container class="my-5">
       <app-section>
-        <app-header :title="$t('search_page_title')"/>
+        <app-header :title="$t('search_page.title')" always-show-title class="mb-5">
+          <app-search @search="updateSearchData"/>
+        </app-header>
+        <app-paginator :collection-query="dataSources.queryRecordingCollection" behavior="append"
+                       no-loader :min-height="0" :page-size="recordingCollection.count"
+                       :filters="recordingFilters" id="recordings">
+          <template v-slot:default="{ items, isLoading }">
+            <app-auto-grid :default-size="recordingCollection.columns" v-if="items.length > 0">
+              <div v-for="recording in items" :key="recording.id">
+                <RecordingPreview :recording="recording" class="mb-3"/>
+              </div>
+            </app-auto-grid>
+            <div class="content center" style="max-width: 600px; margin: 0 auto;"
+                 v-else-if="items.length === 0 && !isLoading">
+              <p>{{ $t('search_page.no_results') }}</p>
+            </div>
+          </template>
+
+          <template v-slot:footer="{ isLoading }">
+            <div style="height: 100px; position: relative">
+              <app-spinner-area v-if="isLoading"/>
+              <app-paginator-nav class="mt-3"/>
+            </div>
+          </template>
+        </app-paginator>
       </app-section>
     </app-container>
   </app-page>
 </template>
 
 <script>
-  export default {}
+  import { debounce } from 'throttle-debounce'
+  import RecordingPreview from '../components/model/RecordingPreview'
+
+  export default {
+    components: { RecordingPreview },
+    data () {
+      return {
+        searchData: {}
+      }
+    },
+    computed: {
+      recordingFilters () {
+        return {
+          ...this.searchData,
+          is_available: 1
+        }
+      },
+      recordingCollection () {
+        return {
+          xs: { count: 10, columns: 1 },
+          md: { count: 30, columns: 3 }
+        }[this.$mq] || { count: 40, columns: 4 }
+      }
+    },
+    methods: {
+      updateSearchData: debounce(350, false, function (newData) {
+        this.searchData = newData
+      })
+    },
+    inject: ['dataSources']
+  }
 </script>
 
 <i18n lang="yaml">
   en:
-    search_page_title: Search
+    search_page.title: Search
+    search_page.no_results: 'We couldn’t find any posts for your query. Sorry!'
 
   de:
-    search_page_title: Suche
+    search_page.title: Suche
+    search_page.no_results: 'Wir konnten keine Beiträge für deine Suche finden. Tschuldigung!'
 </i18n>