From c888d365e23d5a3941b2a1a859e56b34aaab0502 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Mon, 21 Oct 2024 17:07:06 +0200
Subject: [PATCH] SEBSP-162 add seperate proctoring view for application search

---
 .../ApplicationsSearchUserList.vue            |  20 +
 .../components/views/gallery/GalleryImage.vue |   8 +-
 .../ProctoringApplicationSearchPage.vue       | 478 ++++++++++++++++++
 .../views/proctoring/ProctoringViewPage.vue   |   8 +-
 client/src/router/router.ts                   |   9 +
 .../api-services/applicationsSearchService.ts |  15 +
 .../applicationsSearchViewService.ts          |   9 +
 .../{liveService.ts => linkService.ts}        |   0
 .../proctoringViewService.ts                  |  16 +-
 .../component-services/searchViewService.ts   |   5 +
 client/src/utils/constants.ts                 |   1 +
 .../application-search.controller.ts          |  15 +
 server/src/routes/routes.ts                   |   2 +
 .../services/application-search.service.ts    |   7 +
 14 files changed, 577 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/views/proctoring/ProctoringApplicationSearchPage.vue
 rename client/src/services/component-services/{liveService.ts => linkService.ts} (100%)

diff --git a/client/src/components/views/applications-search/ApplicationsSearchUserList.vue b/client/src/components/views/applications-search/ApplicationsSearchUserList.vue
index 9a28306..f43e0d0 100644
--- a/client/src/components/views/applications-search/ApplicationsSearchUserList.vue
+++ b/client/src/components/views/applications-search/ApplicationsSearchUserList.vue
@@ -9,6 +9,14 @@
 
             <template v-slot:append>
                 <!--todo: maybe move openProctoringView to general utils file-->
+                <v-btn 
+                    @click="searchViewService.openProctoringApplicationSearch(
+                        userItem.sessionUuid, 
+                        props.metadataApp,
+                        props.metadataWindow)" 
+                    variant="text" 
+                    icon="mdi-movie-play">
+                </v-btn>
                 <v-btn 
                     @click="searchViewService.openProctoringView(
                         userItem.sessionUuid, 
@@ -64,6 +72,18 @@
     }
 
 
+    // async function testApi(sessionUUID: string){
+    //     const timestamps: number[] | null = 
+    //         await applicationsSearchViewService.getTimestampListForApplicationSearch(
+    //             sessionUUID,
+    //             props.metadataApp,
+    //             props.metadataWindow
+    //         );
+
+    //     console.log(timestamps)
+    // }
+
+
 </script>
 
 
diff --git a/client/src/components/views/gallery/GalleryImage.vue b/client/src/components/views/gallery/GalleryImage.vue
index 58a175a..5c0b192 100644
--- a/client/src/components/views/gallery/GalleryImage.vue
+++ b/client/src/components/views/gallery/GalleryImage.vue
@@ -14,7 +14,7 @@
             @dblclick="openDialog()"
             :aspect-ratio="16/9"
             :class="{'on-hover': isHovering}"
-            :src="liveService.getLatestImageLink(screenshot, timestamp.toString())">
+            :src="linkService.getLatestImageLink(screenshot, timestamp.toString())">
 
             <div v-if="isHovering || galleryStore.focusedImageIndexes[index]" class="hover-overlay d-flex">
                 <v-row>
@@ -80,7 +80,7 @@
             eager
             class="content-filler"
             :aspect-ratio="16/9"
-            :src="liveService.getLatestImageLink(screenshot, timestamp.toString())">
+            :src="linkService.getLatestImageLink(screenshot, timestamp.toString())">
         </v-img>
     </v-hover>
     <!-------------------------->
@@ -181,7 +181,7 @@
 <script setup lang="ts">
     import { ref, computed, onBeforeMount } from "vue";
     import * as galleryViewService from "@/services/component-services/galleryViewService";
