Client: Make logo and app name configurable

client/package.json

@@ -30,7 +30,7 @@
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.12",
+    "vite": "^5.2.13",
     "vite-plugin-checker": "^0.6.4"
   }
 }

client/public/clapshot_client.conf.json

@@ -4,5 +4,8 @@
     "user_menu_extra_items": [
         { "label": "My Videos", "type": "url", "data": "/"}
     ],
-    "user_menu_show_basic_auth_logout": false
+    "user_menu_show_basic_auth_logout": false,
+
+    "logo_url": "clapshot-logo.svg",
+    "app_title": "Clapshot"
 }

client/src/App.svelte

@@ -4,7 +4,7 @@ import {fade, slide} from "svelte/transition";
 
 import * as Proto3 from '@clapshot_protobuf/typescript';
 
-import {allComments, curUsername, curUserId, videoIsReady, mediaFileId, curVideo, curPageId, curPageItems, userMessages, latestProgressReports, collabId, userMenuItems, serverDefinedActions, curUserIsAdmin, connectionErrors, curSubtitle} from './stores';
+import {allComments, curUsername, curUserId, videoIsReady, mediaFileId, curVideo, curPageId, curPageItems, userMessages, latestProgressReports, collabId, userMenuItems, serverDefinedActions, curUserIsAdmin, connectionErrors, curSubtitle, clientConfig} from './stores';
 import {IndentedComment, type UserMenuItem, type StringMap, type MediaProgressReport} from "./types";
 
 import CommentCard from './lib/player_view/CommentCard.svelte'
@@ -374,6 +374,8 @@ fetch(CONF_FILE)
     console.log("Config file '" + CONF_FILE + "' parsed: ", json);
     uploadUrl = json.upload_url;
 
+    $clientConfig = json;
+
     console.log("Connecting to WS API at: " + json.ws_url);
     connectWebsocket(json.ws_url);
 

client/src/lib/NavBar.svelte

@@ -3,9 +3,8 @@
 import { onMount, createEventDispatcher } from 'svelte';
 import { curUsername, curUserPic, curVideo, mediaFileId, collabId, userMenuItems } from "@/stores";
 import Avatar from '@/lib/Avatar.svelte';
-import logo from "@/assets/clapshot-logo.svg";
-import {latestProgressReports} from '@/stores';
-  import type { MediaProgressReport } from '@/types';
+import {latestProgressReports, clientConfig} from '@/stores';
+import type { MediaProgressReport } from '@/types';
 
 
 const dispatch = createEventDispatcher();
@@ -69,8 +68,8 @@ const randomSessionId = Math.random().toString(36).substring(2, 15);
 		<!-- logo with "home" link -->
 		<span class="flex-0">
 			<a href="/" class="flex items-baseline cursor-pointer">
-				<img src={logo} class="mr-3 h-6 sm:h-9 filter brightness-75" alt="Clapshot" />
-				<span class="self-center mt-1 text-4xl whitespace-nowrap text-gray-400" style="font-family: 'Yanone Kaffeesatz', sans-serif;">CLAPSHOT</span>
+				<img src="{$clientConfig?.logo_url || "clapshot-logo.svg"}" class="mr-3 h-6 sm:h-9 filter brightness-75" alt="{$clientConfig?.app_title || "Clapshot"}" />
+				<span class="self-center mt-1 text-4xl whitespace-nowrap text-gray-400" style="font-family: 'Yanone Kaffeesatz', sans-serif;">{($clientConfig?.app_title || "Clapshot").toUpperCase()}</span>
 			</a>
 		</span>
 

client/src/stores.ts

@@ -3,6 +3,8 @@ import type { IndentedComment, UserMenuItem, MediaProgressReport } from '@/types
 import type { VideoListDefItem } from '@/lib/asset_browser/types';
 import * as Proto3 from '@clapshot_protobuf/typescript';
 
+export let clientConfig: Writable<any> = writable({});
+
 export let mediaFileId: Writable<string|null> = writable(null);
 export let curVideo: Writable<Proto3.MediaFile|null> = writable(null);
 

