feat(client): added support for custom browser tab's title, with dyna…

…mic use of the video's title

Dockerfile

@@ -20,3 +20,4 @@ COPY ./build /srv
 ENV AUTH_ENABLED "true"
 ENV AUTH_SECRET "\$2a\$14\$qRW8no8UDmSwIWM6KHwdRe1j/LMrxoP4NSM756RVodqeUq5HzG6t."
 ENV PUBLIC_URL "https://localhost"
+ENV APP_TITLE "Erin - TikTok feed for your own clips"

README.md

@@ -111,6 +111,7 @@ To run Erin, you will need to set the following environment variables in a `.env
 | `PUBLIC_URL`            | `boolean` | The public URL used to remotely access your instance of Erin. (Please include HTTP / HTTPS and the port if not standard 80 or 443. Do not include a trailing slash) (Read the [official Caddy documentation](https://caddyserver.com/docs/caddyfile/concepts#addresses)) | https://localhost        
 | `AUTH_ENABLED`          | `string`  | Whether Basic Authentication should be enabled. (This parameter is case sensitive) (Possible values : true, false) | true |
 | `AUTH_SECRET`           | `string`  | The secure hash of the password used to protect your instance of Erin. | Hash of `secure-password` |
+| `APP_TITLE`             | `string`  | The custom title that you would like to display in the browser's tab. (Tip: You can use `[VIDEO_TITLE]` here if you want Erin to dynamically display the title of the current video.) | Erin - TikTok feed for your own clips |
 
 > **Tip :** To generate a secure hash for your instance, use the following command :
 

docker/Caddyfile

@@ -71,6 +71,7 @@
     # React variables
     replace __PUBLIC_URL__ {$PUBLIC_URL}
     replace __USE_SECRET__ {$AUTH_ENABLED}
+    replace __APP_TITLE__  {$APP_TITLE}
 	}
 
 	# 404 Redirect

public/index.html

@@ -9,7 +9,7 @@
 
     <link rel="stylesheet" href="/reset.min.css" />
 
-    <title>Erin - TikTok feed for your own clips</title>
+    <title>__APP_TITLE__</title>
 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />

src/App.js

@@ -74,6 +74,11 @@ const App = () => {
   const _isVideo = (file) =>
     ["mp4", "ogg", "webm"].includes(file.name.toLowerCase().split(".").at(-1));
   const _toAuthenticatedUrl = (url) => `${url}?hash=${secureHash}`;
+  const _veryFirsPageTitle = document.title;
+  const _updatePageTitle = (video) => {
+    if (!_veryFirsPageTitle.includes("[VIDEO_TITLE]")) return;
+    document.title = _veryFirsPageTitle.replace("[VIDEO_TITLE]", video.title);
+  };
 
   // Method - Test connectivity with the remote server
   const attemptToReachRemoteServer = (evt) => {
@@ -215,6 +220,7 @@ const App = () => {
           if (entry.isIntersecting) {
             visibleIndex = currentIndex;
             videoElement.play();
+            _updatePageTitle(videos[currentIndex]);
           }
           // Case when a video is off-screen or being scrolled in / out of the screen
           else {