-    import * as liveService from "@/services/component-services/liveService";
+    import * as linkService from "@/services/component-services/linkService";
     import { useAppBarStore, useGalleryStore } from "@/store/store";
     import { useI18n } from "vue-i18n";
 
@@ -220,7 +220,7 @@
     }
 
     const expandedScreenshotLink = computed<string>(() => {
-        return liveService.getLatestImageLink(props.screenshot, props.timestamp.toString());
+        return linkService.getLatestImageLink(props.screenshot, props.timestamp.toString());
     });                                                         
 
     function setTabFocus(event: any){   
diff --git a/client/src/components/views/proctoring/ProctoringApplicationSearchPage.vue b/client/src/components/views/proctoring/ProctoringApplicationSearchPage.vue
new file mode 100644
index 0000000..33b80d0
--- /dev/null
+++ b/client/src/components/views/proctoring/ProctoringApplicationSearchPage.vue
@@ -0,0 +1,478 @@
+<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 
+                    eager
+                    class="img-styling"
+                    ref="videoPlayer"
+                    :src="imageLink" 
+                    :aspect-ratio="16/9">
+                    <template v-slot:error>
+                        no img available
+                    </template>
+                </v-img>
+
+                <!-----------slider---------->
+                <!-- <v-slider class="mt-4" :min="sliderMin" :max="lastScreenshotTime" :step="1000" v-model="sliderTime" thumb-label> -->
+                <v-slider class="mt-4" :min="sliderMin" :max="sliderMax" :step="1000" v-model="sliderTime" thumb-label>
+                    <template v-slot:thumb-label>
+                        {{currentTimeString}}
+                    </template>
+
+                    <!-----------control buttons---------->
+                    <template v-slot:prepend>
+                        <!--backwards-->
+                        <v-btn 
+                            @click="backwards()" 
+                            size="small" 
+                            variant="text" 
+                            icon="mdi-step-backward"
+                            aria-label="backwards">
+                        </v-btn>  
+
+                        <!--pause / play-->
+                        <v-btn 
+                            @click="isPlaying ? pause() : play()" 
+                            size="small" 
+                            variant="text" 
+                            :icon="isPlaying ? 'mdi-pause' : 'mdi-play'"
+                            :aria-label="isPlaying ? 'pause' : 'play'">
+                        </v-btn>
+
+                        <!--forwards-->
+                        <v-btn 
+                            @click="forwards()" 
+                            size="small" 
+                            variant="text" 
+                            icon="mdi-step-forward"
+                            aria-label="forwards">
+                        </v-btn>
+
+                    </template>
+                    <!-------------------------->
+                    
+                    <!-----------time---------->
+                    <template v-slot:append>
+                        <v-menu>
+                            <template v-slot:activator="{ props }">
+                                <v-btn 
+                                    variant="text"
+                                    icon="mdi-cog" 
+                                    v-bind="props"
+                                    aria-label="Playback Speed Selection">
+                                </v-btn>
+                            </template>
+                            <v-list>
+                                <v-list-item>
+                                    Playback Speed
+                                </v-list-item>
+                                <v-divider></v-divider>
+                                <v-list-item 
+                                    v-for="(playbackSpeed, index) in playbackSpeeds" 
+                                    :key="index" 
+                                    :value="index" 
+                                    @click="changePlaybackSpeed(playbackSpeed.id)">
+
+                                    <template v-if="playbackSpeed.id == selectedSpeedId" v-slot:append>
+                                        <v-icon icon="mdi-check"></v-icon>
+                                    </template>
+                                    
+                                    {{ playbackSpeed.title }}
+                                </v-list-item>
+                            </v-list>
+                        </v-menu>
+
+                        <v-chip variant="outlined">
+                            {{ currentTimeString }} / {{ endTimeString }}
+                        </v-chip>
+                        <v-btn @click="toggle" variant="text" icon="mdi-fullscreen" aria-label="Fullscreen"></v-btn>
+                    </template>
+                    <!-------------------------->
+
+
+                </v-slider>
+                <!-------------------------->
+
+            </v-sheet>
+        </v-col>
+        <!-------------------------->
+
+        <!-----------info box---------->
+        <v-col 
+            v-if="isMetadataInfo" 
+            cols="4">
+            <v-card
+                class="mx-auto">
+                <template v-slot:title>
+                    <v-btn
+                        @click="hideShowMetadataInfo()"
+                        variant="text"
+                        icon="mdi-information"
+                        aria-label="Details"
+                        :aria-expanded="isMetadataInfo">
+                    </v-btn>
+                    <h2 class="title-inherit-styling title-no-line-break">Details</h2>
+                </template>
+                <v-card-text>
+                    <v-table density="comfortable" class="text-caption">
+                        <thead>
+                            <tr>
+                                <th class="text-left text-no-wrap">
+                                    <h3 class="title-inherit-styling text-subtitle-2">SEB Session Info</h3>
+                                </th>
+                                <th class="text-left"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(value, key) in sessionInfodata" :key="key">
+                                <th>{{ key }}</th>
+                                <td align="right">{{ value }}</td>
+                            </tr>
+                        </tbody>
+
+                        <thead>
+                            <tr>
+                                <th class="text-left text-no-wrap">
+                                    <h3 class="title-inherit-styling text-subtitle-2">Screenshot Metadata</h3>
+                                </th>
+                                <th class="text-left"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template v-for="(value, key) in screenshotMetadata" :key="key">
+                                <tr :class="[key == constants.APPLICATION_METADATA || key == constants.WINDOW_TITLE_METADATA ? 'metadata-color' : '']">
+                                    <th>{{ key }}:</th>
+                                    <td align="right">{{ value }}</td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </v-table>
+                </v-card-text>
+            </v-card>
+        </v-col>
+        <v-col v-else cols="1" align="center">
+            <v-card>
+                <v-btn
+                    @click="hideShowMetadataInfo()"
+                    variant="text"
+                    size="x-large"
+                    density="default"
+                    icon="mdi-information"
+                    aria-label="Details"
+                    :aria-expanded="isMetadataInfo">
+                </v-btn>
+            </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, onMounted, onUpdated } from "vue";
+    import * as proctoringViewService from "@/services/component-services/proctoringViewService";
+    import * as timeUtils from "@/utils/timeUtils";
+    import { useAppBarStore } from "@/store/store";
+    import { useFullscreen } from "@vueuse/core";
+    import * as linkService from "@/services/component-services/linkService";
+    import * as applicationsSearchViewService from "@/services/component-services/applicationsSearchViewService";
+    import * as constants from "@/utils/constants";
+
+    //slider
+    const sliderTime = ref<number>();
+    const sliderMin = ref<number>();
+    const sliderMax = ref<number>();
+
+    //screenshots
+    const isPlaying = ref<boolean>(false);
+    const currentScreenshot = ref<ScreenshotData>();
+    const imageLink = ref<string>("");
+
+    //screenshot list
+    const screenshotTimestamps = ref<number[]>([]);
+    const screenshotTimestampsFloored = ref<number[]>([]);
+    const timestampsIndex = ref<number>(0);
+
+    //playback speed
+    const SLOW_PLAYBACK_SPEED: number = 1 * 2000;
+    const DEFAULT_PLAYBACK_SPEED: number = 1 * 1000;
+    const FAST_PLAYBACK_SPEED: number = 1 * 500;
+    const PLAYBACK_SPEED = ref<number>(DEFAULT_PLAYBACK_SPEED);
+    const selectedSpeedId = ref<number>(1);
+    const playbackSpeeds: {title: string, id: number}[] = [
+        {title: "0.5", id: 0},
+        {title: "Normal", id: 1},
+        {title: "2.0", id: 2}
+    ];
+
+    //intervals
+    let intervalScreenshots: any | null = null;
+
+    //store
+    const appBarStore = useAppBarStore();
+
+    //router params
+    const sessionId: string = useRoute().params.sessionId.toString();
+    const metadataApp: string = useRoute().params.metadataApp.toString();
+    const metadataWindow: string = useRoute().params.metadataWindow.toString();
+
+    //fullscreen
+    const videoPlayer = ref(null);
+    const { toggle } = useFullscreen(videoPlayer);
+
+    //metadata
+    const isMetadataInfo = ref<boolean>(true);
+
+    //error handling
+    const showError = ref<boolean>(false);
+
+
+    //=============lifecycle and watchers==================
+    onBeforeMount(async () => {
+        await initialize();
+        appBarStore.title = "Proctoring: " + currentScreenshot.value?.clientName;
+    });
+
+    onBeforeUnmount(() => {
+        stopIntervalScreenshots();  
+    });
+
+    async function initialize(){
+        await setTimestampsList();
+        await assignScreenshotDataByTimestamp(screenshotTimestamps.value[0].toString());
+
+        if(currentScreenshot.value == null){ 
+            showError.value = true; 
+            return;
+        }
+
+        setSliderMin(screenshotTimestamps.value[0]);
+        setStartingSliderTime();
+
+        setSliderMax(screenshotTimestamps.value[screenshotTimestamps.value.length-1]);
+    }
+
+    watch(sliderTime, async () => {
+        if(sliderTime.value == null){
+            return;
+        }           
+        
+        if(sliderTime.value != sliderMax.value && !intervalScreenshots){
+            pause();
+        }
+        
+        const sliderTimeForIndex: number = Math.floor(sliderTime.value/1000); 
+        if(screenshotTimestampsFloored.value.includes(sliderTimeForIndex)){
+            timestampsIndex.value = screenshotTimestampsFloored.value.indexOf(sliderTimeForIndex);
+            assignScreenshotDataByTimestamp(sliderTime.value.toString());
+            return;
+        }
+
+        const screenshotTimestampsShortend: number[] = screenshotTimestamps.value.map(timestamp => Math.floor(timestamp / 1000));
+        const sliderTimeForIndexShortend: number = Math.floor(sliderTime.value / 1000);
+
+        console.log(screenshotTimestampsShortend + " --> " + sliderTimeForIndexShortend)
+
+        if(screenshotTimestampsShortend.includes(sliderTimeForIndexShortend)){
+            timestampsIndex.value = screenshotTimestampsShortend.indexOf(sliderTimeForIndexShortend);
+
+        }
+
+        assignScreenshotDataByTimestamp(sliderTime.value.toString());
+    });
+    //==============================
+
+
+    //=============screenshot list logic==================
+    async function setTimestampsList(){
+        const timestamps: number[] | null = 
+            await applicationsSearchViewService.getTimestampListForApplicationSearch(
+                sessionId,
+                metadataApp,
+                metadataWindow
+            );
+
+        if(timestamps == null){
+            showError.value = true;
+            return; 
+        }
+
+        console.log(timestamps)
+
+        screenshotTimestamps.value = timestamps;
+        screenshotTimestampsFloored.value = timestamps.map(timestamp => Math.floor(timestamp / 1000));
+
+        console.log(screenshotTimestamps.value)
+        console.log(screenshotTimestampsFloored.value)
+
+        timestampsIndex.value = 0;
+    }
+
+    function setImageLink(timestamp: string){
+        imageLink.value = linkService.getSpecificImageLink(currentScreenshot.value, timestamp);
+    }
+    
+    //=============screenshot logic==================
+    async function assignScreenshotDataByTimestamp(timestamp: string | undefined){
+        if(timestamp == null) return;
+
+        const screenshotDataResponse: ScreenshotData | null = await proctoringViewService.getScreenshotDataByTimestamp(sessionId, timestamp);
+
+        if(screenshotDataResponse) {
+            currentScreenshot.value = screenshotDataResponse;
+            setImageLink(timestamp);
+        }
+    }
+
+    function setSliderMin(timestamp: number){
+        sliderMin.value = timestamp;
+    }
+
+    function setSliderMax(timestamp: number){
+        sliderMax.value = timestamp;
+    }
+
+    const currentTimeString = computed<string>(() => {
+        if(sliderTime.value != null && sliderMin.value != null){
+            const currentTime: number = sliderTime.value - sliderMin.value;
+            return timeUtils.toTimeString(currentTime);
+        }
+
+        return "";
+    });
+
+    const endTimeString = computed<string>(() => {
+        if(sliderMin.value != null){
+            return timeUtils.toTimeString(screenshotTimestamps.value[screenshotTimestamps.value.length-1] - sliderMin.value);
+        }
+
+        return "";
+    });
+
+    const sessionInfodata = computed<object>(() => {
+        return proctoringViewService.getSessionInfodata(currentScreenshot.value || null);
+    });
+    //==============================
+
+    //=========interval=============
+    function startIntervalScreenshots(){
+        intervalScreenshots = setInterval(async () => {
+            console.log("timestampsIndex.value: " + timestampsIndex.value)
+            // console.log("screenshotTimestamps.value.length: " + screenshotTimestamps.value.length)
+
+            if(timestampsIndex.value == screenshotTimestamps.value.length-1){
+                stopIntervalScreenshots();
+                isPlaying.value = false;
+                return;
+            }
+
+            sliderTime.value! += DEFAULT_PLAYBACK_SPEED;
+            // timestampsIndex.value += 1;
+
+        }, PLAYBACK_SPEED.value);
+    }
+
+    function stopIntervalScreenshots(){
+        if (intervalScreenshots) {
+            clearInterval(intervalScreenshots);
+        }
+    }
+    //==============================
+
+
+    //======video intercation=======
+    function changePlaybackSpeed(id: number) {
+        stopIntervalScreenshots();
+        selectedSpeedId.value = id;
+
+        if(id == 0) PLAYBACK_SPEED.value = SLOW_PLAYBACK_SPEED;
+        if(id == 1) PLAYBACK_SPEED.value = DEFAULT_PLAYBACK_SPEED;
+        if(id == 2) PLAYBACK_SPEED.value = FAST_PLAYBACK_SPEED;
+
+        if(isPlaying.value){
+            startIntervalScreenshots();
+        }
+    }
+
+    function setStartingSliderTime(){
+        sliderTime.value = sliderMin.value;
+    }
+
+    async function backwards(){
+        pause();
+
+        if(currentScreenshot.value == null || sliderTime.value == null || sliderTime.value == currentScreenshot.value.startTime){
+            return;
+        }
+
+        setImageLink(screenshotTimestamps.value[timestampsIndex.value].toString());
+        sliderTime.value -= DEFAULT_PLAYBACK_SPEED;
+    }
+
+    async function forwards(){
+        pause();
+
+        if(currentScreenshot.value == null || sliderTime.value == null || sliderTime.value == currentScreenshot.value.startTime){
+            return;
+        }
+
+        setImageLink(screenshotTimestamps.value[timestampsIndex.value].toString());
+        sliderTime.value += DEFAULT_PLAYBACK_SPEED;
+    }
+
+    function pause(){
+        isPlaying.value = false;
+        stopIntervalScreenshots();
+    }
+
+    function play(){
+        isPlaying.value = true;
+        startIntervalScreenshots();
+    }
+    //==============================
+
+    //=============metadata==================
+    const screenshotMetadata = computed<object>(() => {
+        if(currentScreenshot.value){
+            return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, currentScreenshot.value.metaData, "", screenshotDisplay.value);
+        }
+
+        return proctoringViewService.getScreenshotMetadata(sliderTime.value || 0, null, "", screenshotDisplay.value);
+    });
+
+    const screenshotDisplay = computed<string>(() => {
+        return timestampsIndex.value + " / " + screenshotTimestamps.value.length;
+    });
+
+    function hideShowMetadataInfo(){
+        isMetadataInfo.value ? isMetadataInfo.value = false : isMetadataInfo.value = true;
+    }
+    //==============================
+
+</script>
+
+<style scoped>
+    .img-styling{
+        background-color: black;
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .metadata-color{
+        background: #e2ecf7
+    }
+</style>
\ No newline at end of file
diff --git a/client/src/components/views/proctoring/ProctoringViewPage.vue b/client/src/components/views/proctoring/ProctoringViewPage.vue
index cd28bbc..3e39a5a 100644
--- a/client/src/components/views/proctoring/ProctoringViewPage.vue
+++ b/client/src/components/views/proctoring/ProctoringViewPage.vue
@@ -166,7 +166,7 @@
                         </thead>
                         <tbody>
                             <tr v-for="(value, key) in screenshotMetadata" :key="key">
-                                <th>{{ key }}</th>
+                                <th>{{ key }}:</th>
                                 <td align="right">{{ value }}</td>
                             </tr>
                         </tbody>
@@ -210,7 +210,7 @@
     import { useAppBarStore, useAuthStore } from "@/store/store";
     import * as searchViewService from "@/services/component-services/searchViewService";
     import { useFullscreen } from "@vueuse/core";
-    import * as liveService from "@/services/component-services/liveService";
+    import * as linkService from "@/services/component-services/linkService";
     import { SortOrder } from "@/models/sortOrderEnum";
 
     //slider
@@ -367,7 +367,7 @@
     });
 
     async function initialize(){
-        await assignScreenshotData()
+        await assignScreenshotData();
         if(currentScreenshot.value == null){ 
             showError.value = true; 
             return;
@@ -401,7 +401,7 @@
     }
 
     function setImageLink(timestamp: string){
-        imageLink.value = liveService.getSpecificImageLink(currentScreenshot.value, timestamp);
+        imageLink.value = linkService.getSpecificImageLink(currentScreenshot.value, timestamp);
     }
     
     //=============screenshot logic==================
diff --git a/client/src/router/router.ts b/client/src/router/router.ts
index 37ae9a0..d8ce2ce 100644
--- a/client/src/router/router.ts
+++ b/client/src/router/router.ts
@@ -6,6 +6,7 @@ import SearchPage from "@/components/views/search/SearchPage.vue";
 import GalleryViewPage from "@/components/views/gallery/GalleryViewPage.vue";
 import ApplicationsSearchViewPage from "@/components/views/applications-search/ApplicationsSearchViewPage.vue";
 import ProctoringViewPage from "@/components/views/proctoring/ProctoringViewPage.vue";
+import ProctoringApplicationSearchPage from "@/components/views/proctoring/ProctoringApplicationSearchPage.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";
@@ -111,6 +112,14 @@ const routes: Array<RouteRecordRaw> = [
             title: "Proctoring" + defaultPageTitle
         }
       },
