From 54be87985c199b19d21d8def8c070f147f23305e Mon Sep 17 00:00:00 2001
From: Chris <helloray@126.com>
Date: Thu, 22 Nov 2018 09:12:28 +0800
Subject: [PATCH 1/2] feat: add repeat play audio/video mode

---
 src/components/buttons/Repeat.vue | 52 ++++++++++++++++++++++++++++++
 src/components/files/Preview.vue  | 53 +++++++++++++++++++++++++++----
 src/i18n/en.yaml                  |  1 +
 src/i18n/zh-cn.yaml               |  1 +
 src/store/index.js                |  1 +
 src/store/mutations.js            |  1 +
 6 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 src/components/buttons/Repeat.vue

diff --git a/src/components/buttons/Repeat.vue b/src/components/buttons/Repeat.vue
new file mode 100644
index 0000000..0152be8
--- /dev/null
+++ b/src/components/buttons/Repeat.vue
@@ -0,0 +1,52 @@
+<template>
+  <button @click="change" @touchend="changeBackground" :aria-label="$t('buttons.repeat')" :title="$t('buttons.repeat')" class="action" id="repeat-button">
+    <i class="material-icons">{{ icon }}</i>
+    <span>{{ $t('buttons.repeat') }}</span>
+  </button>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'repeat-button',
+  computed: {
+    ...mapState(['repeat']),
+    icon: function () {
+      if (this.repeat === 'repeat_one') {
+        return 'repeat_one'
+      } else if (this.repeat === 'repeat_all') {
+        return 'repeat'
+      } else {
+        return 'repeat'
+      }
+    }
+  },
+  mounted () {
+    if (this.$store.state.repeat !== 'repeat_all' && this.$store.state.repeat !== 'repeat_one') {
+      document.querySelector(`#repeat-button > i`).style.opacity = 0.5
+    }
+  },
+  methods: {
+    ...mapMutations(['updateUser']),
+    change: function (event) {
+      let repeatIcon = document.querySelector(`#repeat-button > i`)
+
+      if (this.$store.state.repeat === 'repeat_all') {
+        repeatIcon.style.opacity = 1
+        this.$store.commit('repeat', 'repeat_one')
+      } else if (this.$store.state.repeat === 'repeat_one') {
+        repeatIcon.style.opacity = 0.5
+        this.$store.commit('repeat', '')
+      } else {
+        repeatIcon.style.opacity = 1
+        this.$store.commit('repeat', 'repeat_all')
+      }
+    },
+    changeBackground: function (event) {
+      let repeat = document.getElementById('repeat-button')
+      repeat.style.backgroundColor = 'transparent'
+    }
+  }
+}
+</script>
diff --git a/src/components/files/Preview.vue b/src/components/files/Preview.vue
index 5aff507..89ea829 100644
--- a/src/components/files/Preview.vue
+++ b/src/components/files/Preview.vue
@@ -4,24 +4,24 @@
       <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
         <i class="material-icons">close</i>
       </button>
-
+      <repeat-button v-if="req.type == 'audio' || req.type == 'video'"></repeat-button>
       <rename-button v-if="allowEdit()"></rename-button>
       <delete-button v-if="allowEdit()"></delete-button>
       <download-button></download-button>
       <info-button></info-button>
     </div>
 
-    <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
+    <button class="action" id="button-previous" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
       <i class="material-icons">chevron_left</i>
     </button>
-    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
+    <button class="action" id="button-next" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
       <i class="material-icons">chevron_right</i>
     </button>
 
     <div class="preview">
       <img v-if="req.type == 'image'" :src="raw()">
-      <audio v-else-if="req.type == 'audio'" :src="raw()" autoplay controls></audio>
-      <video v-else-if="req.type == 'video'" :src="raw()" autoplay controls>
+      <audio id="preview-audio" v-else-if="req.type == 'audio'" :src="raw()" @ended="playNext" autoplay controls></audio>
+      <video id="preview-video" v-else-if="req.type == 'video'" :src="raw()" @ended="playNext" autoplay controls>
         <track v-for="(sub, index) in subtitles" :kind="sub.kind" :src="'/api/subtitle/' + sub.src" :label="sub.label" :default="index === 0">
         Sorry, your browser doesn't support embedded videos,
         but don't worry, you can <a :href="download()">download it</a>
@@ -44,6 +44,7 @@ import InfoButton from '@/components/buttons/Info'
 import DeleteButton from '@/components/buttons/Delete'
 import RenameButton from '@/components/buttons/Rename'
 import DownloadButton from '@/components/buttons/Download'
