Skip to content

Commit

Permalink
Components: Video-library: Add access link to video-configurations-page
Browse files Browse the repository at this point in the history
Signed-off-by: Arturo Manzoli <[email protected]>
  • Loading branch information
ArturoManzoli authored and patrickelectric committed Aug 27, 2024
1 parent f7c2a25 commit 4434af3
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 2 deletions.
3 changes: 3 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@
<GlassModal
:is-visible="currentConfigMenuComponent !== null && mainMenuStep !== 1"
position="menuitem"
:class="interfaceStore.isVideoLibraryVisible ? 'opacity-0' : 'opacity-100'"
@close-modal="currentConfigMenuComponent = null"
>
<component :is="currentConfigMenuComponent"></component>
Expand Down Expand Up @@ -286,6 +287,7 @@
</v-main>
</v-app>
<About v-if="showAboutDialog" @update:show-about-dialog="showAboutDialog = $event" />
<VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
</template>

<script setup lang="ts">
Expand All @@ -294,6 +296,7 @@ import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, wa
import { useRoute } from 'vue-router'
import GlassModal from '@/components/GlassModal.vue'
import VideoLibraryModal from '@/components/VideoLibraryModal.vue'
import { useInteractionDialog } from '@/composables/interactionDialog'
import {
availableCockpitActions,
Expand Down
3 changes: 3 additions & 0 deletions src/components/VideoLibraryModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,7 @@ const closeModal = (): void => {
deselectAllVideos()
lastSelectedVideo.value = null
isMultipleSelectionMode.value = false
interfaceStore.setVideoLibraryVisibility(false)
}
// Extracts a date or any string enclosed within parentheses from a given title string
Expand Down Expand Up @@ -978,6 +979,7 @@ watch(isVisible, (newValue) => {
isMultipleSelectionMode.value = false
lastSelectedVideo.value = null
showOnScreenProgress.value = false
interfaceStore.setVideoLibraryVisibility(false)
}
})
Expand Down Expand Up @@ -1104,6 +1106,7 @@ onBeforeUnmount(() => {
Object.values(hammerInstances.value).forEach((instance) => {
instance.destroy()
})
interfaceStore.setVideoLibraryVisibility(false)
})
</script>

Expand Down
5 changes: 5 additions & 0 deletions src/stores/appInterface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const useAppInterfaceStore = defineStore('responsive', {
width: windowWidth.value,
height: windowHeight.value,
configModalVisibility: false,
videoLibraryVisibility: false,
UIGlassEffect: useBlueOsStorage('cockpit-ui-glass-effect', {
opacity: 0.8,
bgColor: '#4F4F4F1A',
Expand All @@ -25,6 +26,9 @@ export const useAppInterfaceStore = defineStore('responsive', {
updateWidth() {
this.width = windowWidth.value
},
setVideoLibraryVisibility(value: boolean) {
this.videoLibraryVisibility = value
},
setConfigModalVisibility(value: boolean) {
this.configModalVisibility = value
},
Expand Down Expand Up @@ -71,6 +75,7 @@ export const useAppInterfaceStore = defineStore('responsive', {
return 130
},
isConfigModalVisible: (state) => state.configModalVisibility,
isVideoLibraryVisible: (state) => state.videoLibraryVisibility,
getUIGlassEffect: (state) => {
state.UIGlassEffect
},
Expand Down
19 changes: 17 additions & 2 deletions src/views/ConfigurationVideoView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
<template #title>Video library options:</template>
<template #info>
<li>
CHoose to process videos manual or automatically after recorfing ends. In some low end hardware systems
Choose to process videos manual or automatically after recording ends. In some low end hardware systems
and for long durations videos, auto-processing could take some time.
</li>
<li>
Expand All @@ -159,13 +159,24 @@
</li>
</template>
<template #content>
<div class="flex items-center justify-start w-[50%] ml-2">
<div class="flex items-center justify-between w-[96%] ml-2">
<v-checkbox
v-model="videoStore.autoProcessVideos"
label="Auto process videos"
class="text-sm mx-2"
hide-details
/>
<v-btn variant="flat" class="bg-[#FFFFFF22] px-3 elevation-1" @click="openVideoLibrary">
<template #append>
<v-divider vertical></v-divider>
<v-badge color="info" dot class="cursor-pointer" @click="openVideoLibrary">
<v-icon class="w-6 h-6 ml-1 text-slate-100" @click="openVideoLibrary">
mdi-video-box
</v-icon></v-badge
>
</template>
Video Library
</v-btn>
</div>
<div class="flex items-center justify-start w-[50%] ml-2">
<v-checkbox
Expand Down Expand Up @@ -207,6 +218,10 @@ onMounted(() => {
}
})
const openVideoLibrary = (): void => {
interfaceStore.setVideoLibraryVisibility(true)
}
/**
* Handles the input for setting the jitter buffer target
* @param {string} input - The input value to be processed
Expand Down

0 comments on commit 4434af3

Please sign in to comment.