+      {
+        path: constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/:sessionId/:metadataApp/:metadataWindow",
+        name: "ProctoringApplicationSearchPage",
+        component: ProctoringApplicationSearchPage,
+        meta: {
+            title: "Proctoring" + defaultPageTitle
+        }
+      },
       {
         path: constants.ACCOUNT_VIEW_ROUTE,
         name: "UserAccountPage",
diff --git a/client/src/services/api-services/applicationsSearchService.ts b/client/src/services/api-services/applicationsSearchService.ts
index 15c1aa9..afa5e64 100644
--- a/client/src/services/api-services/applicationsSearchService.ts
+++ b/client/src/services/api-services/applicationsSearchService.ts
@@ -71,6 +71,21 @@ export async function getUserListForApplicationSearch(groupIds: string, screenPr
         }
 
 
+    } catch (error) {
+        throw error;
+    }
+}
+
+export async function getTimestampListForApplicationSearch(sessionUUID: string, screenProctoringMetadataApplication: string, screenProctoringMetadataWindowTitle: string): Promise<number[] | any> {
+    try {
+        const url: string = "/search/applications/timestamps";
+        const { data, status }: AxiosResponse = await apiService.api.get(url, { headers: apiService.getHeaders(), params: { sessionUUID, screenProctoringMetadataApplication, screenProctoringMetadataWindowTitle } });
+
+        if (status === 200) {
+            return data;
+        }
+
+
     } catch (error) {
         throw error;
     }
diff --git a/client/src/services/component-services/applicationsSearchViewService.ts b/client/src/services/component-services/applicationsSearchViewService.ts
index 69cd113..c1674db 100644
--- a/client/src/services/component-services/applicationsSearchViewService.ts
+++ b/client/src/services/component-services/applicationsSearchViewService.ts
@@ -48,4 +48,13 @@ export async function getUserListForApplicationSearch(groupIds: string, screenPr
         console.error(error);
         return null;
     }
+}
+
+export async function getTimestampListForApplicationSearch(sessionUUID: string, screenProctoringMetadataApplication: string, screenProctoringMetadataWindowTitle: string): Promise<number[] | null>{
+    try{
+        return await applicationService.getTimestampListForApplicationSearch(sessionUUID, screenProctoringMetadataApplication, screenProctoringMetadataWindowTitle);        
+    }catch(error){
+        console.error(error);
+        return null;
+    }
 }
