Update current channel via ajax

src/js/pages/current.js

@@ -1,12 +1,30 @@
-import { _elWithAttrs, getHtml, _getById } from '../modules/utils.js'
+import { _elWithAttrs, getJson, _getById } from '../modules/utils.js'
 
 window.addEventListener('DOMContentLoaded', function () {
+  const url = window.location.href + "_update"
+  const dateEl = _getById("date")
+  const seqEl = _getById("seqNum")
+  const eventLink = _getById("eventLink")
+  const eventImage = _getById("eventImage")
+  let currentSeq = parseInt(seqEl.innerText)
+  let currentDate = dateEl.innerText
   setInterval(function () {
-    getHtml(window.location.href).then(htmlString => {
-      const temp = _elWithAttrs('div')
-      temp.innerHTML = htmlString
-      const replacementHtml = temp.querySelector('#refresher').innerHTML
-      _getById('refresher').innerHTML = replacementHtml
+    getJson(url).then(data => {
+      if (data.seqNum !== currentSeq || data.date !== currentDate) {
+        currentSeq = data.seqNum
+        currentDate = data.date
+        seqEl.textContent = currentSeq
+        dateEl.textContent = currentDate
+        eventLink.href = data.url
+        const newEventImage = _elWithAttrs("img", {
+          id: "eventImage",
+          class: "resp",
+          src: data.url
+        })
+        newEventImage.addEventListener('load', (e) => {
+          eventImage.replaceWith(newEventImage)
+        })
+      }
     })
   }, 5000)
 })

src/rubintv/handlers/external/endpoints.py

@@ -659,3 +659,21 @@ async def current(request: web.Request) -> Dict[str, Any]:
         "date": the_date,
         "seq": seq,
     }
+
+
+@routes.get(
+    "/{location}/{camera}/{channel}_current_update", name="current_update"
+)
+async def get_channel_current_update(request: web.Request) -> web.Response:
+    location_name = request.match_info["location"]
+    location = find_location(location_name, request)
+    cameras = request.config_dict["rubintv/models"].cameras
+    camera = cameras[request.match_info["camera"]]
+    bucket = request.config_dict[f"rubintv/buckets/{location.slug}"]
+    historical = request.config_dict[f"rubintv/cached_data/{location.slug}"]
+    channel = camera.channels[request.match_info["channel"]]
+    event: Event = get_current_event(camera, channel, bucket, historical)
+    json_event = json.dumps(
+        {"seqNum": event.seq, "url": event.url, "date": event.clean_date()}
+    )
+    return web.Response(text=json_event, content_type="application/json")

src/rubintv/templates/single_event.jinja

@@ -9,26 +9,26 @@
 {% endblock undertitle %}
 
 {% block content %}
-<div id="refresher">
+
   <div class="event-info">
-    <h2>{{ date }} : Sequence {{ seq }}</h2>
+    <h2><span id="date">{{ date }}</span> : Sequence <span id="seqNum">{{ seq }}</span></h2>
     <nav class="prev-next-nav">
 
     </nav>
   </div>
   {% if event %}
-    <a href="{{ event.url }}">
+    <a id="eventLink" href="{{ event.url }}">
     {% set image_class = "resp" %}
     {# {% if channel=="Monitor" %}
       {% set image_class = "resp behind" %}
     {% endif %} #}
-      <img class="{{ image_class }}" src="{{ event.url }}">
+      <img id="eventImage" class="{{ image_class }}" src="{{ event.url }}">
     </a>
     {% if channel != "Monitor" %}
-      <div class="desc">{{ event.name }}</div>
+      <div id="eventName" class="desc">{{ event.name }}</div>
     {% endif %}
   {% else %}
     <p>Event not found</p>
   {% endif %}
-</div>
+
 {% endblock content %}