Implement editor locking so only one person can edit a recording a time

.github/mock/editor/ID-dual-stream-demo/edit.json

@@ -53,5 +53,6 @@
     "id": null,
     "title": null
   },
-  "workflow_active": false
+  "workflow_active": false,
+  "locking_active": false
 }

src/main/Body.tsx

@@ -5,6 +5,7 @@ import MainContent from './MainContent';
 import TheEnd from './TheEnd';
 import Error from './Error';
 import Landing from "./Landing";
+import Lock from "./Lock";
 
 import { css } from '@emotion/react'
 
@@ -27,7 +28,10 @@ const Body: React.FC = () => {
       )
     } else if (isEnd) {
       return (
-        <TheEnd />
+        <div>
+          <Lock />
+          <TheEnd />
+        </div>
       );
     } else if (isError) {
       return (
@@ -36,6 +40,7 @@ const Body: React.FC = () => {
     } else {
       return (
         <div css={bodyStyle}>
+          <Lock />
           <MainMenu />
           <MainContent />
         </div>

src/main/Lock.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from "react";
+import { LuLock } from "react-icons/lu";
+
+import { useDispatch, useSelector } from "react-redux";
+import { settings } from "../config";
+import { setLock, video } from "../redux/videoSlice";
+import { selectIsEnd } from '../redux/endSlice'
+import { setError } from "../redux/errorSlice";
+import { client } from "../util/client";
+import { useInterval } from "../util/utilityFunctions";
+import { useBeforeunload } from 'react-beforeunload';
+
+const Lock: React.FC = () => {
+  const endpoint = `${settings.opencast.url}/editor/${settings.id}/lock`
+
+  const dispatch = useDispatch();
+  const lockingActive = useSelector((state: { videoState: { lockingActive: video["lockingActive"] } }) => state.videoState.lockingActive);
+  const lockRefresh = useSelector((state: { videoState: { lockRefresh: video["lockRefresh"] } }) => state.videoState.lockRefresh);
+  const lockState = useSelector((state: { videoState: { lockState: video["lockState"] } }) => state.videoState.lockState);
+  const lock = useSelector((state: { videoState: { lock: video["lock"] } }) => state.videoState.lock);
+  const isEnd = useSelector(selectIsEnd)
+
+  function requestLock() {
+    const form = `user=${lock.user}&uuid=${lock.uuid}`;
+    client.post(endpoint, form, {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+      }
+    })
+    .then(() => dispatch(setLock(true)))
+    .catch((error: string) => {
+      dispatch(setLock(false))
+      dispatch(setError({
+        error: true,
+        errorDetails: error,
+        errorIcon: LuLock,
+        errorTitle: 'Video editing locked',
+        errorMessage: 'This video is currently being edited by another user'
+      }))
+    })
+  }
+
+  function releaseLock() {
+    if (lockingActive && lockState) {
+      client.delete(endpoint + '/' + lock.uuid)
+      .then(() => {
+        console.info('Lock released')
+        dispatch(setLock(false));
+      })
+    }
+  }
+
+  // Request lock
+  useEffect(() => {
+    if (lockingActive) {
+      requestLock()
+    }
+  }, [lockingActive])
+
+  // Refresh lock
+  useInterval(async () => {
+    requestLock()
+  }, lockingActive ? lockRefresh : null);
+
+  // Release lock on leaving page
+  useBeforeunload((_event: { preventDefault: () => void; }) => {
+    releaseLock()
+  })
+
+  // Release lock on discard
+  useEffect(() => {
+    if (isEnd) {
+      releaseLock()
+    }
+  }, [isEnd])
+
+  return (<></>)
+}
+
+export default Lock;

src/redux/videoSlice.ts

@@ -27,6 +27,16 @@ export interface video {
   title: string,
   presenters: string[],
   workflows: Workflow[],
+
+  lockingActive: boolean,     // Whether locking event editing is enabled
+  lockRefresh: number | null, // Lock refresh period
+  lockState: boolean,         // Whether lock has been obtained
+  lock: lockData
+}
+
+export interface lockData {
+  uuid: string,
+  user: string
 }
 
 export const initialState: video & httpRequestState = {
@@ -52,6 +62,11 @@ export const initialState: video & httpRequestState = {
   presenters: [],
   workflows: [],
 
+  lockingActive: false,
+  lockRefresh: null,
+  lockState: false,
+  lock: {uuid: '', user: ''},
+
   status: 'idle',
   error: undefined,
   errorReason: 'unknown',
@@ -141,6 +156,9 @@ const videoSlice = createSlice({
       const index = state.tracks.findIndex(t => t.id === action.payload)
       state.tracks[index].thumbnailUri = undefined
     },
+    setLock: (state, action: PayloadAction<video["lockState"]>) => {
+      state.lockState = action.payload;
+    },
     cut: state => {
       // If we're exactly between two segments, we can't split the current segment
       if (state.segments[state.activeSegmentIndex].start === state.currentlyAt ||
@@ -224,6 +242,10 @@ const videoSlice = createSlice({
         state.originalThumbnails = state.tracks.map((track: Track) => { return {id: track.id, uri: track.thumbnailUri} })
 
         state.aspectRatios = new Array(state.videoCount)
+        state.lockingActive = action.payload.locking_active
+        state.lockRefresh = action.payload.lock_refresh
+        state.lock.uuid = action.payload.lock_uuid;
+        state.lock.user = action.payload.lock_user;
       })
     builder.addCase(
       fetchVideoInformation.rejected, (state, action) => {
@@ -350,7 +372,7 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
 
 export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setCurrentlyAt, setCurrentlyAtInSeconds,
   addSegment, setAspectRatio, setHasChanges, setWaveformImages, setThumbnails, setThumbnail, removeThumbnail,
-  cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, mergeAll, setPreviewTriggered,
+  setLock, cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, mergeAll, setPreviewTriggered,
   setClickTriggered } = videoSlice.actions
 
 // Export selectors

src/util/client.js

@@ -4,7 +4,7 @@
 import { settings } from '../config';
 
 /**
- * Client I stole this form a react tutorial
+ * Client I stole this from a react tutorial
  */
 export async function client(endpoint, { body, ...customConfig } = {}) {
   const headers = { 'Content-Type': 'application/json' }
@@ -29,7 +29,11 @@ export async function client(endpoint, { body, ...customConfig } = {}) {
   }
 
   if (body) {
-    config.body = JSON.stringify(body)
+    if (config.headers['Content-Type'].includes("urlencoded")) {
+      config.body = body
+    } else {
+      config.body = JSON.stringify(body)
+    }
   }
 
   let data
@@ -63,3 +67,7 @@ client.get = function (endpoint, customConfig = {}) {
 client.post = function (endpoint, body, customConfig = {}) {
   return client(endpoint, { ...customConfig, body })
 }
+
+client.delete = function (endpoint, customConfig = {}) {
+  return client(endpoint, { ...customConfig, method: 'DELETE' })
+}

src/util/utilityFunctions.ts

@@ -1,6 +1,7 @@
 import { nanoid } from '@reduxjs/toolkit';
 import { WebVTTParser, WebVTTSerializer } from 'webvtt-parser';
 import { ExtendedSubtitleCue, SubtitleCue } from '../types';
+import { useEffect, useRef } from 'react';
 
 export const roundToDecimalPlace = (num: number, decimalPlace: number) => {
   const decimalFactor = Math.pow(10, decimalPlace)
@@ -180,3 +181,28 @@ export function languageCodeToName(lang: string | undefined): string | undefined
     return undefined
   }
 }
+
+// Runs a callback every delay milliseconds
+// Pass delay = null to stop
+// Based off: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+type IntervalFunction = () => (unknown | void)
+export function useInterval(callback: IntervalFunction, delay: number | null) {
+
+  const savedCallback = useRef<IntervalFunction | null>(null)
+
+  useEffect(() => {
+    savedCallback.current = callback
+  })
+
+  useEffect(() => {
+    function tick() {
+      if (savedCallback.current !== null) {
+        savedCallback.current()
+      }
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay)
+      return () => { clearInterval(id) }
+    }
+  }, [callback, delay]);
+}