From 84d598c8135b6d6d810057d4d90af00fbbbf4f21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Thu, 30 Jun 2022 18:36:16 +0200
Subject: [PATCH] Web: reload the last-rendered image on SocketIO notification

---
 web/app/src/components/UpdateListener.vue     |  9 +++-
 web/app/src/components/jobs/JobDetails.vue    |  9 +++-
 .../src/components/jobs/LastRenderedImage.vue | 54 ++++++++++++++-----
 web/app/src/views/JobsView.vue                | 12 ++++-
 4 files changed, 69 insertions(+), 15 deletions(-)

diff --git a/web/app/src/components/UpdateListener.vue b/web/app/src/components/UpdateListener.vue
index fde55c15..30aadbd6 100644
--- a/web/app/src/components/UpdateListener.vue
+++ b/web/app/src/components/UpdateListener.vue
@@ -13,7 +13,7 @@ const websocketURL = ws();
 export default {
   emits: [
     // Data from Flamenco Manager:
-    "jobUpdate", "taskUpdate", "taskLogUpdate", "message", "workerUpdate",
+    "jobUpdate", "taskUpdate", "taskLogUpdate", "message", "workerUpdate", "lastRenderedUpdate",
     // SocketIO events:
     "sioReconnected", "sioDisconnected"
   ],
@@ -132,6 +132,13 @@ export default {
         this.$emit("jobUpdate", apiJobUpdate);
       });
 
+      this.socket.on("/last-rendered", (update) => {
+        // Convert to API object, in order to have the same parsing of data as
+        // when we'd do an API call.
+        const apiUpdate = API.SocketIOLastRenderedUpdate.constructFromObject(update)
+        this.$emit("lastRenderedUpdate", apiUpdate);
+      });
+
       this.socket.on("/task", (taskUpdate) => {
         // Convert to API object, in order to have the same parsing of data as
         // when we'd do an API call.
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index ad919cfd..6d344e74 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -2,7 +2,7 @@
   <h2 class="column-title">Job Details</h2>
 
   <template v-if="hasJobData">
-    <last-rendered-image :jobID="jobData.id" />
+    <last-rendered-image ref="lastRenderedImage" :jobID="jobData.id" />
 
     <dl>
       <dt class="field-id">ID</dt>
@@ -112,6 +112,13 @@ export default {
     },
   },
   methods: {
+    /**
+     * @param {API.SocketIOLastRenderedUpdate} lastRenderedUpdate
+     */
+    refreshLastRenderedImage(lastRenderedUpdate) {
+      this.$refs.lastRenderedImage.refreshLastRenderedImage(lastRenderedUpdate);
+    },
+
     _refreshJobSettings(newJobData) {
       if (objectEmpty(newJobData)) {
         this._clearJobSettings();
diff --git a/web/app/src/components/jobs/LastRenderedImage.vue b/web/app/src/components/jobs/LastRenderedImage.vue
index 5e4ef241..26134fbf 100644
--- a/web/app/src/components/jobs/LastRenderedImage.vue
+++ b/web/app/src/components/jobs/LastRenderedImage.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { api } from '@/urls';
-import { JobsApi } from '@/manager-api';
+import { JobsApi, JobLastRenderedImageInfo, SocketIOLastRenderedUpdate } from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
 
 const props = defineProps(['jobID']);
@@ -9,28 +9,58 @@ const imageURL = ref('');
 
 const jobsApi = new JobsApi(apiClient);
 
+/**
+ * Fetches the last-rendered info for the given job, then updates the <img> tag for it.
+ */
 function fetchImageURL(jobID) {
   jobsApi.fetchJobLastRenderedInfo(jobID)
-    .then((info) => {
-      // info is an api.JobLastRenderedImageInfo object.
-      for (let suffix of info.suffixes) {
-        if (!suffix.includes("-tiny")) continue;
-
-        let url = new URL(api());
-        url.pathname = info.base + "/" + suffix
-        imageURL.value = url.toString();
-        break;
-      }
-    })
+    .then(setImageURL)
     .catch((error) => { console.warn("error fetching last-rendered image info:", error) });
 }
 
+/**
+ * @param {JobLastRenderedImageInfo} thumbnailInfo
+ */
+function setImageURL(thumbnailInfo) {
+  // Set the image URL to something appropriate.
+  for (let suffix of thumbnailInfo.suffixes) {
+    if (!suffix.includes("-tiny")) continue;
+
+    let url = new URL(api());
+    url.pathname = thumbnailInfo.base + "/" + suffix
+    url.search = new Date().getTime(); // This forces the image to be reloaded.
+    imageURL.value = url.toString();
+    break;
+  }
+}
+
+/**
+ * @param {SocketIOLastRenderedUpdate} lastRenderedUpdate
+ */
+function refreshLastRenderedImage(lastRenderedUpdate) {
+  if (lastRenderedUpdate.job_id != props.jobID) {
+    console.log(
+      "LastRenderedImage.vue: refreshLastRenderedImage() received update for job",
+      lastRenderedUpdate.job_id,
+      "but this component is showing job", props.jobID);
+    return;
+  }
+
+  setImageURL(lastRenderedUpdate.thumbnail);
+}
+
+// Call fetchImageURL(jobID) whenever the job ID prop changes value.
 watch(() => props.jobID, (newJobID) => {
   console.log("Last-Rendered Image: new job ID: ", newJobID);
   fetchImageURL(newJobID);
 });
 fetchImageURL(props.jobID);
 
+// Expose refreshLastRenderedImage() so that it can be called from the parent
+// component in response to SocketIO messages.
+defineExpose({
+  refreshLastRenderedImage,
+});
 </script>
 
 <template>
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index c2f9dc93..3d3e0956 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -3,7 +3,7 @@
     <jobs-table ref="jobsTable" :activeJobID="jobID" @tableRowClicked="onTableJobClicked" />
   </div>
   <div class="col col-2" id="col-job-details">
-    <job-details :jobData="jobs.activeJob" @reshuffled="_recalcTasksTableHeight" />
+    <job-details ref="jobDetails" :jobData="jobs.activeJob" @reshuffled="_recalcTasksTableHeight" />
     <tasks-table v-if="hasJobData" ref="tasksTable" :jobID="jobID" :taskID="taskID" @tableRowClicked="onTableTaskClicked" />
   </div>
   <div class="col col-3">
@@ -16,6 +16,7 @@
   <update-listener ref="updateListener"  mainSubscription="allJobs"
     :subscribedJobID="jobID" :subscribedTaskID="taskID"
     @jobUpdate="onSioJobUpdate" @taskUpdate="onSioTaskUpdate" @taskLogUpdate="onSioTaskLogUpdate"
+    @lastRenderedUpdate="onSioLastRenderedUpdate"
     @message="onChatMessage"
     @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
 </template>
@@ -154,6 +155,15 @@ export default {
       this.taskLog.addTaskLogUpdate(taskLogUpdate);
     },
 
+    /**
+     * Event handler for SocketIO "last-rendered" updates.
+     * @param {API.SocketIOLastRenderedUpdate} lastRenderedUpdate
+     */
+    onSioLastRenderedUpdate(lastRenderedUpdate) {
+      console.log('lastRenderedUpdate:', lastRenderedUpdate);
+      this.$refs.jobDetails.refreshLastRenderedImage(lastRenderedUpdate);
+    },
+
     /**
      * @param {string} jobID job ID to navigate to, can be empty string for "no active job".
      */