rails_den 2.0.0

data/app/assets/javascript/rails_den/presence.js

@@ -0,0 +1,757 @@
+(() => {
+  const ACTIVITY_THROTTLE_MS =
+    15_000;
+
+  const SNAPSHOT_REFRESH_DELAY_MS =
+    100;
+
+  const SNAPSHOT_POLL_INTERVAL_MS =
+    30_000;
+
+  const SESSION_STORAGE_KEY =
+    "rails_den_presence_session_id";
+
+  let subscription = null;
+  let heartbeatTimer = null;
+  let snapshotTimer = null;
+  let snapshotPollTimer = null;
+  let snapshotAbortController = null;
+  let lastActivitySentAt = 0;
+  let currentStatus = null;
+
+  const metaContent = (name) => {
+    const element =
+      document.querySelector(
+        `meta[name="${name}"]`
+      );
+
+    return element
+      ? element.content
+      : null;
+  };
+
+  const presenceToken = () =>
+    metaContent(
+      "rails-den-presence-token"
+    );
+
+  const heartbeatInterval = () => {
+    const seconds =
+      Number.parseInt(
+        metaContent(
+          "rails-den-presence-heartbeat"
+        ),
+        10
+      );
+
+    if (
+      Number.isNaN(seconds) ||
+      seconds <= 0
+    ) {
+      return 30_000;
+    }
+
+    return seconds * 1000;
+  };
+
+  const currentBoardId = () => {
+    const value =
+      metaContent(
+        "rails-den-presence-board-id"
+      );
+
+    if (!value) {
+      return null;
+    }
+
+    const id =
+      Number.parseInt(
+        value,
+        10
+      );
+
+    return Number.isNaN(id)
+      ? null
+      : id;
+  };
+
+  const snapshotUrl = () => {
+    const element =
+      document.querySelector(
+        "[data-rails-den-presence-snapshot-url]"
+      );
+
+    return element
+      ? element.dataset
+          .railsDenPresenceSnapshotUrl
+      : null;
+  };
+
+  const generateSessionId = () => {
+    if (
+      window.crypto &&
+      typeof window.crypto.randomUUID ===
+        "function"
+    ) {
+      return window.crypto
+        .randomUUID()
+        .replaceAll("-", "");
+    }
+
+    return [
+      Date.now().toString(36),
+      Math.random()
+        .toString(36)
+        .slice(2),
+      Math.random()
+        .toString(36)
+        .slice(2)
+    ].join("_");
+  };
+
+  const validSessionId = (value) =>
+    typeof value === "string" &&
+    /^[a-zA-Z0-9_-]{8,128}$/.test(
+      value
+    );
+
+  const loadSessionId = () => {
+    try {
+      const existing =
+        window.sessionStorage.getItem(
+          SESSION_STORAGE_KEY
+        );
+
+      if (validSessionId(existing)) {
+        return existing;
+      }
+
+      const generated =
+        generateSessionId();
+
+      window.sessionStorage.setItem(
+        SESSION_STORAGE_KEY,
+        generated
+      );
+
+      return generated;
+    } catch (_error) {
+      return generateSessionId();
+    }
+  };
+
+  const tabSessionId =
+    loadSessionId();
+
+  const sessionId = () =>
+    tabSessionId;
+
+  const clearHeartbeat = () => {
+    if (!heartbeatTimer) {
+      return;
+    }
+
+    window.clearInterval(
+      heartbeatTimer
+    );
+
+    heartbeatTimer = null;
+  };
+
+  const sendHeartbeat = () => {
+    if (!subscription) {
+      return;
+    }
+
+    subscription.perform(
+      "heartbeat"
+    );
+  };
+
+  const startHeartbeat = () => {
+    clearHeartbeat();
+
+    heartbeatTimer =
+      window.setInterval(
+        sendHeartbeat,
+        heartbeatInterval()
+      );
+  };
+
+  const sendLocation = () => {
+    if (!subscription) {
+      return;
+    }
+
+    subscription.perform(
+      "location",
+      {
+        board_id:
+          currentBoardId()
+      }
+    );
+  };
+
+  const sendActivity = ({
+    force = false
+  } = {}) => {
+    if (!subscription) {
+      return;
+    }
+
+    const now =
+      Date.now();
+
+    if (
+      !force &&
+      now - lastActivitySentAt <
+        ACTIVITY_THROTTLE_MS
+    ) {
+      return;
+    }
+
+    lastActivitySentAt = now;
+
+    subscription.perform(
+      "active",
+      {
+        board_id:
+          currentBoardId()
+      }
+    );
+  };
+
+  const renderState = (data) => {
+    const root =
+      document.documentElement;
+
+    if (!data.available) {
+      currentStatus = null;
+
+      delete root.dataset
+        .railsDenPresenceStatus;
+
+      root.dataset
+        .railsDenPresenceAvailable =
+          "false";
+
+      return;
+    }
+
+    currentStatus =
+      data.status || null;
+
+    root.dataset
+      .railsDenPresenceAvailable =
+        "true";
+
+    if (currentStatus) {
+      root.dataset
+        .railsDenPresenceStatus =
+          currentStatus;
+    } else {
+      delete root.dataset
+        .railsDenPresenceStatus;
+    }
+  };
+
+  const renderCommunitySummary = (
+    data
+  ) => {
+    if (
+      data.visible === false ||
+      data.available === false
+    ) {
+      return;
+    }
+
+    const container =
+      document.querySelector(
+        ".rails-den-community-presence"
+      );
+
+    if (!container) {
+      return;
+    }
+
+    const onlineCount =
+      container.querySelector(
+        ".is-presence-online strong"
+      );
+
+    const awayCount =
+      container.querySelector(
+        ".is-presence-away strong"
+      );
+
+    if (onlineCount) {
+      onlineCount.textContent =
+        String(
+          data.online_count ?? 0
+        );
+    }
+
+    if (awayCount) {
+      awayCount.textContent =
+        String(
+          data.away_count ?? 0
+        );
+    }
+  };
+
+  const renderBoardPresence = (
+    data
+  ) => {
+    const container =
+      document.querySelector(
+        "[data-rails-den-board-presence]"
+      );
+
+    if (!container) {
+      return;
+    }
+
+    if (
+      data.board_presence_visible ===
+        false
+    ) {
+      container.hidden = true;
+      return;
+    }
+
+    if (
+      data.board_presence_count ===
+        null ||
+      data.board_presence_count ===
+        undefined
+    ) {
+      return;
+    }
+
+    const count =
+      Number(
+        data.board_presence_count
+      );
+
+    if (Number.isNaN(count)) {
+      return;
+    }
+
+    container.hidden = false;
+
+    container.classList.toggle(
+      "has-members",
+      count > 0
+    );
+
+    const countElement =
+      container.querySelector(
+        "strong"
+      );
+
+    if (countElement) {
+      countElement.textContent =
+        String(count);
+    }
+
+    const label =
+      container.querySelector(
+        "[data-rails-den-board-presence-label]"
+      );
+
+    if (label) {
+      label.textContent =
+        count === 1
+          ? "member here"
+          : "members here";
+    }
+  };
+
+  const renderDirectorySnapshot = (
+    data
+  ) => {
+    const summaryRegion =
+      document.querySelector(
+        "[data-rails-den-presence-directory-summary-region]"
+      );
+
+    if (
+      summaryRegion &&
+      typeof data
+        .directory_summary_html ===
+        "string"
+    ) {
+      summaryRegion.innerHTML =
+        data.directory_summary_html;
+    }
+
+    const bodyRegion =
+      document.querySelector(
+        "[data-rails-den-presence-directory-body-region]"
+      );
+
+    if (
+      bodyRegion &&
+      typeof data
+        .directory_body_html ===
+        "string"
+    ) {
+      bodyRegion.innerHTML =
+        data.directory_body_html;
+    }
+  };
+
+  const renderPresenceSnapshot = (
+    data
+  ) => {
+    renderCommunitySummary(
+      data
+    );
+
+    renderBoardPresence(
+      data
+    );
+
+    renderDirectorySnapshot(
+      data
+    );
+  };
+
+  const refreshPresenceSnapshot =
+    async () => {
+      const url =
+        snapshotUrl();
+
+      if (!url) {
+        return;
+      }
+
+      if (snapshotAbortController) {
+        snapshotAbortController.abort();
+      }
+
+      snapshotAbortController =
+        new AbortController();
+
+      try {
+        const response =
+          await fetch(
+            url,
+            {
+              credentials:
+                "same-origin",
+              headers: {
+                Accept:
+                  "application/json"
+              },
+              signal:
+                snapshotAbortController
+                  .signal
+            }
+          );
+
+        if (!response.ok) {
+          return;
+        }
+
+        const data =
+          await response.json();
+
+        renderPresenceSnapshot(
+          data
+        );
+      } catch (error) {
+        if (
+          error.name !==
+          "AbortError"
+        ) {
+          return;
+        }
+      }
+    };
+
+  const scheduleSnapshotRefresh = () => {
+    if (!snapshotUrl()) {
+      return;
+    }
+
+    if (snapshotTimer) {
+      window.clearTimeout(
+        snapshotTimer
+      );
+    }
+
+    snapshotTimer =
+      window.setTimeout(
+        () => {
+          snapshotTimer = null;
+
+          refreshPresenceSnapshot();
+        },
+        SNAPSHOT_REFRESH_DELAY_MS
+      );
+  };
+
+  const stopSnapshotPolling = () => {
+    if (!snapshotPollTimer) {
+      return;
+    }
+
+    window.clearInterval(
+      snapshotPollTimer
+    );
+
+    snapshotPollTimer = null;
+  };
+
+  const startSnapshotPolling = () => {
+    stopSnapshotPolling();
+
+    if (!snapshotUrl()) {
+      return;
+    }
+
+    snapshotPollTimer =
+      window.setInterval(
+        refreshPresenceSnapshot,
+        SNAPSHOT_POLL_INTERVAL_MS
+      );
+  };
+
+  const receivePresenceData = (
+    data
+  ) => {
+    if (
+      data &&
+      data.type ===
+        "presence_changed"
+    ) {
+      scheduleSnapshotRefresh();
+      return;
+    }
+
+    if (
+      data &&
+      data.type ===
+        "community_summary"
+    ) {
+      renderCommunitySummary(
+        data
+      );
+
+      return;
+    }
+
+    renderState(
+      data
+    );
+  };
+
+  const disconnectSubscription = () => {
+    clearHeartbeat();
+
+    if (subscription) {
+      subscription.unsubscribe();
+      subscription = null;
+    }
+
+    currentStatus = null;
+  };
+
+  const connect = () => {
+    const token =
+      presenceToken();
+
+    if (!token) {
+      disconnectSubscription();
+
+      startSnapshotPolling();
+      scheduleSnapshotRefresh();
+
+      return;
+    }
+
+    stopSnapshotPolling();
+
+    if (subscription) {
+      sendLocation();
+
+      sendActivity({
+        force: true
+      });
+
+      scheduleSnapshotRefresh();
+
+      return;
+    }
+
+    const cable =
+      window.RailsDenCable &&
+      window.RailsDenCable.consumer();
+
+    if (!cable) {
+      startSnapshotPolling();
+      scheduleSnapshotRefresh();
+
+      return;
+    }
+
+    subscription =
+      cable.subscriptions.create(
+        {
+          channel:
+            "RailsDen::PresenceChannel",
+          token: token,
+          session_id:
+            sessionId(),
+          board_id:
+            currentBoardId()
+        },
+        {
+          connected() {
+            startHeartbeat();
+
+            sendActivity({
+              force: true
+            });
+
+            scheduleSnapshotRefresh();
+          },
+
+          disconnected() {
+            clearHeartbeat();
+          },
+
+          rejected() {
+            disconnectSubscription();
+
+            startSnapshotPolling();
+            scheduleSnapshotRefresh();
+          },
+
+          received(data) {
+            receivePresenceData(
+              data
+            );
+          }
+        }
+      );
+  };
+
+  const syncPresencePreferenceControls = () => {
+    const presenceCheckbox =
+      document.querySelector(
+        'input[type="checkbox"][name$="[show_presence]"]'
+      );
+
+    const boardCheckbox =
+      document.querySelector(
+        'input[type="checkbox"][name$="[show_current_board]"]'
+      );
+
+    if (
+      !presenceCheckbox ||
+      !boardCheckbox
+    ) {
+      return;
+    }
+
+    if (!presenceCheckbox.checked) {
+      boardCheckbox.checked = false;
+      boardCheckbox.disabled = true;
+    } else {
+      boardCheckbox.disabled = false;
+    }
+
+    if (
+      presenceCheckbox.dataset
+        .railsDenPresenceBound === "true"
+    ) {
+      return;
+    }
+
+    presenceCheckbox.dataset
+      .railsDenPresenceBound =
+        "true";
+
+    presenceCheckbox.addEventListener(
+      "change",
+      syncPresencePreferenceControls
+    );
+  };
+
+  const activityEvents = [
+    "keydown",
+    "pointerdown",
+    "touchstart",
+    "scroll"
+  ];
+
+  activityEvents.forEach(
+    (eventName) => {
+      document.addEventListener(
+        eventName,
+        () => {
+          sendActivity();
+        },
+        {
+          passive: true
+        }
+      );
+    }
+  );
+
+  window.addEventListener(
+    "focus",
+    () => {
+      sendActivity({
+        force: true
+      });
+    }
+  );
+
+  document.addEventListener(
+    "visibilitychange",
+    () => {
+      if (
+        document.visibilityState ===
+          "visible"
+      ) {
+        sendActivity({
+          force: true
+        });
+
+        scheduleSnapshotRefresh();
+      }
+    }
+  );
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    () => {
+      connect();
+      syncPresencePreferenceControls();
+    }
+  );
+
+  document.addEventListener(
+    "turbo:load",
+    () => {
+      connect();
+      syncPresencePreferenceControls();
+    }
+  );
+
+  window.RailsDenPresence = {
+    sessionId,
+
+    status() {
+      return currentStatus;
+    },
+
+    sendActivity,
+    sendLocation,
+    refresh:
+      refreshPresenceSnapshot
+  };
+})();