more details with federation

src/components/FederatedRoomCard.jsx

@@ -1,4 +1,4 @@
-import { Globe, Play, Trash2, ExternalLink } from 'lucide-react';
+import { Globe, Trash2, ExternalLink, Hash, Users, Video, VideoOff } from 'lucide-react';
 import { useLanguage } from '../contexts/LanguageContext';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -22,6 +22,8 @@ export default function FederatedRoomCard({ room, onRemove }) {
     }
   };
 
+  const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
+
   return (
     <div className="card-hover group p-5">
       <div className="flex items-start justify-between mb-3">
@@ -41,6 +43,38 @@ export default function FederatedRoomCard({ room, onRemove }) {
         </div>
       </div>
 
+      {/* Basic room info */}
+      <div className="grid grid-cols-2 gap-2 mb-4">
+        {room.meet_id && (
+          <div className="flex items-center gap-1.5 text-xs text-th-text-s">
+            <Hash size={12} className="text-th-accent flex-shrink-0" />
+            <span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5 text-xs text-th-text-s">
+          <Users size={12} className="text-th-accent flex-shrink-0" />
+          <span>
+            {t('federation.maxParticipants')}:{' '}
+            <span className="text-th-text font-medium">
+              {room.max_participants > 0 ? room.max_participants : t('federation.unlimited')}
+            </span>
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 text-xs col-span-2">
+          {recordingOn ? (
+            <>
+              <Video size={12} className="text-amber-500 flex-shrink-0" />
+              <span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
+            </>
+          ) : (
+            <>
+              <VideoOff size={12} className="text-th-text-s flex-shrink-0" />
+              <span className="text-th-text-s">{t('federation.recordingOff')}</span>
+            </>
+          )}
+        </div>
+      </div>
+
       {/* Read-only notice */}
       <p className="text-xs text-th-text-s mb-4 italic">{t('federation.readOnlyNotice')}</p>
 

src/i18n/de.json

@@ -201,6 +201,8 @@
     "guestHasAccount": "Haben Sie ein Konto?",
     "guestSignIn": "Anmelden",
     "guestRoomNotFound": "Raum nicht gefunden",
+    "guestRecordingNotice": "Dieses Meeting könnte aufgenommen werden, inkl. Ihrer Audio / Video.",
+    "guestRecordingConsent": "Ich bin damit einverstanden, dass dieses Meeting aufgenommen werden kann.",
     "shared": "Geteilt",
     "shareTitle": "Raum teilen",
     "shareDescription": "Teilen Sie diesen Raum mit anderen Benutzern, damit diese ihn in ihrem Dashboard sehen und beitreten k\u00f6nnen.",
@@ -342,6 +344,11 @@
     "removeRoomConfirm": "Raum wirklich entfernen?",
     "roomRemoved": "Raum entfernt",
     "roomRemoveFailed": "Raum konnte nicht entfernt werden",
-    "acceptedSaved": "Einladung angenommen – Raum wurde in deinem Dashboard gespeichert!"
+    "acceptedSaved": "Einladung angenommen – Raum wurde in deinem Dashboard gespeichert!",
+    "meetingId": "Meeting ID",
+    "maxParticipants": "Max. Teilnehmer",
+    "recordingOn": "Aufnahme aktiviert",
+    "recordingOff": "Aufnahme deaktiviert",
+    "unlimited": "Unbegrenzt"
   }
 }

src/i18n/en.json

@@ -201,6 +201,8 @@
     "guestHasAccount": "Have an account?",
     "guestSignIn": "Sign in",
     "guestRoomNotFound": "Room not found",
+    "guestRecordingNotice": "This meeting may be recorded, including your audio and video.",
+    "guestRecordingConsent": "I understand that this meeting may be recorded.",
     "shared": "Shared",
     "shareTitle": "Share room",
     "shareDescription": "Share this room with other users so they can see it in their dashboard and join meetings.",
@@ -342,6 +344,11 @@
     "removeRoomConfirm": "Really remove this room?",
     "roomRemoved": "Room removed",
     "roomRemoveFailed": "Could not remove room",
-    "acceptedSaved": "Invitation accepted – room saved to your dashboard!"
+    "acceptedSaved": "Invitation accepted – room saved to your dashboard!",
+    "meetingId": "Meeting ID",
+    "maxParticipants": "Max. participants",
+    "recordingOn": "Recording enabled",
+    "recordingOff": "Recording disabled",
+    "unlimited": "Unlimited"
   }
 }

src/pages/GuestJoin.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio } from 'lucide-react';
+import { Video, User, Lock, Shield, ArrowRight, Loader2, Users, Radio, AlertCircle } from 'lucide-react';
 import BrandLogo from '../components/BrandLogo';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -20,6 +20,7 @@ export default function GuestJoin() {
   const [accessCode, setAccessCode] = useState('');
   const [moderatorCode, setModeratorCode] = useState('');
   const [status, setStatus] = useState({ running: false });
+  const [recordingConsent, setRecordingConsent] = useState(false);
 
   useEffect(() => {
     const fetchRoom = async () => {
@@ -61,6 +62,11 @@ export default function GuestJoin() {
       return;
     }
 
+    if (roomInfo?.allow_recording && !recordingConsent) {
+      toast.error(t('room.guestRecordingConsent'));
+      return;
+    }
+
     setJoining(true);
     try {
       const res = await api.post(`/rooms/${uid}/guest-join`, {
@@ -206,9 +212,28 @@ export default function GuestJoin() {
               </div>
             </div>
 
+            {/* Recording consent notice */}
+            {roomInfo.allow_recording && (
+              <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 space-y-3">
+                <div className="flex items-start gap-2">
+                  <AlertCircle size={16} className="text-amber-500 flex-shrink-0 mt-0.5" />
+                  <p className="text-sm text-amber-400">{t('room.guestRecordingNotice')}</p>
+                </div>
+                <label className="flex items-center gap-2.5 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={recordingConsent}
+                    onChange={e => setRecordingConsent(e.target.checked)}
+                    className="w-4 h-4 rounded accent-amber-500 cursor-pointer"
+                  />
+                  <span className="text-sm text-th-text">{t('room.guestRecordingConsent')}</span>
+                </label>
+              </div>
+            )}
+
             <button
               type="submit"
-              disabled={joining || (!status.running && !roomInfo.anyone_can_start)}
+              disabled={joining || (!status.running && !roomInfo.anyone_can_start) || (roomInfo.allow_recording && !recordingConsent)}
               className="btn-primary w-full py-3"
             >
               {joining ? (