From 9176aa72ef4b6378fa4931dd6bfc0935792b5db6 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild@klavaro.se>
Date: Tue, 10 Dec 2024 16:46:08 +0100
Subject: [PATCH] refactor(ts): video controllers

---
 app/index.ts                                  |  1 -
 app/scripts/components/sidebar.ts             |  1 +
 app/scripts/video-controller.ts               | 50 +++++++++++++
 ...ollers.js => video-instance-controller.ts} | 73 ++++++++-----------
 4 files changed, 80 insertions(+), 45 deletions(-)
 create mode 100644 app/scripts/video-controller.ts
 rename app/scripts/{video_controllers.js => video-instance-controller.ts} (65%)

diff --git a/app/index.ts b/app/index.ts
index 3c13018d5..0241c3ac0 100644
--- a/app/index.ts
+++ b/app/index.ts
@@ -68,6 +68,5 @@ require("./lib/jquery.tooltip.pack.js")
 require("./scripts/main")
 require("./scripts/app")
 
-require("./scripts/video_controllers.js")
 require("./scripts/backend/struct-service")
 require("./scripts/matomo")
diff --git a/app/scripts/components/sidebar.ts b/app/scripts/components/sidebar.ts
index d301889d4..b66a6ac8f 100644
--- a/app/scripts/components/sidebar.ts
+++ b/app/scripts/components/sidebar.ts
@@ -9,6 +9,7 @@ import { html, regescape, splitLemgram, safeApply, getConfigurable } from "@/uti
 import { loc, locAttribute, locObj } from "@/i18n"
 import "@/services/utils"
 import "@/components/deptree/deptree"
+import "@/video-controller" // May be used by custom code
 import { RootScope } from "@/root-scope.types"
 import { CqpSearchEvent, SelectWordEvent } from "@/statemachine/types"
 import { Token } from "@/backend/kwic-proxy"
diff --git a/app/scripts/video-controller.ts b/app/scripts/video-controller.ts
new file mode 100644
index 000000000..f09b0f72d
--- /dev/null
+++ b/app/scripts/video-controller.ts
@@ -0,0 +1,50 @@
+/** @format */
+import angular, { IScope, ui } from "angular"
+import "@/video-instance-controller"
+
+type VideoControllerScope = IScope & {
+    videos: { url: string; type: string }[]
+    open: () => void
+    startTime: number
+    endTime: number
+    fileName: string
+    sentence: string
+}
+
+angular.module("korpApp").controller("VideoCtrl", [
+    "$scope",
+    "$uibModal",
+    function ($scope: VideoControllerScope, $uibModal: ui.bootstrap.IModalService) {
+        $scope.videos = []
+
+        $scope.open = function () {
+            let modalInstance
+            modalInstance = $uibModal.open({
+                animation: false,
+                template: require("../markup/sidebar_video.html"),
+                controller: "VideoInstanceCtrl",
+                size: "modal-lg",
+                windowClass: "video-modal-bootstrap",
+                resolve: {
+                    items() {
+                        return $scope.videos
+                    },
+                    startTime() {
+                        return $scope.startTime
+                    },
+                    endTime() {
+                        return $scope.endTime
+                    },
+                    fileName() {
+                        return $scope.fileName
+                    },
+                    sentence() {
+                        return $scope.sentence
+                    },
+                },
+            })
+        }
+
+        $scope.startTime = 0
+    },
+])
diff --git a/app/scripts/video_controllers.js b/app/scripts/video-instance-controller.ts
similarity index 65%
rename from app/scripts/video_controllers.js
rename to app/scripts/video-instance-controller.ts
index d3054de5b..4dc8f9f9a 100644
--- a/app/scripts/video_controllers.js
+++ b/app/scripts/video-instance-controller.ts
@@ -1,47 +1,21 @@
 /** @format */
+import angular, { ICompileService, IScope, ITimeoutService, ui } from "angular"
 import moment from "moment"
 
-const korpApp = angular.module("korpApp")
-
-korpApp.controller("VideoCtrl", [
-    "$scope",
-    "$uibModal",
-    function ($scope, $uibModal) {
-        $scope.videos = []
-
-        $scope.open = function () {
-            let modalInstance
-            modalInstance = $uibModal.open({
-                animation: false,
-                template: require("../markup/sidebar_video.html"),
-                controller: "VideoInstanceCtrl",
-                size: "modal-lg",
-                windowClass: "video-modal-bootstrap",
-                resolve: {
-                    items() {
-                        return $scope.videos
-                    },
-                    startTime() {
-                        return $scope.startTime
-                    },
-                    endTime() {
-                        return $scope.endTime
-                    },
-                    fileName() {
-                        return $scope.fileName
-                    },
-                    sentence() {
-                        return $scope.sentence
-                    },
-                },
-            })
-        }
-
-        $scope.startTime = 0
-    },
-])
-
-korpApp.controller("VideoInstanceCtrl", [
+type VideoInstanceControllerScope = IScope & {
+    fileName: string
+    sentence: string
+    startTime: string
+    endTime: string
+    init: () => void
+    goToStartTime: () => void
+    continuePlay: () => void
+    isPaused: boolean
+    pauseAfterEndTime: boolean
+    ok: () => void
+}
+
+angular.module("korpApp").controller("VideoInstanceCtrl", [
     "$scope",
     "$compile",
     "$timeout",
@@ -51,11 +25,22 @@ korpApp.controller("VideoInstanceCtrl", [
     "endTime",
     "fileName",
     "sentence",
-    function ($scope, $compile, $timeout, $uibModalInstance, items, startTime, endTime, fileName, sentence) {
+    function (
+        $scope: VideoInstanceControllerScope,
+        $compile: ICompileService,
+        $timeout: ITimeoutService,
+        $uibModalInstance: ui.bootstrap.IModalInstanceService,
+        items: { url: string; type: string }[],
+        startTime: number,
+        endTime: number,
+        fileName: string,
+        sentence: string
+    ) {
         $scope.fileName = fileName
         $scope.sentence = sentence
 
-        const transformSeconds = function (seconds) {
+        /** Format time as hh:mm:ss if hours > 0, else mm:ss */
+        const transformSeconds = function (seconds: number) {
             let sHours
             const d = moment.duration(seconds, "seconds")
             const hours = Math.floor(d.asHours())
@@ -98,7 +83,7 @@ korpApp.controller("VideoInstanceCtrl", [
                 videoElem.append(srcElem)
             }
 
-            const video = videoElem[0]
+            const video = videoElem[0] as HTMLVideoElement
 
             video.addEventListener("durationchange", function () {
                 video.currentTime = startTime