+import RepeatButton from '@/components/buttons/Repeat'
 
 export default {
   name: 'preview',
@@ -51,12 +52,14 @@ export default {
     InfoButton,
     DeleteButton,
     RenameButton,
-    DownloadButton
+    DownloadButton,
+    RepeatButton
   },
   data: function () {
     return {
       previousLink: '',
       nextLink: '',
+      nextMedia: '',
       listing: null,
       subtitles: []
     }
@@ -68,6 +71,9 @@ export default {
     },
     hasNext () {
       return (this.nextLink !== '')
+    },
+    hasNextMedia () {
+      return (this.nextMedia !== '')
     }
   },
   mounted () {
@@ -109,6 +115,22 @@ export default {
     next () {
       this.$router.push({ path: this.nextLink })
     },
+    playNext () {
+      if (this.$store.state.repeat === 'repeat_all' && this.hasNextMedia) {
+        this.$router.push({ path: this.nextMedia })
+      } else if (this.$store.state.repeat === 'repeat_one') {
+        let v = document.getElementById('preview-video')
+        let a = document.getElementById('preview-audio')
+        if (v) {
+          v.currentTime = 0
+          v.play()
+        }
+        if (a) {
+          a.currentTime = 0
+          a.play()
+        }
+      }
+    },
     key (event) {
       event.preventDefault()
 
@@ -139,6 +161,25 @@ export default {
       if (pos !== this.listing.items.length - 1) {
         this.nextLink = this.listing.items[pos + 1].url
       }
+
+      let mediapos = null
+      for (let i = pos + 1; i < this.listing.items.length; i++) {
+        if (this.listing.items[i].type === 'audio' || this.listing.items[i].type === 'video') {
+          mediapos = i
+          break
+        }
+      }
+      if (mediapos === null) {
+        for (let i = 0; i < pos; i++) {
+          if (this.listing.items[i].type === 'audio' || this.listing.items[i].type === 'video') {
+            mediapos = i
+            break
+          }
+        }
+      }
+      if (mediapos !== null) {
+        this.nextMedia = this.listing.items[mediapos].url
+      }
     },
     allowEdit (event) {
       return this.$store.state.user.allowEdit
diff --git a/src/i18n/en.yaml b/src/i18n/en.yaml
index ae69b75..2eef1f1 100644
--- a/src/i18n/en.yaml
+++ b/src/i18n/en.yaml
@@ -16,6 +16,7 @@ buttons:
   next: Next
   ok: OK
   replace: Replace
+  repeat: Repeat mode
   previous: Previous
   rename: Rename
   reportIssue: Report Issue
diff --git a/src/i18n/zh-cn.yaml b/src/i18n/zh-cn.yaml
index cb0249b..833b070 100644
--- a/src/i18n/zh-cn.yaml
+++ b/src/i18n/zh-cn.yaml
@@ -16,6 +16,7 @@ buttons:
   next: 下一个
   ok: 确定
   replace: 替换
+  repeat: 重复模式
   previous: 上一个
   rename: 重命名
   reportIssue: 报告问题
diff --git a/src/store/index.js b/src/store/index.js
index 655222c..657f65c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -29,6 +29,7 @@ const state = {
   reload: false,
   selected: [],
   multiple: false,
+  repeat: '',
   show: null,
   showMessage: null,
   showConfirm: null
diff --git a/src/store/mutations.js b/src/store/mutations.js
index cf60851..4debdce 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -40,6 +40,7 @@ const mutations = {
   setCSS: (state, value) => (state.css = value),
   setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),
+  repeat: (state, value) => (state.repeat = value),
   addSelected: (state, value) => (state.selected.push(value)),
   addPlugin: (state, value) => {
     state.plugins.push(value)

From d9b3c0a6ca219383ad0921c281a1901fe1db636d Mon Sep 17 00:00:00 2001
From: Chris <helloray@126.com>
Date: Thu, 22 Nov 2018 09:44:15 +0800
Subject: [PATCH 2/2] remove unused code

---
 src/components/buttons/Repeat.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/buttons/Repeat.vue b/src/components/buttons/Repeat.vue
index 0152be8..09af977 100644
--- a/src/components/buttons/Repeat.vue
+++ b/src/components/buttons/Repeat.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 
 export default {
   name: 'repeat-button',
@@ -28,7 +28,6 @@ export default {
     }
   },
   methods: {
-    ...mapMutations(['updateUser']),
     change: function (event) {
       let repeatIcon = document.querySelector(`#repeat-button > i`)