\ No newline at end of file
diff --git a/client/src/services/component-services/liveService.ts b/client/src/services/component-services/linkService.ts
similarity index 100%
rename from client/src/services/component-services/liveService.ts
rename to client/src/services/component-services/linkService.ts
diff --git a/client/src/services/component-services/proctoringViewService.ts b/client/src/services/component-services/proctoringViewService.ts
index dcf222e..b48057c 100644
--- a/client/src/services/component-services/proctoringViewService.ts
+++ b/client/src/services/component-services/proctoringViewService.ts
@@ -36,15 +36,15 @@ export async function getScreenshotTimestamps(sessionId: string, timestamp: stri
 //=============metadata=========
 export function getScreenshotMetadata(sliderTime: number, currentScreenshotMetadata: MetaData | null, additionalMetadataInfo: string, total: string): object{
     return {
-        "Total:": total,
-        "Date:": timeUtils.formatTimestampToDate(sliderTime),
-        "Time:": timeUtils.formatTimestampToTime(sliderTime),
+        "Total": total,
+        "Date": timeUtils.formatTimestampToDate(sliderTime),
+        "Time": timeUtils.formatTimestampToTime(sliderTime),
 
-        [constants.APPLICATION_METADATA + ":"]: currentScreenshotMetadata?.screenProctoringMetadataApplication,
-        [constants.SEB_BROWSER_TITLE_METADATA + ":"]: currentScreenshotMetadata?.screenProctoringMetadataBrowser,
-        [constants.ACTIVITY_DETAILS_METADATA + ":"]: currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo,
-        [constants.SEB_BROWSER_URL_METADATA + ":"]: currentScreenshotMetadata?.screenProctoringMetadataURL,
-        [constants.WINDOW_TITLE_METADATA + ":"]: currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
+        [constants.APPLICATION_METADATA]: currentScreenshotMetadata?.screenProctoringMetadataApplication,
+        [constants.SEB_BROWSER_TITLE_METADATA]: currentScreenshotMetadata?.screenProctoringMetadataBrowser,
+        [constants.ACTIVITY_DETAILS_METADATA]: currentScreenshotMetadata?.screenProctoringMetadataUserAction + " " + additionalMetadataInfo,
+        [constants.SEB_BROWSER_URL_METADATA]: currentScreenshotMetadata?.screenProctoringMetadataURL,
+        [constants.WINDOW_TITLE_METADATA]: currentScreenshotMetadata?.screenProctoringMetadataWindowTitle,
     };
 }
 
diff --git a/client/src/services/component-services/searchViewService.ts b/client/src/services/component-services/searchViewService.ts
index 521968a..f6f485e 100644
--- a/client/src/services/component-services/searchViewService.ts
+++ b/client/src/services/component-services/searchViewService.ts
@@ -62,4 +62,9 @@ export function openProctoringView(sessionId: string, timestamp?: string){
 
     openUrlInNewTab(url);
 }
+
+export function openProctoringApplicationSearch(sessionId: string, metadataApp: string, metadataWindow: string){
+    const url: string = constants.PROCTORING_APPLICATION_SEARCH_ROUTE + "/" + sessionId + "/" + metadataApp + "/" + metadataWindow;
+    openUrlInNewTab(url);
+}
 //==============================
\ No newline at end of file
diff --git a/client/src/utils/constants.ts b/client/src/utils/constants.ts
index b3aaf9a..6301c97 100644
--- a/client/src/utils/constants.ts
+++ b/client/src/utils/constants.ts
@@ -8,6 +8,7 @@ export const SEARCH_ROUTE = "/search";
 export const APPLICATIONS_ROUTE = "/applications";
 export const GALLERY_VIEW_ROUTE = "/gallery-view";
 export const PROCTORING_VIEW_ROUTE = "/recording";
+export const PROCTORING_APPLICATION_SEARCH_ROUTE = "/recording/application-search";
 export const ACCOUNT_VIEW_ROUTE = "/account";
 
 //metadata
diff --git a/server/src/controllers/application-search.controller.ts b/server/src/controllers/application-search.controller.ts
index dc9b007..5a8d9c4 100644
--- a/server/src/controllers/application-search.controller.ts
+++ b/server/src/controllers/application-search.controller.ts
@@ -59,6 +59,21 @@ export async function getUserListForApplicationSearch(req: Request, res: Respons
 
         return res.status(200).json(exams);
 
+    }catch(error){
+        apiService.handleGenericApiError(error, res);
+    }
+}
+
+export async function getTimestampListForApplicationSearch(req: Request, res: Response){
+    try{
+        const exams: object = await applicationSearchService.getTimestampListForApplicationSearch(req.headers.authorization, {
+            "sessionUUID": req.query.sessionUUID,
+            "screenProctoringMetadataApplication": req.query.screenProctoringMetadataApplication,
+            "screenProctoringMetadataWindowTitle": req.query.screenProctoringMetadataWindowTitle
+        });
+
+        return res.status(200).json(exams);
+
     }catch(error){
         apiService.handleGenericApiError(error, res);
     }
diff --git a/server/src/routes/routes.ts b/server/src/routes/routes.ts
index 046d1a9..fe159eb 100644
--- a/server/src/routes/routes.ts
+++ b/server/src/routes/routes.ts
@@ -28,6 +28,8 @@ router.get("/search/applications/groupIds/:examId", applicationSearchController.
 router.get("/search/applications/metadata/app", applicationSearchController.getDistinctMetadataAppForExam);
 router.get("/search/applications/metadata/window", applicationSearchController.getDistinctMetadataWindowForExam);
 router.get("/search/applications/users", applicationSearchController.getUserListForApplicationSearch);
+router.get("/search/applications/timestamps", applicationSearchController.getTimestampListForApplicationSearch);
+
 
 router.get("/useraccount/me", userAccountController.getPersonalUserAccount);
 router.get("/useraccount/:accountId", userAccountController.getUserAccountById);
diff --git a/server/src/services/application-search.service.ts b/server/src/services/application-search.service.ts
index 643ccf1..ea174cb 100644
--- a/server/src/services/application-search.service.ts
+++ b/server/src/services/application-search.service.ts
@@ -35,5 +35,12 @@ export async function getUserListForApplicationSearch(token: string, params: {})
     const url: string = applicationSearchUrl + "/users";
     const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token), params: params});
 
+    return data;
+}
+
+export async function getTimestampListForApplicationSearch(token: string, params: {}): Promise<object>{
+    const url: string = applicationSearchUrl + "/timestamps";
+    const {data, status} = await apiService.api.get(url, {headers: apiService.getHeaders(token), params: params});
+
     return data;
 }
\ No newline at end of file