- {hasVideo && videoOn && (
-
- )}
- {hasVideo && !videoOn && (
-
-
-
- )}
- {hasAudio && muted && (
-
-
-
- )}
- {hasAudio && !muted && (
-
-
-
- )}
-
- {hasAudio &&
}
- {hasVideo &&
}
+
+
+ {/* Drop target spacer */}
+
+ {isDragging && (
+
+ Drop here
+
+ )}
+
+ {/* Moveable element - positioned absolute relative to container */}
+
+
+ {isSelf ? (
+
+ {muted ? : }
+
+ ) : (
+
+
+ {muted ? : }
+
+ {remoteAudioMuted && }
+
+ )}
+
+
+ {videoOn ? : }
+
+ {!isSelf && remoteVideoOff && }
+
+
+ {isValid ? (
+ peer.attributes?.srcObject && (
+ <>
+
+
+
+
+ )
+ ) : (
+ <>
+
Waiting for media…
+
+
+ )}
+
+
+
{
+ const controls = containerRef.current?.querySelector(".Controls");
+ const target = e.inputEvent?.target as HTMLElement;
+ if (controls && target && (target.closest("button") || target.closest(".MuiIconButton-root"))) {
+ if (typeof e.stopDrag === "function") {
+ e.stopDrag();
+ }
+ return;
+ }
+ setIsDragging(true);
+ }}
+ onDrag={(e) => {
+ if (targetRef.current) {
+ targetRef.current.style.transform = e.transform;
+ }
+ const matrix = new DOMMatrix(e.transform);
+ const shouldSnap = checkSnapBack(matrix.m41, matrix.m42);
+ if (shouldSnap && spacerRef.current) {
+ spacerRef.current.style.borderColor = "#0088ff";
+ } else if (spacerRef.current) {
+ spacerRef.current.style.borderColor = "#666";
+ }
+ }}
+ onDragEnd={(e) => {
+ setIsDragging(false);
+ if (targetRef.current) {
+ const computedStyle = getComputedStyle(targetRef.current);
+ const transform = computedStyle.transform;
+ if (transform && transform !== "none") {
+ const matrix = new DOMMatrix(transform);
+ const shouldSnap = checkSnapBack(matrix.m41, matrix.m42);
+ if (shouldSnap) {
+ targetRef.current.style.transform = "translate(0px, 0px)";
+ setFrame({ translate: [0, 0], width: frame.width, height: frame.height });
+ if (spacerRef.current) {
+ const spacerRect = spacerRef.current.getBoundingClientRect();
+ targetRef.current.style.width = `${spacerRect.width}px`;
+ targetRef.current.style.height = `${spacerRect.height}px`;
+ setFrame({ translate: [0, 0] });
+ }
+ } else {
+ setFrame({
+ translate: [matrix.m41, matrix.m42],
+ width: frame.width,
+ height: frame.height,
+ });
+ }
+ } else {
+ setFrame({ translate: [0, 0], width: frame.width, height: frame.height });
+ }
+ }
+ if (spacerRef.current) {
+ spacerRef.current.style.borderColor = "#666";
+ }
+ }}
+ onResizeStart={(e) => {
+ e.setOrigin(["%", "%"]);
+ setIsDragging(true);
+ }}
+ onResize={(e) => {
+ e.target.style.width = `${e.width}px`;
+ e.target.style.height = `${e.height}px`;
+ setFrame({
+ ...frame,
+ width: e.width,
+ height: e.height,
+ });
+ }}
+ onResizeEnd={() => {
+ setIsDragging(false);
+ }}
+ />
+
);
};
diff --git a/docker-compose.yml b/docker-compose.yml
index 3635827..0664f12 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -39,6 +39,7 @@ services:
working_dir: /client
volumes:
- ./client:/client:rw
+ - ./certs:/certs:ro
ports:
- 3001:3000
environment:
@@ -47,7 +48,11 @@ services:
- HOST=0.0.0.0
- WDS_SOCKET_HOST=0.0.0.0
- WDS_SOCKET_PORT=0
- - REACT_APP_API_BASE=/ketr.ketran
+ - VITE_API_BASE=/ketr.ketran
+ # Provide paths to TLS key/cert inside the container so Vite can present
+ # a certificate for the external hostname (e.g. battle-linux.ketrenos.com).
+ - VITE_HTTPS_KEY=/certs/battle.key
+ - VITE_HTTPS_CERT=/certs/battle.crt
command: ["bash", "-c", "cd /client && npm install --legacy-peer-deps --silent --no-audit --no-fund && npm start"]
networks:
- peddlers-network
diff --git a/launch.sh b/launch.sh
index 9483f8b..285b473 100755
--- a/launch.sh
+++ b/launch.sh
@@ -3,10 +3,60 @@
# Launch script for Peddlers of Ketran
# Set PRODUCTION=1 for production mode, PRODUCTION=0 or unset for development mode
+# Default values
+PRODUCTION=${PRODUCTION:-0}
+COMMAND="up"
+
+# Parse arguments
+while [[ $# -gt 0 ]]; do
+ case "$1" in
+ --production)
+ PRODUCTION=1
+ shift
+ ;;
+ up|down|restart)
+ COMMAND="$1"
+ shift
+ ;;
+ -h|--help|help)
+ echo "Usage: $0 [--production] [up|down|restart]"
+ exit 0
+ ;;
+ *)
+ echo "Unknown argument: $1"
+ echo "Usage: $0 [--production] [up|down|restart]"
+ exit 1
+ ;;
+ esac
+done
+
+export PRODUCTION
+
if [ "$PRODUCTION" = "1" ]; then
- echo "Launching in PRODUCTION mode..."
- docker compose --profile prod up
+ PROFILE="prod"
+ echo "Launching in PRODUCTION mode (profile: $PROFILE)..."
else
- echo "Launching in DEVELOPMENT mode..."
- docker compose --profile dev up
-fi
\ No newline at end of file
+ PROFILE="dev"
+ echo "Launching in DEVELOPMENT mode (profile: $PROFILE)..."
+fi
+
+case "$COMMAND" in
+ up)
+ echo "Bringing containers up (detached)..."
+ docker compose --profile "$PROFILE" up -d
+ ;;
+ down)
+ echo "Bringing containers down..."
+ docker compose --profile "$PROFILE" down
+ ;;
+ restart)
+ echo "Restarting containers..."
+ docker compose --profile "$PROFILE" down
+ docker compose --profile "$PROFILE" up -d
+ ;;
+ *)
+ echo "Unknown command: $COMMAND"
+ echo "Usage: $0 [--production] [up|down|restart]"
+ exit 1
+ ;;
+esac
\ No newline at end of file
diff --git a/server/basepath.js b/server/basepath.js
index 3402e1f..b9b3c1f 100755
--- a/server/basepath.js
+++ b/server/basepath.js
@@ -1,4 +1,4 @@
-let basePath = process.env.REACT_APP_basePath || "";
+let basePath = process.env.VITE_basePath || "";
basePath = "/" + basePath.replace(/^\/+/, "").replace(/\/+$/, "") + "/";
if (basePath == "//") {
basePath = "/";