Add prominent watch button to ready requests

2026-09-01 11:16:43 +12:00
parent b0eff9ffcf
commit 393b8c2a88
2 changed files with 61 additions and 3 deletions
@@ -463,6 +463,10 @@ export default function RequestTimelinePage() {

  const presentation = snapshot.presentation ?? {}
  const pipeline = presentation.pipeline?.length ? presentation.pipeline : fallbackPipeline(snapshot)
+  const availableStage = pipeline.find((stage) => stage.id === 'available')
+  const mediaServerLink = availableStage?.state === 'complete' && availableStage.link
+    ? availableStage.link
+    : null
  const statusLabel = presentation.status?.label ?? fallbackStatusLabel(snapshot.state)
  const statusMeaning = presentation.status?.meaning ?? snapshot.state_reason ?? 'Magent is checking this request.'
  const download = presentation.download
@@ -671,9 +675,23 @@ export default function RequestTimelinePage() {
          </div>
        )}
        <div className="request-overview-block request-next-step">
-          <span className="request-overview-label">Next step</span>
-          <strong>{nextStep.title}</strong>
-          <p>{nextStep.description}</p>
+          <div className="request-next-step-main">
+            <div className="request-next-step-copy">
+              <span className="request-overview-label">Next step</span>
+              <strong>{nextStep.title}</strong>
+              <p>{nextStep.description}</p>
+            </div>
+            {mediaServerLink && (
+              <a
+                className="request-watch-button"
+                href={mediaServerLink}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Watch on Grizzlyflix <span aria-hidden="true">&rarr;</span>
+              </a>
+            )}
+          </div>
          <div className="request-action-row">
            {recommendedActions.map((action) => (
              <button key={action.id} type="button" disabled={Boolean(busyAction)} onClick={() => void runAction(action)}>