{% extends 'layout.html.twig' %}

{% block title %}Video{% endblock %}

{% block content %}
  <h2>Vidéos</h2>
  <div id="video-list-app">
    <video-list-app :urls="({
      account: '{{ path_for('get_video_account') }}',
      analytics: '{{ path_for('get_video_analytics') }}',
      captions: {
        get: '{{ path_for('get_video_captions') }}',
        default: '{{ path_for('post_video_captions_default') }}',
        upload: '{{ path_for('post_video_caption') }}',
        delete: '{{ path_for('delete_video_caption') }}'
      },
      delete: '{{ path_for('delete_video') }}',
      list: '{{ path_for('get_video_list') }}',
      metadata: '{{ path_for('post_video_metadata') }}',
      thumbnail: '{{ path_for('post_video_thumbnail') }}',
      update: '{{ path_for('post_video_update') }}',
      visibility: '{{ path_for('post_video_visibility') }}'
    })"></video-list-app>
  </div>
{% endblock %}

{% block js %}
<script type="text/javascript">
const eventBus = new Vue();

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-account', {
  template: `
    <div class="row" v-if="account">
      <div class="col">
        <div class="progress" style="height: 28px;">
          <div class="progress-bar" role="progressbar" :style="{
            width: percentage + '%'
          }" :aria-valuenow="percentage" aria-valuemin="0" aria-valuemax="100">
            \{\{ (percentage > 4) ? quotaUsed : '' \}\}
          </div>
          <span class="text-dark" style="display: block;width: 100%;margin-top: 5px;text-align: center;">
            \{\{ (percentage < 95) ? quotaRemaining : '' \}\}
          </span>
        </div>
      </div>
      <div class="col-auto">\{\{ quotaTotal \}\}</div>
    </div>
  `,
  props: {
    urls: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      account: null,
      secondsMode: true
    };
  },
  mounted: function() {
    this.loadAccount();
  },
  methods: {
    toHours: function(time) {
      if (this.secondsMode) {
        return this.secondsToHours(time);
      }
      return this.minutesToHours(time);
    },
    minutesToHours: function(minutes) {
      if (minutes < 60) {
        return minutes + 'mn';
      }
      const h = Math.floor(minutes / 60);
      const mn = minutes - (h * 60);
      return h + 'h' + ((mn > 0) ? (mn + 'mn') : '');
    },
    secondsToHours: function(seconds) {
      if (seconds < 3600) {
        return Math.ceil(seconds / 60) + 'mn';
      }
      const h = Math.floor(seconds / 3600);
      const mn = Math.floor((seconds - h * 3600) / 60);
      return h + 'h' + ((mn > 0) ? (mn + 'mn') : '');
    },
    loadAccount: function() {
      axios.get(this.urls.account).then(res => {
        if (res.status == 200 && res.data.processed > 0) {
          this.account = res.data.account;
          this.secondsMode = (res.data.account.quota.quotaTotal%3600 == 0);
        }
      });
    }
  },
  computed: {
    quotaTotal: function() {
      if (this.account) {
        return this.toHours(this.account.quota.quotaTotal);
      }
      return null;
    },
    quotaUsed: function() {
      if (this.account) {
        return this.toHours(this.account.quota.quotaUsed);
      }
      return null;
    },
    quotaRemaining: function() {
      if (this.account) {
        return this.toHours(this.account.quota.quotaRemaining);
      }
      return null;
    },
    percentage: function() {
      if (this.account) {
        return Math.round(this.account.quota.quotaUsed * 100 / this.account.quota.quotaTotal);
      }
      return null;
    }
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-analytics', {
  template: `
    <div class="card-body">
      <div class="input-group input-group-sm">
        <div class="input-group-prepend">
          <span class="input-group-text">Période</span>
        </div>
        <select @change="onPeriodChange" class="form-control" v-model="day">
          <option value="0">--</option>
          <option v-for="d in 31">\{\{ d \}\}</option>
        </select>
        <select @change="onPeriodChange" class="form-control" v-model="month">
          <option value="0">--</option>
          <option v-for="m in 12" :value="m">\{\{ monthName(m) \}\}</option>
        </select>
        <input class="form-control" type="number" :max="maxYear" v-model="year" />
      </div>
      <div class="alert alert-danger mt-3" v-show="periodValidity">
        \{\{ periodValidity \}\}
      </div>
      <button type="button" @click="loadAnalytics" :disabled="loading" class="btn btn-primary btn-sm btn-block mt-3">
        \{\{ literalPeriod \}\}
      </button>
      <div class="alert alert-light mt-3" v-show="analytics">
        <strong>\{\{ sessions \}\} sessions</strong> sur cett période
      </div>
    </div>
  `,
  props: {
    video: {
      type: String,
      required: true
    },
    video: {
      type: Object,
      required: true
    },
    urls: {
      type: Object,
      require: true
    }
  },
  data: function() {
    const date = new Date();
    return {
      maxYear: date.getUTCFullYear(),
      year: date.getUTCFullYear(),
      month: date.getUTCMonth() + 1,
      day: date.getUTCDate(),
      loading: false,
      analytics: null
    };
  },
  methods: {
    onPeriodChange: function() {
      if (this.month < 1) {
        this.day = 0;
      }
    },
    monthName: function(month) {
      if (month < 1 || month > 12) {
        return '';
      }
      return moment().set('month', month - 1).format('MMMM');
    },
    loadAnalytics: function() {
      this.loading = true;
      axios.get(`${this.urls.analytics}?videoId=${this.video.videoId}&period=${this.period}`)
        .then(res => {
          this.loading = false;
          if (res.status == 200 && res.data.success) {
            this.analytics = (res.data.processed > 0) ? res.data.analytics : [];
          }
        });
    }
  },
  computed: {
    period: function() {
      let period = this.year;
      if (this.month > 0) {
        period += '-' + ('0' + this.month).slice(-2);
        if (this.day > 0) {
          period += '-' + ('0' + this.day).slice(-2);
        }
      }
      return period;
    },
    literalPeriod: function() {
      let text = 'Afficher les statistiques ';
      let date = moment().set('year', this.year);
      if (this.day > 0) {
        date.date(this.day);
        date.month(this.month - 1);
        return text + 'du ' + date.format('Do MMMM YYYY');
      }
      if (this.month > 0) {
        date.month(this.month - 1);
        return text + 'du mois de ' + date.format('MMMM YYYY');
      }
      return text +  'de l\'année ' + date.format('YYYY');
    },
    periodValidity: function() {
      let period = moment().set('year', this.year);
      if (this.month > 0) period.set('month', this.month - 1);
      if (this.day > 0) period.set('day', this.day);
      let pubDate = moment(this.video.publishedAt.date);
      if (period < pubDate) {
        return `La vidéo a été publiée le ${pubDate.format('Do MMMM YYYY')}`;
      }
      let today = moment();
      if (period > today) {
        return `Nous sommes le ${today.format('Do MMMM YYYY')}`;
      }
      return null;
    },
    sessions: function() {
      return (this.analytics && this.analytics.length) ? this.analytics.length : 0;
    }
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-captions', {
  template: `
    <div class="card-body text-center">
      <div v-show="!captions" class="spinner-border text-secondary" role="status">
        <span class="sr-only">Chargement...</span>
      </div>
      <table v-if="captions && captions.length && !showForm" class="table table-sm table-hover table-striped table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col"><i class="fas fa-star"></i></th>
            <th scope="col"><i class="fas fa-language"></i></th>
            <th scope="col"></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr scope="row" v-for="caption in captions">
            <td>
              <a href="#" @click="setDefault(caption.srclang, !caption.default)">
                <i class="far" :class="{
                  'fa-check-square': caption.default,
                  'fa-square' : !caption.default
                }"></i>
              </a>
            </td>
            <td>\{\{ caption.srclang \}\}</td>
            <td>
              <a :href="caption.src" target="_blank">
                <i class="fas fa-download"></i>
              </a>
            </td>
            <td>
              <a href="#" @click="remove(caption.srclang)">
                <i class="fas fa-trash"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <button v-show="captions && !showForm" @click="showForm = !showForm" class="btn btn-sm btn-block btn-primary">
        <i class="fas fa-plus"></i>
        Nouveau
      </button>
      <form @submit.prevent="upload" v-if="captions && showForm">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">Langue</span>
          </div>
          <input type="text" required maxlength="2" v-model="language" class="form-control" placeholder="2 caractères" />
        </div>
        <input type="file" required v-show="false" ref="captionIpt" @change="onFileChange" class="custom-file-input" />
        <div class="row">
          <div class="col">
            <button type="button"
              @click="onFileBtnClick" :disabled="(file)"
              class="btn btn-sm btn-block mb-3"
              :class="{
                'btn-secondary': !file,
                'btn-success': (file)
              }">
              Fichier VTT
            </button>
          </div>
          <div class="col">
            <button
              :disabled="!file && !language" type="submit"
              class="btn btn-sm btn-block"
              :class="{
                'btn-primary': !file || !language,
                'btn-primary': file && language
              }">
              Envoyer
            </button>
          </div>
        </div>
      </form>
    </div>`,
  props: {
    videoId: {
      type: String,
      required: true
    },
    urls: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      captions: null,
      showForm: false,
      language: null,
      file: null
    }
  },
  methods: {
    setDefault: function(language, isDefault) {
      let captions = this.captions;
      this.captions = null;
      axios.post(this.urls.captions.default, {
        videoId: this.videoId, language, isDefault
      }).then(res => {
        if (res.status == 200 && res.data.processed > 0) {
          const index = captions.findIndex(c => c.uri == res.data.caption.uri);
          captions.splice(index, 1, res.data.caption);
          this.captions = captions;
        }
      });
    },
    onFileBtnClick: function() {
      this.$refs.captionIpt.click();
    },
    onFileChange: function() {
      if (
        (this.$refs.captionIpt.files.length > 0) &&
        (this.$refs.captionIpt.files[0].type = 'text/vtt')
      ) {
        this.file = this.$refs.captionIpt.files[0];
      }
    },
    upload: function() {
      if (this.file) {
        let captions = this.captions;
        this.captions = null;
        let formData = new FormData();
        formData.append('file', this.file);
        formData.append('language', this.language);
        formData.append('videoId', this.videoId);
        axios.post(this.urls.captions.upload, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.status == 200 && res.data.processed > 0) {
            captions.push(res.data.caption);
            this.file = null;
            this.language = null;
            this.showForm = false;
            this.captions = captions;
          }
        });
      }
    },
    remove: function(language) {
      let captions = this.captions;
      this.captions = null;
      axios.delete(`${this.urls.captions.delete}?language=${language}&videoId=${this.videoId}`).then(res => {
        console.log(res);
        if (res.status == 200 && res.data.processed > 0) {
          const index = captions.findIndex(c => c.srclang == res.data.language);
          captions.splice(index, 1);
          this.captions = captions;
        }
      });
    }
  },
  mounted: function() {
    axios.get(`${this.urls.captions.get}?videoId=${this.videoId}`).then(res => {
      if (res.status == 200 && res.data.processed > 0) {
        this.captions = res.data.captions || [];
      } else {
        this.captions = [];
      }
    });
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-item-update', {
  template: `
  <div class="card-body">
    <form @submit.prevent="update">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Titre</span>
        </div>
        <input type="text" v-model="title" :disabled="formSending" class="form-control" />
      </div>
      <div class="input-group mt-2">
        <div class="input-group-prepend">
          <span class="input-group-text">Tags</span>
        </div>
        <input type="text" v-model="tags" :disabled="formSending" class="form-control" placeholder="Séparer avec des virgules" aria-label="Séparer avec des virgules" />
      </div>
      <div class="input-group mt-2">
        <textarea v-model="description" :disabled="formSending" class="form-control" placeholder="Description"></textarea>
      </div>
      <button class="btn btn-primary btn-block mt-2" type="submit">OK</button>
    </form>
  </div>`,
  props: {
    video: {
      type: Object,
      required: true
    },
    urls: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      title: null,
      tags: null,
      description: null,
      formSending: false
    };
  },
  methods: {
    update: function() {
      this.formSending = true;
      axios.post(this.urls.update, {
        videoId: this.video.videoId,
        tags: this.tags.split(',').map(t => t.trim()),
        title: this.title,
        description: this.description
      }).then(res => {
        this.formSending = false;
        if (res.status == 200 && res.data.processed > 0) {
          eventBus.$emit('video-updated', res.data.video);
        }
      });
    }
  },
  mounted: function() {
    this.title = this.video.title;
    this.tags = this.video.tags.join(', ');
    this.description = this.video.description;
  }
})
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-metadata', {
  template: `
  <div class="card-body">
    <form @submit.prevent="onSubmit">
      <div class="grid">
        <div class="row" v-for="(md, index) in metadata">
          <div class="col">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">Clé</span>
              </div>
              <input type="text" :disabled="sending" @change="onIptChange(index)" v-model="md.key" class="form-control" />
            </div>
          </div>
          <div class="col">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">Valeur</span>
              </div>
              <input type="text" :disabled="sending" @change="onIptChange(index)" v-model="md.value" class="form-control" />
            </div>
          </div>
        </div>
      </div>
      <button type="submit" :disabled="sending" class="btn btn-block btn-primary">
        <i class="fas fa-info"></i>
        Modifier
      </button>
    </form>
  </div>`,
  data: function() {
    return {
      metadata: [],
      sending: false
    };
  },
  props: {
    urls: {
      type: Object,
      required: true
    },
    video: {
      type: Object,
      required: true
    }
  },
  methods: {
    pushEmpty: function() {
      this.metadata.push({
        key: '',
        value: ''
      });
    },
    onIptChange: function(index) {
      if (
        this.metadata[index].key.length &&
        this.metadata[index].value.length
      ) {
        this.pushEmpty();
      }
      if (
        this.metadata.length > 1 &&
        !this.metadata[index].key.length &&
        !this.metadata[index].value.length
      ) {
        this.metadata.splice(index, 1);
      }
    },
    cleanedMetadata:  function() {
      return this.metadata.filter(md => md.key.length && md.value.length);
    },
    onSubmit: function() {
      this.sending = true;
      axios.post(this.urls.metadata, {
        metadata: this.cleanedMetadata(),
        videoId: this.video.videoId
      }).then(res => {
        if (res.status == 200 && res.data.processed > 0) {
          this.sending = false;
          eventBus.$emit('video-updated', res.data.video);
        }
      });
    }
  },
  mounted: function() {
    this.metadata = this.video.metadata;
    this.pushEmpty();
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-item', {
  template: `
    <div class="col-12">
      <div class="card mb-3">
        <div class="row no-gutters" style="min-height: 170px;">
          <div class="col-12 col-sm-6 col-lg-4" :style="imgStyle">
            <a href="#" v-show="!showVideo" @click="showVideo = !showVideo" style="height: 100%;display: block;">
              <i class="fas fa-play" style="padding: 5%;color: #e61818;font-size: 25px; text-shadow: 3px 3px #8c00004d;"></i>
            </a>
            <iframe v-if="showVideo" :src="video.assets.player" style="height: 100%;" class="card-img"></iframe>
          </div>
          <div class="col-12 col-sm-6 col-lg-8">
            <div class="card-header p-2">
              <small v-if="pubDate" class="float-right d-none d-lg-inline-block mt-1">
                Publiée le
                \{\{ pubDate \}\}
              </small>
              <h5 class="card-title m-0">
                <a v-show="showForm || showCaptions || showAnalytics || showMetadata" href="#" @click="closeForms">
                  <i class="fas fa-chevron-circle-left"></i>
                </a>
                \{\{ video.title \}\}
              </h5>
            </div>
            <div v-show="!showForm && !showCaptions && !showAnalytics && !showMetadata" class="card-body text-right">
              <div class="progress" v-if="sending" style="height: 1px;">
                <div class="progress-bar" role="progressbar" :style="{width: progressPercentage}" :aria-valuenow="sending" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p v-if="video.description.length" class="my-2">\{\{ video.description \}\}</p>
              <template v-for="(tag, index) in video.tags">
                <span class="badge badge-secondary" :key="index">
                  \{\{ tag | capitalize \}\}
                </span>\{\{ ' ' \}\}
              </template>
              <div class="btn-group" role="group" aria-label="Basic example">
                <button
                  title="Publique / Privée"
                  type="button"
                  @click="toggleVisibilty"
                  :class="{
                    'btn-warning': !video.public,
                    'btn-success': video.public
                  }"
                  class="btn mt-2">
                  <i class="fas" :class="{
                    'fa-eye-slash': !video.public,
                    'fa-eye': video.public
                  }"></i>
                </button>
                <button type="button" @click="showForm = !showForm" class="btn mt-2 btn-dark" title="Modifier">
                  <i class="fas fa-pen"></i>
                </button>
                <button type="button" @click="showMetadata = !showMetadata" class="btn mt-2 btn-light" title="Metadata">
                  <i class="fas fa-info"></i>
                </button>
                <button type="button" @click="showCaptions = !showCaptions" class="btn mt-2 btn-secondary" title="Sous-Titres">
                  <i class="fas fa-closed-captioning"></i>
                </button>
                <button type="button" @click="showAnalytics = !showAnalytics" class="btn mt-2 btn-primary" title="Analytics">
                  <i class="far fa-chart-bar"></i>
                </button>
                <button type="button" @click="openThumbnail" class="btn mt-2 btn-info" title="Vignette">
                  <i class="far fa-image"></i>
                </button>
                <button type="button" @click="deleteVideo" class="btn mt-2 btn-danger" title="Supprimer">
                  <i class="far fa-trash-alt"></i>
                </button>
              </div>
              <input type="file" v-show="false" ref="videoIpt" @change="onFileChange" class="custom-file-input" />
            </div>
            <video-item-update :video="video" :urls="urls" v-if="showForm"></video-item-update>
            <video-metadata :video="video" :urls="urls" v-if="showMetadata"></video-metadata>
            <video-captions :videoId="video.videoId" :urls="urls" v-if="showCaptions"></video-captions>
            <video-analytics :video="video" :urls="urls" v-if="showAnalytics"></video-analytics>
          </div>
        </div>
      </div>
    </div>`,
  props: {
    video: {
      type: Object,
      required: true
    }, urls: {
      type: Object,
      required: true
    }
  },
  computed: {
    imgStyle: function() {
      return {
        backgroundImage: `url('${this.video.assets.thumbnail}?${this.thumbnailReload}')`,
        backgroundSize: 'cover',
        backgroundPosition: '50% 50%'
      };
    },
    progressPercentage: function() {
      if (this.sending) {
        return `${parseInt(this.sending)}%`;
      }
      return '0%';
    },
    pubDate: function() {
      if (this.video) {
        return moment(this.video.publishedAt.date).format('Do MMMM YYYY');
      }
      return null;
    }
  }, data: function() {
    return {
      showAnalytics: false,
      showCaptions: false,
      showVideo: false,
      showForm: false,
      showMetadata: false,
      sending: null,
      thumbnailReload: 1
    };
  },
  methods: {
    closeForms: function() {
      this.showCaptions = false;
      this.showForm = false;
      this.showAnalytics = false;
      this.showMetadata = false;
    },
    toggleVisibilty: function() {
      axios.post(this.urls.visibility, {
        videoId: this.video.videoId,
        visibility: this.video.public ? 'private' : 'public'
      }).then(res => {
        if (res.status == 200 && res.data.processed > 0) {
          eventBus.$emit('video-updated', res.data.video);
        }
      });
    },
    deleteVideo: function() {
      if (prompt("Entrez le titre du film pour confirmer") == this.video.title) {
        axios.delete(`${this.urls.delete}?videoId=${this.video.videoId}`).then(res => {
          if (res.status == 200 && res.data.processed > 0) {
            eventBus.$emit('video-deleted', res.data.videoId);
          } else {
            alert('Echec de la suppression');
            console.error(res.data);
          }
        });
      }
    },
    openThumbnail: function() {
      this.$refs.videoIpt.click();
    },
    onFileChange: function() {
      if (this.$refs.videoIpt.files.length > 0) {
        let formData = new FormData();
        formData.append('file', this.$refs.videoIpt.files[0]);
        formData.append('videoId', this.video.videoId);
        axios.post(this.urls.thumbnail, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }, onUploadProgress: function(progressEvent) {
            this.sending = parseInt(Math.round(
              (progressEvent.loaded * 100 ) / progressEvent.total
            ));
          }.bind(this)
        }).then(res => {
          if (res.status == 200 && res.data.processed > 0) {
            eventBus.$emit('video-updated', res.data.video);
            setTimeout(() => {
              this.thumbnailReload = (new Date()).getTime();
              console.log(this.thumbnailReload);
            }, 1000);
          }
          this.sending = null;
        }).catch(err => console.error(err));
      }
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  mounted: function() {
    eventBus.$on('video-updated', () => {
      this.showForm = false;
    });
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
Vue.component('video-list-app', {
  template: `
    <div>
      <div class="grid" v-if="videos.length">
        <div class="row">
          <video-item v-for="video in videos"
            :urls="urls" :video="video"
            :key="video.videoId">
          </video-item>
        </div>
      </div>
    </div>`,
  props: {
    urls: {
      type: Object,
      required: true
    }
  }, data: function() {
    return {
      videos: []
    };
  }, mounted: function() {
    axios
      .get(this.urls.list)
      .then(res => {
        if (res.status == 200 && res.data.processed > 0) {
          this.videos = res.data.videos;
        }
      });
    eventBus.$on('video-updated', video => {
      const index = this.videos.findIndex(v => v.videoId == video.videoId);
      this.videos.splice(index, 1, video);
    });
    eventBus.$on('video-deleted', videoId => {
      const index = this.videos.findIndex(v => v.videoId == videoId);
      this.videos.splice(index, 1);
    });
  }
});
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
const videoListApp = new Vue({
  el: '#video-list-app',
  data: function() {
    return {
      message: 'Hello Boys and Girls!'
    };
  }
});
</script>
{% endblock %}