VIGAD/src/App.vue at 9f8d9f409210e30593c20f23fb9b30ba709cfd3b · VisualGameData/VIGAD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
    <v-app theme="dark">
        <!-- Main Content view-->
        <v-main>
            <!-- Provides the application the proper gutter -->
            <v-container fluid>
                <v-row class="cols" no-gutters>
                    <v-col id="side-panel-container" cols="2" md="4">
                        <v-sheet
                            color="background"
                            rounded="lg"
                            class="proper-height"
                        >
                            <router-view />
                        </v-sheet>
                    </v-col>

                    <v-col>
                        <v-sheet class="proper-height" rounded="lg">
                            <div id="video-stream-container">
                                <MainVideoStream />
                            </div>
                        </v-sheet>
                    </v-col>
                </v-row>
            </v-container>
        </v-main>

        <!-- Bottom Navigation -->
        <BottomNavigation />

        <!-- Notification Prompts -->
        <NotificantionProvider
            :location="NotificationAnchorPosition.TOP_RIGHT"
        />
    </v-app>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import MainVideoStream from '@/components/MainVideoStream/MainVideoStream.vue';
import BottomNavigation from '@/components/Navigation/BottomNavigation.vue';
import NotificantionProvider from '@/components/Notifications/NotificationProvider/NotificationProvider.vue';
import { NotificationAnchorPosition } from '@/components/Notifications/NotificationAnchorPosition';
import useStreamHandler from '@/composables/useStreamHandler/useStreamHandler';
import useLogger from '@/composables/useLogger/useLogger';

// Force the application to navigate to the default route
const router = useRouter();

// Get the default preview video stream function
const { setDefaultPreviewVideoStream } = useStreamHandler();

// Get the addLog function from the useLogger composable
const { addLog } = useLogger();

onMounted(async () => {
    // set the default preview video stream
    await setDefaultPreviewVideoStream();
    // navigate to the default route
    router.push('/');
    // add a log entry
    addLog('Application started');
});
</script>

<style lang="scss">
// Variables
$bottom-nav-height: 56px;
$container-padding: 16px;
$viewport-height: 100vh;

// Global styles
*,
:after,
:before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

// Body styles
body,
html {
    width: 100%;
    height: 100%;
    font-family: YouTube Sans, Roboto, sans-serif;
    overflow: hidden !important;
}

body {
    position: relative;
    min-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    user-select: none;
}

// Classes
.drag {
    -webkit-app-region: drag;
}

.no-drag {
    -webkit-app-region: no-drag;
}

.proper-height {
    min-height: calc(
        #{$viewport-height} - #{$bottom-nav-height} - #{$container-padding} - #{$container-padding}
    );
    max-height: calc(
        #{$viewport-height} - #{$bottom-nav-height} - #{$container-padding} - #{$container-padding}
    );
    overflow: hidden;
}

// Sections
#side-panel-container {
    overflow-y: auto;
    min-width: 375px;
    max-width: 375px;
    margin-right: $container-padding;
}

#video-stream-container {
    min-height: calc(
        #{$viewport-height} - #{$bottom-nav-height} - #{$container-padding} - #{$container-padding}
    );
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>