test/docker-entry_htadmin.sh

@@ -7,6 +7,9 @@ DIR="/mnt/clapshot-data/data"
 URL_BASE=$(echo "${CLAPSHOT_URL_BASE:-http://127.0.0.1:8080/}" | sed 's#/*$#/#')
 CORS="${CLAPSHOT_CORS:-$URL_BASE}"  # Default to URL_BASE
 
+APP_TITLE="${CLAPSHOT_APP_TITLE:-Clapshot}"
+LOGO_URL="${CLAPSHOT_LOGO_URL:-clapshot-logo.svg}"
+
 # Use same URL base as index.html for API server (as Nginx proxies localhost:8095/api to /api)
 # - Also enable basic auth logout button
 WS_BASE=$(echo "$URL_BASE" | sed 's#^http#ws#')
@@ -17,7 +20,9 @@ cat > /etc/clapshot_client.conf << EOF
     "user_menu_extra_items": [
         { "label": "My Videos", "type": "url", "data": "/" }
     ],
-  "user_menu_show_basic_auth_logout": true
+  "user_menu_show_basic_auth_logout": true,
+  "logo_url": "${LOGO_URL}",
+  "app_title": "${APP_TITLE}"
 }
 EOF
 

test/docker-entry_no-auth.sh

@@ -4,26 +4,40 @@
 # in a single Docker container for demo and testing purposes.
 
 DIR="/mnt/clapshot-data/data"
-URL_BASE="${CLAPSHOT_URL_BASE:-127.0.0.1:8080/}"
+URL_BASE=$(echo "${CLAPSHOT_URL_BASE:-http://127.0.0.1:8080/}" | sed 's#/*$#/#')
+CORS="${CLAPSHOT_CORS:-$URL_BASE}"  # Default to URL_BASE
+
+APP_TITLE="${CLAPSHOT_APP_TITLE:-Clapshot}"
+LOGO_URL="${CLAPSHOT_LOGO_URL:-clapshot-logo.svg}"
 
 # Use same URL base as index.html for API server (as Nginx proxies localhost:8095/api to /api)
+
+WS_BASE=$(echo "$URL_BASE" | sed 's#^http#ws#')
 cat > /etc/clapshot_client.conf << EOF
 {
-  "ws_url": "ws://${URL_BASE}api/ws",
-  "upload_url": "http://${URL_BASE}api/upload",
+  "ws_url": "${URL_BASE}api/ws",
+  "upload_url": "${URL_BASE}api/upload",
     "user_menu_extra_items": [
         { "label": "My Videos", "type": "url", "data": "/" }
     ],
-  "user_menu_show_basic_auth_logout": false
+  "user_menu_show_basic_auth_logout": false,
+  "logo_url": "${LOGO_URL}",
+  "app_title": "${APP_TITLE}"
 }
 EOF
 
 # Force web user's name to 'docker' (the user we made match local user's UID here)
 sed -i "s/[$]remote_user/docker/g" /etc/nginx/sites-enabled/clapshot
 
 # Assume user accesses this at $URL_BASE
-sed -i "s@^url-base.*@url-base = http://${URL_BASE}@g" /etc/clapshot-server.conf
-echo 'cors = *' >> /etc/clapshot-server.conf
+sed -i "s@^url-base.*@url-base = ${URL_BASE}@g" /etc/clapshot-server.conf
+
+if grep -q '^cors' /etc/clapshot-server.conf; then
+  sed -i "s/^cors.*/cors = '$CORS'/g" /etc/clapshot-server.conf
+else
+  echo "cors = '$CORS'" >> /etc/clapshot-server.conf
+fi
+
 
 # Make server data dir and log accessible to docker user
 chown -R docker "$DIR"
@@ -50,7 +64,7 @@ cat <<- "EOF"
                   |_|
 EOF
 cat <<-EOF
----  Browse http://${URL_BASE}  ---
+---  Browse ${URL_BASE}  ---
 ==============================================
 EOF