joinpeertube/src/components/ContentSelections.vue

<template>
  <div class="root">
    <div class="content-selection" v-for="contentSelection in getContentSelections()">
      <content-selection :type="contentSelection.type" :title="contentSelection.title"
                         :thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
                         :description="contentSelection.description"
      >
      </content-selection>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../scss/_variables';

  .content-selection {
    margin-bottom: 80px;
  }

  .discover-instances {
    display: flex;
    justify-content: flex-end;
  }
</style>

<script>
  import ContentSelection from './ContentSelection'
  import ContentSelectionsEN from '../mixins/ContentSelectionsEN'
  import ContentSelectionsFR from '../mixins/ContentSelectionsFR'
  import sampleSize from 'lodash/sampleSize'

  export default {
    mixins: [
      ContentSelectionsEN,
      ContentSelectionsFR
    ],

    props: {
      sampleSizeEach: Number
    },

    components: {
      ContentSelection
    },

    methods: {
      getContentSelections () {
        if (this.$language.current.startsWith('fr_')) {
          return this.sampleIfNeeded(this.contentSelectionsFR)
        }

        return this.sampleIfNeeded(this.contentSelectionsEN)
      },

      sampleIfNeeded (objects) {
        const videos = []
        const channels = []
        const instances = []

        for (const o of objects) {
          if (o.type === 'video') videos.push(o)
          else if (o.type === 'channel') channels.push(o)
          else if (o.type === 'instance') instances.push(o)
          else console.error('Unknown content selection type %s.', o.type)
        }

        return sampleSize(videos, this.sampleSizeEach || videos.length)
          .concat(sampleSize(channels, this.sampleSizeEach || channels.length))
          .concat(sampleSize(instances, this.sampleSizeEach || instances.length))
      }
    }
  }
</script>