Bug fix (#24)

* fix: ws url, video rendering and responsiveness

* docs: created CONTRIBUTION.md and updated README.md

* fix: added camera stream url runtime config

* fix: docker compose camera url

.env.production

@@ -0,0 +1,2 @@
+SERVER_URL=ws://192.168.0.100:3000
+CAMERA_URL=http://192.168.0.103:81/stream

CONTRIBUTION.md

@@ -0,0 +1,33 @@
+# How to contribute  [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+Welcome contributors.To contribute, first fork our repository into your own Github account, and create a local clone of it as described in the [installation instructions](#installation-instructions). The latter will be used to get new features implemented or bugs fixed. Once done and you have the code locally on the disk, you can get started. We advice to not work directly on the master branch, but to create a separate branch for each issue you are working on. That way you can easily switch between different work, and you can update each one for latest changes on upstream master individually.
+
+## Installation Instructions
+
+Follow the steps below to setup a development environment. Fork our repository into your own github account, and run:
+
+```bash
+    #!/bin/bash
+    git clone https://github.com/%your_account%/N2-Avionics-BaseStation.git
+    cd N2-Avionics-BaseStation/
+    npm install
+    npm run dev
+```
+
+### Note
+
+The `docker-compose.yaml` requires the `DOCKER_CLIENT_IMAGE` environment variable is to be set. To do this create a file named `.env` placed in the same directory as the `docker-compose.yaml` file. Then add:
+
+```text
+    DOCKER_CLIENT_IMAGE=/% your image %/
+```
+
+# Managing the Repository
+
+## versioning
+
+This project uses [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for semantic versioning [(semver)](https://semver.org/). Husky is integrated to reject invalid commits. If you are unfamiliar with `conventional commits` we recommend using [commitizen](https://github.com/commitizen/cz-cli)
+
+## Merging Pull Requests
+
+Once a PR is in its final state it needs to be merged into the upstream master branch. For that please `DO NOT` use the Github merge button! But merge it yourself on the command line. Reason is that we want to hvae a clean history. Before pushing the changes to upstream master make sure that all individual commits have been `squashed` into a single one with a commit message.

Dockerfile

@@ -1,6 +1,7 @@
 # Step 1. Rebuild the source code only when needed
-FROM node:18-alpine AS builder
+FROM node:18-alpine AS deps
 
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 # Install dependencies based on the preferred package manager
@@ -12,27 +13,32 @@ RUN \
     else echo "package-lock.json not found." && exit 1; \
     fi
 
-COPY . ./
+FROM node:18-alpine AS builder
+WORKDIR /app
 
+COPY --from=deps /app/node_modules ./node_modules
+COPY . ./
 # Environment variables must be present at build time
 # https://github.com/vercel/next.js/discussions/14030
 
 #ARG MQTT_URI
-#ENV MQTT_URI=${MQTT_URI}
-
+#ENV MQTT_URI=$MQTT_URI
 # Uncomment the following line to disable telemetry at build time
 # ENV NEXT_TELEMETRY_DISABLED 1
+
 RUN npm run build
 
 # Step 2. Production image, copy all the files and run next
 FROM node:18-alpine AS runner
 
 WORKDIR /app
+RUN apk add --no-cache --upgrade bash
+
+ENV NODE_ENV=production
 
 # Don't run production as root
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
-USER nextjs
 
 COPY --from=builder /app/public ./public
 
@@ -42,16 +48,22 @@ COPY --from=builder /app/public ./public
 # COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
 COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
+COPY --from=builder --chown=nextjs:nodejs /app/next.config.js ./next.config.js
 COPY --from=builder --chown=nextjs:nodejs /app/config ./config
 COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
 COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
 COPY --from=builder --chown=nextjs:nodejs /app/server.js ./server.js
+COPY --from=builder --chown=nextjs:nodejs --chmod=755 /app/entrypoint.sh ./entrypoint.sh
+COPY --from=builder --chown=nextjs:nodejs /app/.env.production ./.env.production
 
 # Environment variables must be redefined at run time
 #ARG MQTT_URI
-#ENV MQTT_URI=${MQTT_URI}
+#ENV MQTT_URI=$MQTT_URI
 
 # Uncomment the following line to disable telemetry at run time
 # ENV NEXT_TELEMETRY_DISABLED 1
 
+USER nextjs
+EXPOSE 3000
+ENTRYPOINT ["/app/entrypoint.sh"]
 CMD npm start

README.md

@@ -1,5 +1,6 @@
-# Overview  [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+# Overview 
 
+If you are looking to contribute please check out `CONTRIBUTION.md`
 ## How does it work ?
 
 ![architecture](./public/ground%20station.png)
@@ -110,21 +111,20 @@ This project provides the following `environment variables`
 
 | Variable      | Default |
 | ----------- | ----------- |
-| INFLUXDB_USER | nakuja    |
-| INFLUXDB_PASSWORD | 987654321   |
-| DOCKER_CLIENT_IMAGE   | ghcr.io/nakujaproject/n2-avionics-basestation   |
+| SERVER_URL | ws://192.168.4.2:3000 |
+| INFLUXDB_USER | nakuja |
+| INFLUXDB_PASSWORD | 987654321 |
+| DOCKER_CLIENT_IMAGE   | ghcr.io/nakujaproject/n2-avionics-basestation |
 
 The `default` environment variables can be `overwritten` using an environment file named `.env` placed in the same directory as the `docker-compose.yaml` file.
 
 For more information checkout the [docs on how to use environment variables with docker compose](https://docs.docker.com/compose/environment-variables/)
 
 `Telegraf` and `eclipse-mosquitto` can be customised using their respective `.conf` files
 
-## Notes
+## Note
 
-1. This project uses [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) for versioning. Husky is integrated to reject invalid commits. If you are unfamiliar with `conventional commits` we recommend using [commitizen](https://github.com/commitizen/cz-cli)
-2. If you are running a `cloned version of the repo` the `DOCKER_CLIENT_IMAGE` environment variable is required.
-3. The default username and password for the influxdb2 dashboard is :
+The default username and password for the influxdb2 dashboard is :
 
 ```text
 username=nakuja

components/Video.js

@@ -0,0 +1,54 @@
+import React, { useRef, useEffect, useState } from 'react';
+import Image from 'next/image';
+import gsap from 'gsap';
+
+function Video({ url }) {
+	console.log('video', url);
+	const image = useRef();
+	const [error, setError] = useState(false);
+
+	useEffect(() => {
+		if (image.current) {
+			gsap.to(image.current, {
+				rotation: '+=360',
+				scale: 0.5,
+				repeat: -1,
+				yoyo: true,
+				duration: 0.7,
+				ease: 'power2.inOut',
+			});
+		}
+	}, [error]);
+
+	return (
+		<>
+			{error ? (
+				<div className="w-full h-[297px] md:h-[603px] lg:h-[354px] bg-black flex justify-center items-center">
+					<div ref={image}>
+						<Image
+							alt="logo"
+							src="/nakuja_logo.png"
+							width="90"
+							height="80"
+						/>
+					</div>
+				</div>
+			) : (
+				<Image
+					alt="stream"
+					src={url}
+					width={800}
+					height={600}
+					layout="responsive"
+					priority
+					unoptimized
+					placeholder="blur"
+					blurDataURL="/placeholder.jpg"
+					onError={() => setError(true)}
+				/>
+			)}
+		</>
+	);
+}
+
+export default Video;

docker-compose.yaml

@@ -5,6 +5,9 @@ services:
     restart: always
     ports:
       - 3000:3000
+    environment:
+    - SERVER_URL=${SERVER_URL:-ws://192.168.0.100:3000} 
+    - CAMERA_URL=${CAMERA_URL:-http://192.168.0.103:81/stream} 
   mosquitto:
     image: eclipse-mosquitto:2.0.14
     ports:

entrypoint.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+# no verbose
+set +x
+# config
+envFilename='.env.production'
+nextFolder='/app/.next/'
+function apply_path {
+  # read all config file  
+  while read line; do
+    # no comment or not empty
+    if [ "${line:0:1}" == "#" ] || [ "${line}" == "" ]; then
+      continue
+    fi
+
+    # split
+    configName="$(cut -d'=' -f1 <<<"$line")"
+    configValue="$(cut -d'=' -f2 <<<"$line")"
+    # get system env
+    envValue=$(env | grep "^$configName=" | grep -oe '[^=]*$');
+
+    # if config found
+    if [ -n "$configValue" ] && [ -n "$envValue" ]; then
+      # replace all
+      echo "Replace: ${configValue} with: ${envValue}"
+      find $nextFolder \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#$configValue#$envValue#g"
+    fi
+  done < $envFilename
+}
+apply_path
+echo "Starting Nextjs"
+exec "$@"

next.config.js

@@ -1,7 +1,17 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+	enabled: process.env.ANALYZE === 'true',
+});
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
 	output: 'standalone',
+	images: {
+		domains: ['192.168.4.4'],
+	},
+	publicRuntimeConfig: {
+		SERVER_URL: process.env.SERVER_URL,
+		CAMERA_URL: process.env.CAMERA_URL,
+	},
 };
 
-module.exports = nextConfig;
+module.exports = withBundleAnalyzer(nextConfig);