From 70db7acc4e148034374493a24ec228e19cf9196d Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Thu, 16 Nov 2023 15:06:52 +0100
Subject: [PATCH 1/4] add basic auth to register call

---
 server/src/services/api.service.ts           |  2 +-
 server/src/services/authorization.service.ts | 15 ++++++---------
 server/src/services/user-account.service.ts  |  5 ++++-
 server/src/utils/utils.ts                    |  5 ++++-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/server/src/services/api.service.ts b/server/src/services/api.service.ts
index ee803cb..8a97cf7 100644
--- a/server/src/services/api.service.ts
+++ b/server/src/services/api.service.ts
@@ -13,7 +13,7 @@ export function getAuthorizationHeaders(encodedCredentials: string): object {
     };
 }
 
-export function getJwtAuthorizationHeaders(encodedCredentials: string): object {
+export function getAuthorizationHeadersBasic(encodedCredentials: string): object {
     return {
         "Authorization": "Basic " + encodedCredentials,
         "Content-Type": "application/x-www-form-urlencoded"
diff --git a/server/src/services/authorization.service.ts b/server/src/services/authorization.service.ts
index 30764d8..758966d 100644
--- a/server/src/services/authorization.service.ts
+++ b/server/src/services/authorization.service.ts
@@ -2,13 +2,15 @@ import axios from 'axios';
 import {Buffer} from 'buffer';
 import * as ENV from "../config/envConfig";
 import * as apiService from "../services/api.service";
+import * as utils from "../utils/utils";
+
 
 const tokenUrl: string = ENV.PROCTOR_SERVER_URL + ENV.PROCTOR_SERVER_PORT + "/oauth/token?grant_type=";
 const jwtUrl: string = ENV.PROCTOR_SERVER_URL + ENV.PROCTOR_SERVER_PORT + "/oauth/jwttoken/verify";
 
 export async function authorizeViaScreenProctoringServer(username: string, password: string): Promise<object>{
     const url: string = tokenUrl + "password&username=" + username + "&password=" + password;
-    const encodedCredentials: string = createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
+    const encodedCredentials: string = utils.createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
 
     const {data, status} = await axios.post(url, {}, {
         headers: apiService.getAuthorizationHeaders(encodedCredentials)
@@ -19,10 +21,10 @@ export async function authorizeViaScreenProctoringServer(username: string, passw
 
 export async function verifyJwt(logintoken: string): Promise<object>{
     const url: string = jwtUrl;
-    const encodedCredentials: string = createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
+    const encodedCredentials: string = utils.createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
 
     const {data, status} = await axios.post(url, {logintoken}, {
-        headers: apiService.getJwtAuthorizationHeaders(encodedCredentials)
+        headers: apiService.getAuthorizationHeadersBasic(encodedCredentials)
     });
 
     return data;
@@ -30,7 +32,7 @@ export async function verifyJwt(logintoken: string): Promise<object>{
 
 export async function refreshViaScreenProctoringServer(refreshToken: string): Promise<object>{
     const url: string = tokenUrl + "refresh_token&client_id=" + ENV.PROCTOR_SERVER_USERNAME + "&refresh_token=" + refreshToken;
-    const encodedCredentials: string = createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
+    const encodedCredentials: string = utils.createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
 
     const {data, status} = await axios.post(url, {}, {
         headers: apiService.getAuthorizationHeaders(encodedCredentials)
@@ -52,9 +54,4 @@ export async function logLogout(token: string){
     const {data, status} = await apiService.api.post(url, {}, {headers: apiService.getHeaders(token)});
 
     return data;
-}
-
-
-function createEncodedCredentials(username: string, password: string): string{
-    return Buffer.from(username + ":" + password).toString("base64");
 }
\ No newline at end of file
diff --git a/server/src/services/user-account.service.ts b/server/src/services/user-account.service.ts
index a6e6fb4..d30cb12 100644
--- a/server/src/services/user-account.service.ts
+++ b/server/src/services/user-account.service.ts
@@ -1,14 +1,17 @@
 import * as ENV from "../config/envConfig";
 import * as apiService from "./api.service";
 import axios from "axios";
+import * as utils from "../utils/utils";
 
 
 //does not use the pre-configured api-serice --> calls an unprotected api on the sp-server
 const unprotectedUrl = ENV.PROCTOR_SERVER_URL + ENV.PROCTOR_SERVER_PORT;
 
 export async function registerUserAccount(userData: {}): Promise<object>{
+    const encodedCredentials: string = utils.createEncodedCredentials(ENV.PROCTOR_SERVER_USERNAME, ENV.PROCTOR_SERVER_PASSWORD);
     const url = unprotectedUrl + "/register";
-    const {data, status} = await axios.post(url, userData, {headers: apiService.getHeadersWithoutAuth()});
+
+    const {data, status} = await axios.post(url, userData, {headers: apiService.getAuthorizationHeadersBasic(encodedCredentials)});
 
     return data;
 }
diff --git a/server/src/utils/utils.ts b/server/src/utils/utils.ts
index 324beb0..89fbd96 100644
--- a/server/src/utils/utils.ts
+++ b/server/src/utils/utils.ts
@@ -1,4 +1,3 @@
-
 export function stringToBoolean(booleanValue: string): boolean{
     if(booleanValue == "true"){
         return true;
@@ -9,4 +8,8 @@ export function stringToBoolean(booleanValue: string): boolean{
     }
 
     return false;
+}
+
+export function createEncodedCredentials(username: string, password: string): string{
+    return Buffer.from(username + ":" + password).toString("base64");
 }
\ No newline at end of file

From daa12b2891b243d8815b017ff705ff9fbcd37f74 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 20 Nov 2023 13:30:09 +0100
Subject: [PATCH 2/4] rename api call, small refactoring

---
 .../views/proctoring/ProctoringViewPage.vue   | 367 ++++++++++++++++++
 1 file changed, 367 insertions(+)
 create mode 100644 client/src/components/views/proctoring/ProctoringViewPage.vue

diff --git a/client/src/components/views/proctoring/ProctoringViewPage.vue b/client/src/components/views/proctoring/ProctoringViewPage.vue
new file mode 100644
index 0000000..4665677
--- /dev/null
+++ b/client/src/components/views/proctoring/ProctoringViewPage.vue
@@ -0,0 +1,367 @@
+<template>
+    <v-row v-if="!showError">
+        
+        <!-----------video player---------->
+        <v-col>
+            <v-sheet 
+                elevation="4"
+                class="rounded-lg pt-4 pl-4 pr-4">
+                <v-img 
+                    class="img-styling"
+                    ref="videoPlayer"
+                    :src="imageLink" 
+                    :aspect-ratio="16/9">
+                    <template v-slot:error>
+                        no img available
+                    </template>
+                </v-img>
+
+                <v-slider class="mt-4" :min="firstScreenshotTime" :max="lastScreenshotTime" :step="1000" v-model="sliderTime" thumb-label>
+                    <template v-slot:thumb-label>
+                        {{currentTimeString}}
+                    </template>
+                    <template v-slot:prepend>
+                        <v-btn @click="backwards()" size="small" variant="text" icon="mdi-step-backward"></v-btn>
+                        <v-btn @click="pausePlay()" size="small" variant="text" :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"></v-btn>
+                        <v-btn @click="forwards()" size="small" variant="text" icon="mdi-step-forward"></v-btn>
+                    </template>
+                    <template v-slot:append>
+                        <v-chip variant="outlined">
+                            {{ currentTimeString }} / {{ endTimeString }}
+                        </v-chip>
+                        <v-btn @click="toggle" variant="text" icon="mdi-fullscreen"></v-btn>
+                    </template>
+                </v-slider>
+            </v-sheet>
+        </v-col>
+        <!-------------------------->
+
+        <!-----------info box---------->
+        <v-col cols="3" v-if="isMetadataInfo">
+            <v-card color="#e2ecf7" elevation="4">
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="9">
+                            <div class="text-h6">
+                                SEB Session Info
+                            </div>
+                        </v-col>
+                        <v-col cols="3" align="right">
+                            <v-btn @click="hideShowMetadataInfo()" size="small" icon="mdi-arrow-expand-right"></v-btn>
+                        </v-col>
+                    </v-row>
+                    <v-row v-for="(value, key) in sessionInfodata" :key="key">
+                        <v-col>
+                            {{key}}
+                        </v-col>
+                        <v-col>
+                            {{value}}
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <v-card-title>ScreenshotData Metadata</v-card-title>
+                <v-card-text>
+                    <v-row v-for="(value, key) in screenshotMetadata" :key="key">
+                        <v-col>
+                            {{key}}
+                        </v-col>
+                        <v-col>
+                            {{value}}
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col v-else cols="1" align="center">
+            <v-card color="#e2ecf7">
+                <v-card-title>
+                    <v-btn @click="hideShowMetadataInfo()" size="small" icon="mdi-arrow-expand-left"></v-btn>
+                </v-card-title>
+            </v-card>
+        </v-col>
+        <!-------------------------->
+
+    </v-row>
+
+    <AlertMsg 
+        v-else
+        :alertProps="{
+            color: 'warning',
+            type: 'alert',
+            textKey: 'no-data'
+        }">
+    </AlertMsg>
+</template>
+
+<script setup lang="ts">
+    import { useRoute } from 'vue-router';
+    import { ref, onBeforeMount, onBeforeUnmount, watch, computed } from "vue";
+    import * as proctoringViewService from "@/services/component-services/proctoringViewService";
+    import * as timeUtils from "@/utils/timeUtils";
+    import * as groupingUtils from "@/utils/groupingUtils";
+    import { useAppBarStore, useAuthStore } from '@/store/app';
+    import * as searchViewService from "@/services/component-services/searchViewService";
+    import { useFullscreen } from '@vueuse/core'
+
+    //reactive variables
+    const isPlaying = ref<boolean>(false);
+    const session = ref<ScreenshotData>();
+    const currentScreenshot = ref<ScreenshotData>();
+    const sliderTime = ref<number>();
+    const firstScreenshotTime = ref<number>();
+    const lastScreenshotTime = ref<number>();
+    const imageLink = ref<string>("");
+    const showError = ref<boolean>(false);
+    const searchTimeline = ref<SearchTimeline | null>();
+
+    //time constants
+    const SLIDER_INTERVAL: number = 1 * 1000;
+    const SESSION_INTERVAL: number = 3 * 1000;
+
+    //intervals
+    let intervalScreenshots: any | null = null;
+    let intervalSession: any | null = null;
+
+    //remaining
+    const appBarStore = useAppBarStore();
+    const authStore = useAuthStore();
+    const sessionId: string = useRoute().params.sessionId.toString();
+    const searchTimestamp: string | undefined = useRoute().query.searchTimestamp?.toString();
+
+    //fullscreen
+    const videoPlayer = ref(null);
+    const { isFullscreen, enter, exit, toggle } = useFullscreen(videoPlayer);
+
+    //metadata
+    const isMetadataInfo = ref<boolean>(true);
+
+
+    //=============lifecycle and watchers==================
+    onBeforeMount(async () => {
+        await getAndAssignSession();
+        await getFirstScreenshotTime();
+        setStartingSliderTime();
+        startIntervalSession();
+
+        appBarStore.title = "Proctoring View of Session: " + session.value?.clientName;
+    });
+
+    onBeforeUnmount(() => {
+        stopIntervalScreenshots();  
+        stopIntervalSessions();
+    });
+
+    watch(sliderTime, async () => {
+        if(sliderTime.value != null){
+            await getCurrentScreenshot(sliderTime.value?.toString());
+        }
+    })
+
+    async function getAndAssignSession(){
+        const sessionResponse: ScreenshotData | null = await proctoringViewService.getScreenshotDataBySessionId(sessionId);
+
+        if(sessionResponse == null){
+            showError.value = true;
+            return;
+        }
+
+        session.value = sessionResponse;
+        lastScreenshotTime.value = session.value.timestamp;
+
+        searchTimeline.value = await searchViewService.searchTimeline(sessionId);
+
+        if(!session.value.active){
+            stopIntervalSessions()
+        }
+
+    }
+    //==============================
+
+
+    //=============screenshot logic==================
+    async function getFirstScreenshotTime(){
+        let specificSessionResponse: ScreenshotData | null = null;
+        if(session.value != null){
+            specificSessionResponse = await proctoringViewService.getScreenshotDataByTimestamp(sessionId, session.value?.startTime.toString());
+        }
+
+        //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
+        if(specificSessionResponse == null) return;
+
+        const imageLinkSplitted: string[] = specificSessionResponse.imageLink.split("/");
+        firstScreenshotTime.value = parseInt(imageLinkSplitted[imageLinkSplitted.length-1]);
+    }
+
+    async function getCurrentScreenshot(timestamp: string){
+        const specificSessionResponse: ScreenshotData | null = await proctoringViewService.getScreenshotDataByTimestamp(sessionId, timestamp);
+
+        //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
+        if(specificSessionResponse == null) return;
+
+        currentScreenshot.value = specificSessionResponse;
+        imageLink.value = currentScreenshot.value.latestImageLink + "/" + timestamp + "/" + "?access_token=" + authStore.getAccessToken();
+    }
+
+    const currentTimeString = computed<string>(() => {
+        if(sliderTime.value != null && firstScreenshotTime.value != null){
+            const currentTime: number = sliderTime.value - firstScreenshotTime.value;
+            return timeUtils.toTimeString(currentTime);
+        }
+
+        return "";
+    });
+
+    const endTimeString = computed<string>(() => {
+        if(session.value != null && firstScreenshotTime.value != null){
+            return timeUtils.toTimeString(session.value.endTime - firstScreenshotTime.value);
+        }
+
+        return "";
+    });
+
+
+    const sessionInfodata = computed<object>(() => {
+        return proctoringViewService.getSessionInfodata(session.value || null);
+    });
+    //==============================
+
+    //=============metadata==================
+    const screenshotMetadata = computed<object>(() => {
+        if(currentScreenshot.value){
+            return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, currentScreenshot.value.metaData, additionalMetadataInfo.value, totalNumberOfScreenshots.value);
+        }
+
+        return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, null, additionalMetadataInfo.value, totalNumberOfScreenshots.value);
+    });
+
+    const additionalMetadataInfo = computed<string>(() => {
+        let result: string = "";
+
+        searchTimeline.value?.timelineGroupDataList.forEach((timelineGroupData, firstIndex) => {
+            const screenshotsGrouped: ScreenshotsGrouped[] | null = groupingUtils.groupScreenshotsByMetadata(timelineGroupData.timelineScreenshotDataList, false);
+
+            if (screenshotsGrouped!= null){
+                for(var i = 0; i < screenshotsGrouped.length; i++){
+                    const index: number = screenshotsGrouped[i].timelineScreenshotDataList.findIndex((group) => timeUtils.toTimeString(group.timestamp) == timeUtils.toTimeString(sliderTime.value!));
+
+                    if(index !== -1){
+                        result = `(${index+1}/${screenshotsGrouped[i].timelineScreenshotDataList?.length})`;
+                        break;
+                    }
+                }
+            }
+
+        });
+
+        return result;
+    });
+
+    const totalNumberOfScreenshots = computed<string>(() => {
+        if(session.value != null && firstScreenshotTime.value != null && sliderTime.value != null){
+            const current: number = timeUtils.toSeconds(sliderTime.value - firstScreenshotTime.value);
+            const total: number = timeUtils.toSeconds(session.value.endTime - firstScreenshotTime.value);
+
+            return `${current}/${total}`;
+        }
+
+        return ""
+    });
+
+    function hideShowMetadataInfo(){
+        isMetadataInfo.value ? isMetadataInfo.value = false : isMetadataInfo.value = true;
+    }
+
+    //==============================
+
+
+    //=============interval==================
+    function startIntervalSession(){
+        if(session.value?.active){
+            intervalSession = setInterval(async () => {
+                await getAndAssignSession();
+            }, SESSION_INTERVAL);
+        }
+    }
+
+    function stopIntervalSessions(){
+        if (intervalSession) {
+            clearInterval(intervalSession);
+        }
+    }
+
+    function startIntervalScreenshots(){
+        intervalScreenshots = setInterval(async () => {
+            if(sliderTime.value != null) {
+                sliderTime.value += SLIDER_INTERVAL;
+            }
+
+            if(session.value != null && sliderTime.value != null && timeUtils.toSeconds(sliderTime.value) == timeUtils.toSeconds(session.value?.endTime)){
+                stopIntervalScreenshots();
+                isPlaying.value = false;
+            }
+
+        }, SLIDER_INTERVAL);
+    }
+
+    function stopIntervalScreenshots(){
+        if (intervalScreenshots) {
+            clearInterval(intervalScreenshots);
+        }
+    }
+    //==============================
+
+    
+    //=============video intercation==================
+    function setStartingSliderTime(){
+        if(searchTimestamp){
+            sliderTime.value = parseInt(searchTimestamp);
+        }else{
+            sliderTime.value = firstScreenshotTime.value;
+        }
+    }
+
+    function backwards(){
+        if(session.value != null && sliderTime.value != null && sliderTime.value != session.value.startTime){
+            sliderTime.value -= SLIDER_INTERVAL;
+        }
+    }
+
+    function forwards(){
+        if(session.value != null && sliderTime.value != null && timeUtils.toSeconds(sliderTime.value) != timeUtils.toSeconds(session.value?.endTime)){
+            sliderTime.value += SLIDER_INTERVAL;
+        }
+    }
+
+    function pausePlay() {
+        if(sliderTime.value != session.value?.endTime){
+            isPlaying.value = !isPlaying.value;
+        }
+
+        if(!isPlaying.value){
+            stopIntervalScreenshots();
+            return;
+        }
+
+        if(isPlaying.value){
+            startIntervalScreenshots();
+        }
+    }
+    //==============================
+
+
+</script>
+
+<style scoped>
+    .img-styling{
+        background-color: black;
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .temp-img-container{
+        width: 500px
+    }
+
+
+</style>
\ No newline at end of file

From 8cfce2eb8040a6542db9153e9c985084c6616ced Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 20 Nov 2023 13:30:52 +0100
Subject: [PATCH 3/4] rename api call (sesseion --> screenshot-data), small
 refactoring

---
 .../components/views/ProctoringViewPage.vue   | 367 ------------------
 .../components/views/gallery/GalleryImage.vue |   2 +-
 .../views/gallery/GalleryViewPage.vue         |   2 +-
 client/src/models/session.ts                  |   2 +-
 client/src/router/index.ts                    |   2 +-
 ...ionService.ts => screenshotDataService.ts} |   8 +-
 .../component-services/galleryViewService.ts  |  12 +-
 .../proctoringViewService.ts                  |  12 +-
 client/src/store/proctoringStore.ts           |   7 +
 .../controllers/screenshot-data.controller.ts |  28 ++
 server/src/controllers/session.controller.ts  |  28 --
 server/src/routes/routes.ts                   |   6 +-
 ....service.ts => screenshot-data.service.ts} |   6 +-
 13 files changed, 61 insertions(+), 421 deletions(-)
 delete mode 100644 client/src/components/views/ProctoringViewPage.vue
 rename client/src/services/api-services/{sessionService.ts => screenshotDataService.ts} (60%)
 create mode 100644 client/src/store/proctoringStore.ts
 create mode 100644 server/src/controllers/screenshot-data.controller.ts
 delete mode 100644 server/src/controllers/session.controller.ts
 rename server/src/services/{session.service.ts => screenshot-data.service.ts} (60%)

diff --git a/client/src/components/views/ProctoringViewPage.vue b/client/src/components/views/ProctoringViewPage.vue
deleted file mode 100644
index d0da97f..0000000
--- a/client/src/components/views/ProctoringViewPage.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<template>
-    <v-row v-if="!showError">
-        
-        <!-----------video player---------->
-        <v-col>
-            <v-sheet 
-                elevation="4"
-                class="rounded-lg pt-4 pl-4 pr-4">
-                <v-img 
-                    class="img-styling"
-                    ref="videoPlayer"
-                    :src="imageLink" 
-                    :aspect-ratio="16/9">
-                    <template v-slot:error>
-                        no img available
-                    </template>
-                </v-img>
-
-                <v-slider class="mt-4" :min="firstScreenshotTime" :max="lastScreenshotTime" :step="1000" v-model="sliderTime" thumb-label>
-                    <template v-slot:thumb-label>
-                        {{currentTimeString}}
-                    </template>
-                    <template v-slot:prepend>
-                        <v-btn @click="backwards()" size="small" variant="text" icon="mdi-step-backward"></v-btn>
-                        <v-btn @click="pausePlay()" size="small" variant="text" :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"></v-btn>
-                        <v-btn @click="forwards()" size="small" variant="text" icon="mdi-step-forward"></v-btn>
-                    </template>
-                    <template v-slot:append>
-                        <v-chip variant="outlined">
-                            {{ currentTimeString }} / {{ endTimeString }}
-                        </v-chip>
-                        <v-btn @click="toggle" variant="text" icon="mdi-fullscreen"></v-btn>
-                    </template>
-                </v-slider>
-            </v-sheet>
-        </v-col>
-        <!-------------------------->
-
-        <!-----------info box---------->
-        <v-col cols="3" v-if="isMetadataInfo">
-            <v-card color="#e2ecf7" elevation="4">
-                <v-card-text>
-                    <v-row>
-                        <v-col cols="9">
-                            <div class="text-h6">
-                                SEB Session Info
-                            </div>
-                        </v-col>
-                        <v-col cols="3" align="right">
-                            <v-btn @click="hideShowMetadataInfo()" size="small" icon="mdi-arrow-expand-right"></v-btn>
-                        </v-col>
-                    </v-row>
-                    <v-row v-for="(value, key) in sessionInfodata" :key="key">
-                        <v-col>
-                            {{key}}
-                        </v-col>
-                        <v-col>
-                            {{value}}
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-
-                <v-card-title>Screenshot Metadata</v-card-title>
-                <v-card-text>
-                    <v-row v-for="(value, key) in screenshotMetadata" :key="key">
-                        <v-col>
-                            {{key}}
-                        </v-col>
-                        <v-col>
-                            {{value}}
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </v-card>
-        </v-col>
-
-        <v-col v-else cols="1" align="center">
-            <v-card color="#e2ecf7">
-                <v-card-title>
-                    <v-btn @click="hideShowMetadataInfo()" size="small" icon="mdi-arrow-expand-left"></v-btn>
-                </v-card-title>
-            </v-card>
-        </v-col>
-        <!-------------------------->
-
-    </v-row>
-
-    <AlertMsg 
-        v-else
-        :alertProps="{
-            color: 'warning',
-            type: 'alert',
-            textKey: 'no-data'
-        }">
-    </AlertMsg>
-</template>
-
-<script setup lang="ts">
-    import { useRoute } from 'vue-router';
-    import { ref, onBeforeMount, onBeforeUnmount, watch, computed } from "vue";
-    import * as proctoringViewService from "@/services/component-services/proctoringViewService";
-    import * as timeUtils from "@/utils/timeUtils";
-    import * as groupingUtils from "@/utils/groupingUtils";
-    import { useAppBarStore, useAuthStore } from '@/store/app';
-    import * as searchViewService from "@/services/component-services/searchViewService";
-    import { useFullscreen } from '@vueuse/core'
-
-    //reactive variables
-    const isPlaying = ref<boolean>(false);
-    const session = ref<Screenshot>();
-    const currentScreenshot = ref<Screenshot>();
-    const sliderTime = ref<number>();
-    const firstScreenshotTime = ref<number>();
-    const lastScreenshotTime = ref<number>();
-    const imageLink = ref<string>("");
-    const showError = ref<boolean>(false);
-    const searchTimeline = ref<SearchTimeline | null>();
-
-    //time constants
-    const SLIDER_INTERVAL: number = 1 * 1000;
-    const SESSION_INTERVAL: number = 3 * 1000;
-
-    //intervals
-    let intervalScreenshots: any | null = null;
-    let intervalSession: any | null = null;
-
-    //remaining
-    const appBarStore = useAppBarStore();
-    const authStore = useAuthStore();
-    const sessionId: string = useRoute().params.sessionId.toString();
-    const searchTimestamp: string | undefined = useRoute().query.searchTimestamp?.toString();
-
-    //fullscreen
-    const videoPlayer = ref(null);
-    const { isFullscreen, enter, exit, toggle } = useFullscreen(videoPlayer);
-
-    //metadata
-    const isMetadataInfo = ref<boolean>(true);
-
-
-    //=============lifecycle and watchers==================
-    onBeforeMount(async () => {
-        await getAndAssignSession();
-        await getFirstScreenshotTime();
-        setStartingSliderTime();
-        startIntervalSession();
-
-        appBarStore.title = "Proctoring View of Session: " + session.value?.clientName;
-    });
-
-    onBeforeUnmount(() => {
-        stopIntervalScreenshots();  
-        stopIntervalSessions();
-    });
-
-    watch(sliderTime, async () => {
-        if(sliderTime.value != null){
-            await getCurrentScreenshot(sliderTime.value?.toString());
-        }
-    })
-
-    async function getAndAssignSession(){
-        const sessionResponse: Screenshot | null = await proctoringViewService.getSessionBySessionId(sessionId);
-
-        if(sessionResponse == null){
-            showError.value = true;
-            return;
-        }
-
-        session.value = sessionResponse;
-        lastScreenshotTime.value = session.value.timestamp;
-
-        searchTimeline.value = await searchViewService.searchTimeline(sessionId);
-
-        if(!session.value.active){
-            stopIntervalSessions()
-        }
-
-    }
-    //==============================
-
-
-    //=============screenshot logic==================
-    async function getFirstScreenshotTime(){
-        let specificSessionResponse: Screenshot | null = null;
-        if(session.value != null){
-            specificSessionResponse = await proctoringViewService.getSessionByTimestamp(sessionId, session.value?.startTime.toString());
-        }
-
-        //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
-        if(specificSessionResponse == null) return;
-
-        const imageLinkSplitted: string[] = specificSessionResponse.imageLink.split("/");
-        firstScreenshotTime.value = parseInt(imageLinkSplitted[imageLinkSplitted.length-1]);
-    }
-
-    async function getCurrentScreenshot(timestamp: string){
-        const specificSessionResponse: Screenshot | null = await proctoringViewService.getSessionByTimestamp(sessionId, timestamp);
-
-        //error does not have to be shown here - if the slider moves too fast, some screenshots cannot be shown
-        if(specificSessionResponse == null) return;
-
-        currentScreenshot.value = specificSessionResponse;
-        imageLink.value = currentScreenshot.value.latestImageLink + "/" + timestamp + "/" + "?access_token=" + authStore.getAccessToken();
-    }
-
-    const currentTimeString = computed<string>(() => {
-        if(sliderTime.value != null && firstScreenshotTime.value != null){
-            const currentTime: number = sliderTime.value - firstScreenshotTime.value;
-            return timeUtils.toTimeString(currentTime);
-        }
-
-        return "";
-    });
-
-    const endTimeString = computed<string>(() => {
-        if(session.value != null && firstScreenshotTime.value != null){
-            return timeUtils.toTimeString(session.value.endTime - firstScreenshotTime.value);
-        }
-
-        return "";
-    });
-
-
-    const sessionInfodata = computed<object>(() => {
-        return proctoringViewService.getSessionInfodata(session.value || null);
-    });
-    //==============================
-
-    //=============metadata==================
-    const screenshotMetadata = computed<object>(() => {
-        if(currentScreenshot.value){
-            return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, currentScreenshot.value.metaData, additionalMetadataInfo.value, totalNumberOfScreenshots.value);
-        }
-
-        return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, null, additionalMetadataInfo.value, totalNumberOfScreenshots.value);
-    });
-
-    const additionalMetadataInfo = computed<string>(() => {
-        let result: string = "";
-
-        searchTimeline.value?.timelineGroupDataList.forEach((timelineGroupData, firstIndex) => {
-            const screenshotsGrouped: ScreenshotsGrouped[] | null = groupingUtils.groupScreenshotsByMetadata(timelineGroupData.timelineScreenshotDataList, false);
-
-            if (screenshotsGrouped!= null){
-                for(var i = 0; i < screenshotsGrouped.length; i++){
-                    const index: number = screenshotsGrouped[i].timelineScreenshotDataList.findIndex((group) => timeUtils.toTimeString(group.timestamp) == timeUtils.toTimeString(sliderTime.value!));
-
-                    if(index !== -1){
-                        result = `(${index+1}/${screenshotsGrouped[i].timelineScreenshotDataList?.length})`;
-                        break;
-                    }
-                }
-            }
-
-        });
-
-        return result;
-    });
-
-    const totalNumberOfScreenshots = computed<string>(() => {
-        if(session.value != null && firstScreenshotTime.value != null && sliderTime.value != null){
-            const current: number = timeUtils.toSeconds(sliderTime.value - firstScreenshotTime.value);
-            const total: number = timeUtils.toSeconds(session.value.endTime - firstScreenshotTime.value);
-
-            return `${current}/${total}`;
-        }
-
-        return ""
-    });
-
-    function hideShowMetadataInfo(){
-        isMetadataInfo.value ? isMetadataInfo.value = false : isMetadataInfo.value = true;
-    }
-
-    //==============================
-
-
-    //=============interval==================
-    function startIntervalSession(){
-        if(session.value?.active){
-            intervalSession = setInterval(async () => {
-                await getAndAssignSession();
-            }, SESSION_INTERVAL);
-        }
-    }
-
-    function stopIntervalSessions(){
-        if (intervalSession) {
-            clearInterval(intervalSession);
-        }
-    }
-
-    function startIntervalScreenshots(){
-        intervalScreenshots = setInterval(async () => {
-            if(sliderTime.value != null) {
-                sliderTime.value += SLIDER_INTERVAL;
-            }
-
-            if(session.value != null && sliderTime.value != null && timeUtils.toSeconds(sliderTime.value) == timeUtils.toSeconds(session.value?.endTime)){
-                stopIntervalScreenshots();
-                isPlaying.value = false;
-            }
-
-        }, SLIDER_INTERVAL);
-    }
-
-    function stopIntervalScreenshots(){
-        if (intervalScreenshots) {
-            clearInterval(intervalScreenshots);
-        }
-    }
-    //==============================
-
-    
-    //=============video intercation==================
-    function setStartingSliderTime(){
-        if(searchTimestamp){
-            sliderTime.value = parseInt(searchTimestamp);
-        }else{
-            sliderTime.value = firstScreenshotTime.value;
-        }
-    }
-
-    function backwards(){
-        if(session.value != null && sliderTime.value != null && sliderTime.value != session.value.startTime){
-            sliderTime.value -= SLIDER_INTERVAL;
-        }
-    }
-
-    function forwards(){
-        if(session.value != null && sliderTime.value != null && timeUtils.toSeconds(sliderTime.value) != timeUtils.toSeconds(session.value?.endTime)){
-            sliderTime.value += SLIDER_INTERVAL;
-        }
-    }
-
-    function pausePlay() {
-        if(sliderTime.value != session.value?.endTime){
-            isPlaying.value = !isPlaying.value;
-        }
-
-        if(!isPlaying.value){
-            stopIntervalScreenshots();
-            return;
-        }
-
-        if(isPlaying.value){
-            startIntervalScreenshots();
-        }
-    }
-    //==============================
-
-
-</script>
-
-<style scoped>
-    .img-styling{
-        background-color: black;
-        transition: transform 0.3s ease-in-out;
-    }
-
-    .temp-img-container{
-        width: 500px
-    }
-
-
-</style>
\ No newline at end of file
diff --git a/client/src/components/views/gallery/GalleryImage.vue b/client/src/components/views/gallery/GalleryImage.vue
index 5a9bee8..9d6254f 100644
--- a/client/src/components/views/gallery/GalleryImage.vue
+++ b/client/src/components/views/gallery/GalleryImage.vue
@@ -95,7 +95,7 @@
 
     //props
     const props = defineProps<{
-        screenshot: Screenshot | undefined,
+        screenshot: ScreenshotData | undefined,
         timestamp: number,
         groupUuid: string
     }>();
diff --git a/client/src/components/views/gallery/GalleryViewPage.vue b/client/src/components/views/gallery/GalleryViewPage.vue
index f97dd37..baa15ab 100644
--- a/client/src/components/views/gallery/GalleryViewPage.vue
+++ b/client/src/components/views/gallery/GalleryViewPage.vue
@@ -157,7 +157,7 @@
 
             if(appBarStore.galleryIsMetadataEnabled && group?.value?.screenshots != null){
                 for(let i = 0; i < group.value?.screenshots.length; i++){
-                    const screenshot: Screenshot | null = await galleryViewService.getLatestScreenshotData(group.value.screenshots[i].uuid, timestamp.value);
+                    const screenshot: ScreenshotData | null = await galleryViewService.getLatestScreenshotData(group.value.screenshots[i].uuid, timestamp.value);
                     const metaData: MetaData | undefined = screenshot?.metaData;
                     group.value.screenshots[i].metaData = metaData == null ? {} : metaData;
                 }
diff --git a/client/src/models/session.ts b/client/src/models/session.ts
index fbe8229..322436f 100644
--- a/client/src/models/session.ts
+++ b/client/src/models/session.ts
@@ -1,6 +1,6 @@
 //todo: change name
   
-type Screenshot = {
+type ScreenshotData = {
     startTime: number;
     timestamp: number;
     endTime: number;
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 4253334..1346370 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -5,7 +5,7 @@ import RegisterPage from "@/components/views/RegisterPage.vue"
 import StartPage from "@/components/views/StartPage.vue"
 import SearchPage from "@/components/views/search/SearchPage.vue"
 import GalleryViewPage from "@/components/views/gallery/GalleryViewPage.vue"
-import ProctoringViewPage from "@/components/views/ProctoringViewPage.vue"
+import ProctoringViewPage from "@/components/views/proctoring/ProctoringViewPage.vue"
 import UserAccountPage from "@/components/views/user-account/UserAccountPage.vue"
 import UserInfo from "@/components/views/user-account/UserInfo.vue"
 import * as authenticationService from "@/services/api-services/authenticationService";
diff --git a/client/src/services/api-services/sessionService.ts b/client/src/services/api-services/screenshotDataService.ts
similarity index 60%
rename from client/src/services/api-services/sessionService.ts
rename to client/src/services/api-services/screenshotDataService.ts
index fc068dd..ed07515 100644
--- a/client/src/services/api-services/sessionService.ts
+++ b/client/src/services/api-services/screenshotDataService.ts
@@ -1,10 +1,10 @@
 import axios, { AxiosResponse } from 'axios'
 import * as apiService from "@/services/api-services/apiService";
 
-export async function getSessionBySessionId(sessionId: string): Promise<Screenshot | any> {
+export async function getScreenshotDataBySessionId(sessionId: string): Promise<ScreenshotData | any> {
 
   try {
-    const url: string = "/session/" + sessionId;
+    const url: string = "/screenshot-data/" + sessionId;
     const {data, status}: AxiosResponse = await apiService.api.get(url, {headers: apiService.getHeaders()});
 
     if (status === 200) {
@@ -17,10 +17,10 @@ export async function getSessionBySessionId(sessionId: string): Promise<Screensh
   }
 }
 
-export async function getSessionByTimestamp(sessionId: string, timestamp: string): Promise<Screenshot | any> {
+export async function getScreenshotDataByTimestamp(sessionId: string, timestamp: string): Promise<ScreenshotData | any> {
 
   try {
-    const url: string = "/session/" + sessionId + "/" + timestamp;
+    const url: string = "/screenshot-data/" + sessionId + "/" + timestamp;
     const {data, status}: AxiosResponse = await apiService.api.get(url, {headers: apiService.getHeaders()});
 
     if (status === 200) {
diff --git a/client/src/services/component-services/galleryViewService.ts b/client/src/services/component-services/galleryViewService.ts
index 443b76a..2cda075 100644
--- a/client/src/services/component-services/galleryViewService.ts
+++ b/client/src/services/component-services/galleryViewService.ts
@@ -1,5 +1,5 @@
 import * as groupService from "@/services/api-services/groupService";
-import * as sessionService from "@/services/api-services/sessionService";
+import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import { SortOrder } from "@/models/sortOrderEnum";
 import {navigateTo} from "@/router/navigation";
 import { useAuthStore } from "@/store/app";
@@ -23,9 +23,9 @@ export async function getGroup(groupUuid: string, currentWindow: number, pageSiz
     }
 }
 
-export async function getLatestScreenshotData(sessionUuid: string, timestamp: number): Promise<Screenshot | null>{
+export async function getLatestScreenshotData(sessionUuid: string, timestamp: number): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionByTimestamp(sessionUuid, timestamp.toString());        
+        return await screenshotDataService.getScreenshotDataByTimestamp(sessionUuid, timestamp.toString());        
     }catch(error){
         console.error(error);
         return null;
@@ -39,7 +39,7 @@ export function calcIndex(i: number, n: number, gridSize: number): number {
     return ((i - 1) * gridSize + (n - 1));
 }
 
-export function currentIndexExists(screenshots: Screenshot[] | undefined, index: number): boolean {
+export function currentIndexExists(screenshots: ScreenshotData[] | undefined, index: number): boolean {
 
     if (screenshots != null && screenshots.length > index) {
         return true;
@@ -67,7 +67,7 @@ export function currentIndexExists(screenshots: Screenshot[] | undefined, index:
 //     return screenshotLink;
 // }
 
-export function createImageLinkWithToken(screenshot: Screenshot | undefined, timestamp: number): string {
+export function createImageLinkWithToken(screenshot: ScreenshotData | undefined, timestamp: number): string {
     const authStore = useAuthStore();
 
     if(screenshot == null){
@@ -90,7 +90,7 @@ export function createImageLinkWithToken(screenshot: Screenshot | undefined, tim
 //     }
 // }
 
-export function navigateToProctoringView(screenshot: Screenshot | undefined, groupUuid: string) {
+export function navigateToProctoringView(screenshot: ScreenshotData | undefined, groupUuid: string) {
     if (screenshot != null) {
         navigateTo("/recording/" + screenshot.uuid);
     }
diff --git a/client/src/services/component-services/proctoringViewService.ts b/client/src/services/component-services/proctoringViewService.ts
index 5931f3e..59c69f2 100644
--- a/client/src/services/component-services/proctoringViewService.ts
+++ b/client/src/services/component-services/proctoringViewService.ts
@@ -1,20 +1,20 @@
-import * as sessionService from "@/services/api-services/sessionService";
+import * as screenshotDataService from "@/services/api-services/screenshotDataService";
 import * as timeUtils from "@/utils/timeUtils";
 
 
 //=============api==================
-export async function getSessionBySessionId(sessionId: string): Promise<Screenshot | null>{
+export async function getScreenshotDataBySessionId(sessionId: string): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionBySessionId(sessionId);        
+        return await screenshotDataService.getScreenshotDataBySessionId(sessionId);        
     }catch(error){
         console.error(error);
         return null;
     }
 }
 
-export async function getSessionByTimestamp(sessionId: string, timestamp: string): Promise<Screenshot | null>{
+export async function getScreenshotDataByTimestamp(sessionId: string, timestamp: string): Promise<ScreenshotData | null>{
     try{
-        return await sessionService.getSessionByTimestamp(sessionId, timestamp);        
+        return await screenshotDataService.getScreenshotDataByTimestamp(sessionId, timestamp);        
     }catch(error){
         console.error(error);
         return null;
@@ -34,7 +34,7 @@ export function getScreenshotMetadata(sliderTime: number, currentScreenshotMetad
     };
 }
 
-export function getSessionInfodata(session: Screenshot | null): object{
+export function getSessionInfodata(session: ScreenshotData | null): object{
     if(session == null){
         return {};
     }
diff --git a/client/src/store/proctoringStore.ts b/client/src/store/proctoringStore.ts
new file mode 100644
index 0000000..51791cc
--- /dev/null
+++ b/client/src/store/proctoringStore.ts
@@ -0,0 +1,7 @@
+import { defineStore } from "pinia";
+import * as timeUtils from "@/utils/timeUtils";
+import { ref, computed } from "vue";
+
+
+export const useProctoringStore = defineStore("proctoring", () => {
+});
\ No newline at end of file
diff --git a/server/src/controllers/screenshot-data.controller.ts b/server/src/controllers/screenshot-data.controller.ts
new file mode 100644
index 0000000..97e34bd
--- /dev/null
+++ b/server/src/controllers/screenshot-data.controller.ts
@@ -0,0 +1,28 @@
+import {Request, Response} from 'express';
+import * as apiService from "../services/api.service";
+import * as screenshotDataService from '../services/screenshot-data.service';
+
+export async function getScreenshotDataBySessionId(req: Request, res: Response){
+
+    try{
+        const session: object = await screenshotDataService.getScreenshotDataBySessionId(req.headers.authorization, req.params.sessionId);
+
+        return res.status(200).json(session);
+
+    }catch(error){
+        apiService.handleGenericApiError(error, res);
+    }
+}
+
+
+export async function getScreenshotDataByTimestamp(req: Request, res: Response){
+
+    try{
+        const session: object = await screenshotDataService.getScreenshotDataByTimestamp(req.headers.authorization, req.params.sessionId, req.params.timestamp);
+
+        return res.status(200).json(session);
+
+    }catch(error){
+        apiService.handleGenericApiError(error, res);
+    }
+}
\ No newline at end of file
diff --git a/server/src/controllers/session.controller.ts b/server/src/controllers/session.controller.ts
deleted file mode 100644
index 95a3284..0000000
--- a/server/src/controllers/session.controller.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Request, Response} from 'express';
-import * as apiService from "../services/api.service";
-import * as sessionService from '../services/session.service';
-
-export async function getSessionBySessionId(req: Request, res: Response){
-
-    try{
-        const session: object = await sessionService.getSessionBySessionId(req.headers.authorization, req.params.sessionId);
-
-        return res.status(200).json(session);
-
-    }catch(error){
-        apiService.handleGenericApiError(error, res);
-    }
-}
-
-
-export async function getSessionByTimestamp(req: Request, res: Response){
-
-    try{
-        const session: object = await sessionService.getSessionByTimestamp(req.headers.authorization, req.params.sessionId, req.params.timestamp);
-
-        return res.status(200).json(session);
-
-    }catch(error){
-        apiService.handleGenericApiError(error, res);
-    }
-}
\ No newline at end of file
diff --git a/server/src/routes/routes.ts b/server/src/routes/routes.ts
index f2425ec..06d66d8 100644
--- a/server/src/routes/routes.ts
+++ b/server/src/routes/routes.ts
@@ -1,6 +1,6 @@
 import express, {Router} from 'express';
 import * as groupController from '../controllers/group.controller';
-import * as sessionController from '../controllers/session.controller';
+import * as screenshotDataController from '../controllers/screenshot-data.controller';
 import * as searchController from '../controllers/search.controller';
 import * as userAccountController from '../controllers/user-account.controller';
 import * as settingsController from '../controllers/settings.controller';
@@ -13,8 +13,8 @@ router.get("/settings", settingsController.getSettings)
 router.get("/group", groupController.getGroups);
 router.get("/group/:uuid", groupController.getGroupByUuid);
 
-router.get("/session/:sessionId", sessionController.getSessionBySessionId);
-router.get("/session/:sessionId/:timestamp", sessionController.getSessionByTimestamp);
+router.get("/screenshot-data/:sessionId", screenshotDataController.getScreenshotDataBySessionId);
+router.get("/screenshot-data/:sessionId/:timestamp", screenshotDataController.getScreenshotDataByTimestamp);
 
 router.get("/search/sessions", searchController.searchSessions);
 router.get("/search/screenshots", searchController.searchScreenshots);
diff --git a/server/src/services/session.service.ts b/server/src/services/screenshot-data.service.ts
similarity index 60%
rename from server/src/services/session.service.ts
rename to server/src/services/screenshot-data.service.ts
index 98874aa..052018a 100644
--- a/server/src/services/session.service.ts
+++ b/server/src/services/screenshot-data.service.ts
@@ -1,9 +1,9 @@
 import axios from "axios";
 import * as apiService from "./api.service";
 
-const sessionUrl: string = "/proctoring/session/";
+const sessionUrl: string = "/proctoring/screenshot-data/";
 
-export async function getSessionBySessionId(token: string, sessionId: string): Promise<object>{
+export async function getScreenshotDataBySessionId(token: string, sessionId: string): Promise<object>{
     const url: string = sessionUrl + sessionId;
     const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token)});
 
@@ -11,7 +11,7 @@ export async function getSessionBySessionId(token: string, sessionId: string): P
 }
 
 
-export async function getSessionByTimestamp(token: string, sessionId: string, timestamp: string): Promise<object>{
+export async function getScreenshotDataByTimestamp(token: string, sessionId: string, timestamp: string): Promise<object>{
     const url: string =  sessionUrl + sessionId + "/" + timestamp;
     const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token)});
 

From d3049b237282e6c16d00418c02a3a4700ada1bae Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 20 Nov 2023 13:36:47 +0100
Subject: [PATCH 4/4] renaming

---
 client/src/models/group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/models/group.ts b/client/src/models/group.ts
index 66ad17c..fee32f6 100644
--- a/client/src/models/group.ts
+++ b/client/src/models/group.ts
@@ -37,6 +37,6 @@ type GroupUuid = {
     pageSize: number;
     sortBy: string;
     sortOrder: string;
-    screenshots: Screenshot[];
+    screenshots: ScreenshotData[];
     exam: ExamView;
 }
\ No newline at end of file