Merge pull request #290 from camphor-/archive-button

camphor- · Jul 29, 2020 · d6032f3 · d6032f3
2 parents daf9763 + e150814
commit d6032f3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/api/v3/session.ts b/api/v3/session.ts
@@ -36,8 +36,9 @@ export const controlState = async (
   await instance.put(`/sessions/${sessionId}/state`, req)
 }
 
+export type PlaybackStates = 'PLAY' | 'PAUSE' | 'STOP' | 'ARCHIVED'
 interface ControlStateRequest {
-  state: 'PLAY' | 'PAUSE' | 'ARCHIVED'
+  state: PlaybackStates
 }
 
 export const enqueue = async (id: string, req: EnqueueReq) => {

diff --git a/components/organisms/SlideMenu.vue b/components/organisms/SlideMenu.vue
@@ -13,6 +13,26 @@
             <v-list-tile-title>Home</v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
+
+        <template v-if="isMyOwnSession">
+          <v-list-tile v-if="isSessionArchived" @click="unarchiveSession">
+            <v-list-tile-avatar>
+              <v-icon>unarchive</v-icon>
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Unarchive</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile v-else @click="archiveSession">
+            <v-list-tile-avatar>
+              <v-icon>archive</v-icon>
+            </v-list-tile-avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Archive</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </template>
+
         <invite-link-box
           class="invite-link-box"
           :session-id="sessionId"
@@ -25,20 +45,32 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { mapState } from 'vuex'
+import { mapState, mapActions, mapGetters } from 'vuex'
 import InviteLinkBox from '@/components/molecules/InviteLinkBox.vue'
 import { Session } from '@/api/v3/types'
+import { PlaybackStates } from '@/api/v3/session'
 
 @Component({
   components: { InviteLinkBox },
   computed: {
-    ...mapState('pages/sessions/detail', ['sessionId', 'session'])
+    ...mapState('pages/sessions/detail', ['sessionId', 'session']),
+    ...mapGetters('pages/sessions/detail', [
+      'isMyOwnSession',
+      'isSessionArchived'
+    ])
+  },
+  methods: {
+    ...mapActions('pages/sessions/detail', ['controlState'])
   }
 })
 export default class extends Vue {
   @Prop({ default: false }) readonly value!: boolean
   private readonly sessionid!: string | null
   private readonly session!: Session | null
+  private readonly isMyOwnSession!: boolean
+  private readonly isSessionArchived!: boolean
+
+  private controlState!: (req: { state: PlaybackStates }) => Promise<void>
 
   @Emit()
   input(isOpen: boolean) {
@@ -49,6 +81,14 @@ export default class extends Vue {
     // eslint-disable-next-line camelcase
     return this.session?.allow_to_control_by_others ?? true
   }
+
+  archiveSession() {
+    this.controlState({ state: 'ARCHIVED' })
+  }
+
+  unarchiveSession() {
+    this.controlState({ state: 'STOP' })
+  }
 }
 </script>
 

diff --git a/store/pages/sessions/detail.ts b/store/pages/sessions/detail.ts
@@ -4,7 +4,8 @@ import {
   getDevices,
   controlState,
   getSession,
-  setDevice
+  setDevice,
+  PlaybackStates
 } from '@/api/v3/session'
 
 import { createWebSocket } from '@/api/v3/websocket'
@@ -227,10 +228,7 @@ export const actions: ActionTree<State, {}> = {
     commit('setWebSocket', null)
     dispatch('reconnectWebSocket')
   },
-  controlState: async (
-    { state, dispatch },
-    req: { state: 'PLAY' | 'PAUSE' }
-  ) => {
+  controlState: async ({ state, dispatch }, req: { state: PlaybackStates }) => {
     if (!state.sessionId) return
     try {
       await controlState(state.sessionId, req)