@7365admin1/layer-common 4.0.3-staging.230 → 4.0.3-staging.232

package/components/CreateSubsciptionPlan.vue

@@ -5,9 +5,16 @@
       {{ isEditing ? "Edit Plan" : "Create New Plan" }}
     </v-card-title>
 
-    <!-- Form Content -->
-    <v-form ref="formRef" @submit.prevent="submit">
-      <v-card-text class="screen-modal__body px-6 pt-4">
+    <!--
+      Form Content. The FORM sits INSIDE the body, not around it. The body is
+      what scrolls; a `v-form` wrapped around body + footer is an unshrinkable
+      flex item, so a long applications list pushed the footer past the card's
+      capped height and Save became unreachable. Same shape as
+      `AccessCardAddForm`. Submit is fired from the footer button by hand
+      because the button now lives outside the form element.
+    -->
+    <v-card-text class="screen-modal__body px-6 pt-4">
+      <v-form ref="formRef" @submit.prevent="submit">
         <!-- Plan Details Section -->
         <div class="plan-form__section">Plan Details</div>
 
@@ -196,24 +203,24 @@
         >
           {{ errors.pricing }}
         </v-alert>
-      </v-card-text>
-
-      <!-- Footer Buttons -->
-      <v-card-actions class="screen-modal__footer">
-        <v-row no-gutters>
-          <v-col cols="6" class="pr-2">
-            <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="$emit('cancel')">
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pl-2">
-            <v-btn block type="submit" variant="flat" class="text-none screen-btn-primary">
-              {{ isEditing ? "Save Changes" : "Create Plan" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-actions>
-    </v-form>
+      </v-form>
+    </v-card-text>
+
+    <!-- Footer Buttons -->
+    <v-card-actions class="screen-modal__footer">
+      <v-row no-gutters>
+        <v-col cols="6" class="pr-2">
+          <v-btn block variant="outlined" class="text-none screen-btn-ghost" @click="$emit('cancel')">
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6" class="pl-2">
+          <v-btn block variant="flat" class="text-none screen-btn-primary" @click="submit">
+            {{ isEditing ? "Save Changes" : "Create Plan" }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/SubscriptionPlanTable.vue

@@ -181,15 +181,20 @@
       </v-data-table>
     </AppCard>
 
-    <!-- Create / Edit Dialog -->
+    <!--
+      Create / Edit Dialog. The form component renders its OWN `.screen-modal`
+      card, so it has to be the dialog's DIRECT child: Vuetify only makes
+      `.v-overlay__content > .v-card` a capped flex column. Wrapping it in a
+      second `v-card` handed that treatment to the wrapper and left the real
+      card a plain `overflow: hidden` block - it grew past the viewport and
+      clipped its own Cancel/Save footer, with no scrollbar to reach it.
+    -->
     <v-dialog v-model="showModal" max-width="600px" persistent>
-      <v-card class="pa-4">
-        <CreateSubscriptionPlan
-          :initial-plan="editingPlan"
-          @cancel="closeModal"
-          @submit="handleSubmit"
-        />
-      </v-card>
+      <CreateSubscriptionPlan
+        :initial-plan="editingPlan"
+        @cancel="closeModal"
+        @submit="handleSubmit"
+      />
     </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.3-staging.230",
+  "version": "4.0.3-staging.232",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/camera-wall.test.ts

@@ -15,6 +15,7 @@ import {
   playerSignal,
   sharedCapabilityNote,
   tileView,
+  UNVERIFIED_DETAIL,
   wallCameras,
   wallLayout,
   wallPageCount,
@@ -381,6 +382,68 @@ test("a server that says live video is unsupported is believed", () => {
 
 /* ------------------------------------------- the server's reason wins */
 
+/**
+ * THE PRODUCTION DEFECT.
+ *
+ * Every tile on the live wall drew "Not set up yet" while the identical build
+ * on staging played fine. The only difference between the two environments was
+ * a recorder entry on the API host — and the live picture never touches a
+ * recorder: the tile embeds the relay's own player page. The still-frame
+ * refusal was being used as a gate on live video, so a picture that was
+ * available the whole time was never asked for.
+ */
+test("a still-frame refusal does not black out a camera that CAN show live video", () => {
+  const noRecorder = "No recorder is configured for this camera's relay.";
+  const cam = ip({
+    unavailableReason: noRecorder,
+    capabilities: { liveVideo: { state: "supported" } },
+  });
+
+  const v = tileView(cam, { player: "page-up" });
+  assert.equal(v.showPlayer, true);
+  assert.equal(v.state, "unverified");
+  // No scrim across the picture: `detail` is drawn over the whole tile.
+  assert.equal(v.detail, null);
+  // The tile still says what is missing, on the note, so a moving picture over
+  // "Recorder not checked" does not read as a contradiction.
+  assert.match(v.note, /no recorder is set up/i);
+  assert.match(v.note, /cannot confirm the picture is arriving/);
+
+  // And a confirmed frame is still just Live, with the caveat kept.
+  const playing = tileView(cam, { player: "playing" });
+  assert.equal(playing.label, "Live");
+  assert.equal(playing.showPlayer, true);
+  assert.match(playing.note, /straight from the video relay/i);
+});
+
+test("a camera that genuinely cannot show live video still says so, with the server's reason", () => {
+  const noRecorder = "No recorder is configured for this camera's relay.";
+
+  // Explicitly unsupported: the honest dead tile, unchanged.
+  const off = tileView(
+    ip({
+      unavailableReason: noRecorder,
+      capabilities: { liveVideo: { state: "unsupported", detail: "This camera is not active." } },
+    })
+  );
+  assert.equal(off.showPlayer, false);
+  assert.equal(off.state, "unavailable");
+  assert.equal(off.detail, noRecorder);
+
+  // Unknown is not a licence to try: a server that never said "supported" is
+  // still refused, exactly as before.
+  const unknown = tileView(ip({ unavailableReason: noRecorder, capabilities: {} }));
+  assert.equal(unknown.showPlayer, false);
+  assert.equal(unknown.detail, noRecorder);
+});
+
+test("the staging case is untouched: no refusal, no caveat", () => {
+  const cam = ip({ capabilities: { liveVideo: { state: "supported" } } });
+  assert.equal(tileView(cam, { player: "playing" }).note, null);
+  assert.equal(tileView(cam, { player: "page-up" }).note, UNVERIFIED_DETAIL);
+  assert.equal(tileView(cam, { player: "page-up" }).showPlayer, true);
+});
+
 test("the server's own refusal is shown verbatim, not replaced with a guess", () => {
   // The one that matters: the browser cannot know this, and until the API host
   // is configured it is the true answer for every camera in the estate.

package/utils/camera-wall.ts

@@ -664,6 +664,21 @@ export type TTileView = {
 export const UNVERIFIED_DETAIL =
   "This page cannot confirm the picture is arriving, so check the tile yourself. If it is blank or frozen, report the camera.";
 
+/**
+ * The caveat for a tile that is showing a picture while the server is still
+ * refusing STILL frames.
+ *
+ * Without it the tile and the recorder line read as a contradiction: a moving
+ * picture above the words "Recorder not checked". They are both true, because
+ * they are answers to different questions — the picture comes from the relay's
+ * own player page, browser to relay, and never passes the recorder — so this
+ * says which is which rather than softening either one. It goes on the NOTE,
+ * never on `detail`: `detail` is drawn across the whole tile and would cover
+ * the very picture it is explaining.
+ */
+export const RELAY_ONLY_NOTE =
+  "The picture comes straight from the video relay, so it is live even though no recorder is set up for this camera — that is what the recorder line below is reporting. Still pictures and the recorder check need that setup.";
+
 /**
  * Rule 4, plus every reason a tile may have nothing to show.
  *
@@ -711,26 +726,36 @@ export function tileView(
   if (!camera) return dead("unavailable", "No camera in this position.");
   if (!online)
     return dead("offline", "This browser has no internet connection.");
-  // The server's refusal wins over anything reconstructed here. It covers the
-  // same two cases below AND the ones only it can know — chiefly "no recorder is
-  // configured for this camera's relay", which is the honest answer for every
-  // camera until the API host is configured, and which used to be replaced by
-  // our own guess.
+  // The server's refusal wins over anything reconstructed here — but only for
+  // the question it is answering. `unavailableReason` is the STILL-FRAME
+  // refusal (`snapshotRefusalReason`), and its usual value, "no recorder is
+  // configured for this camera's relay", is about a recorder the live picture
+  // never touches: the tile embeds the relay's own player page, browser to
+  // relay, with no server in the path. So it kills the tile only when the
+  // server has also said live video itself is not supported. Otherwise a wall
+  // of black rectangles claimed a setup problem for a picture that was
+  // available the whole time — which is exactly what production showed while
+  // staging, identical code with a recorder configured, played fine.
+  const live = capabilityView(camera, "liveVideo");
   const reason = camera.unavailableReason?.trim();
-  if (reason) return dead("unavailable", reason);
+  if (reason && live.state !== "supported") return dead("unavailable", reason);
   if (camera.status && camera.status !== "active")
     return dead("unavailable", "This camera is not active.");
   if (!camera.host) return dead("unavailable", "This camera has no address configured.");
 
-  const live = capabilityView(camera, "liveVideo");
   if (live.state === "unsupported") return dead("unavailable", live.detail);
 
   const player = opts.player ?? "loading";
+  // Drawing a picture past an outstanding still-frame refusal owes the reader
+  // the reason it is not a contradiction. Note, not detail — see RELAY_ONLY_NOTE.
+  const caveat = reason ? RELAY_ONLY_NOTE : null;
+  const withCaveat = (note: string | null): string | null =>
+    [note, caveat].filter(Boolean).join(" ") || null;
   const showing = (state: TTileState, detail: string | null): TTileView => ({
     state,
     label: TILE_LABELS[state],
     detail,
-    note: detail,
+    note: withCaveat(detail),
     showPlayer: true,
   });
 
@@ -753,7 +778,7 @@ export function tileView(
     case "playing":
       return showing("live", null);
     case "page-up":
-      return { ...showing("unverified", null), note: UNVERIFIED_DETAIL };
+      return { ...showing("unverified", null), note: withCaveat(UNVERIFIED_DETAIL) };
     default:
       return showing("connecting", null);
   }