Improve standalone rrweb demo replay controls

2026-04-01 00:00:00 +08:00
parent 1362e0bb8b
commit 24b53bb35e
1 changed files with 286 additions and 82 deletions
--- a/index.html
+++ b/index.html
@@ -108,6 +108,54 @@
      margin: 10px 0;
      padding-left: 20px;
    }
+    .replay-controls {
+      margin-top: 15px;
+      padding: 15px;
+      border: 1px solid #d8e2ef;
+      border-radius: 8px;
+      background: #fff;
+    }
+    .replay-controls.disabled {
+      opacity: 0.6;
+    }
+    .replay-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .timeline {
+      flex: 1 1 240px;
+      margin: 0;
+      accent-color: #007bff;
+    }
+    .time-label {
+      min-width: 48px;
+      text-align: center;
+      color: #495057;
+      font-variant-numeric: tabular-nums;
+    }
+    .speed-controls {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+      flex-wrap: wrap;
+    }
+    .speed-controls button,
+    #play-toggle-btn {
+      margin: 0;
+    }
+    .speed-controls button.active {
+      background: #17a2b8;
+    }
+    @media (max-width: 900px) {
+      .container {
+        flex-direction: column;
+      }
+      #replayer {
+        height: 320px !important;
+      }
+    }
  </style>
 </head>
 <body>
@@ -151,6 +199,20 @@
    <div class="panel">
      <h2>▶️ 回放区域</h2>
      <div id="replayer" style="width:100%; height:400px; border:2px solid #007bff; border-radius:8px; background:#f8f9fa;"></div>
+      <div id="replay-controls" class="replay-controls disabled">
+        <div class="replay-row">
+          <button id="play-toggle-btn" type="button" disabled>▶ 播放</button>
+          <span id="current-time" class="time-label">00:00</span>
+          <input id="timeline" class="timeline" type="range" min="0" max="0" step="1" value="0" disabled>
+          <span id="total-time" class="time-label">00:00</span>
+        </div>
+        <div class="speed-controls">
+          <button type="button" data-speed="0.5" disabled>0.5x</button>
+          <button type="button" data-speed="1" class="active" disabled>1x</button>
+          <button type="button" data-speed="2" disabled>2x</button>
+          <button type="button" data-speed="4" disabled>4x</button>
+        </div>
+      </div>
      <div class="info-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
        <h3>🎬 回放控制</h3>
        <p>播放器提供完整控制：</p>
@@ -163,86 +225,231 @@
    </div>
  </div>

-  <!-- rrweb CDN - 使用非模块化版本 -->
-  <link rel="stylesheet" href="./packages/rrweb-player/dist/style.css">
+  <!-- rrweb 浏览器版本 -->
+  <link rel="stylesheet" href="./packages/rrweb/dist/style.css">
  <script src="./packages/rrweb/dist/rrweb.umd.cjs"></script>
-  <script src="./packages/rrweb-player/dist/rrweb-player.umd.cjs"></script>

  <script>
    let events = [];
    let stopRecordingFn = null;
-    let player = null;
+    let replayer = null;
+    let replayMeta = null;
+    let replayFrame = null;
+    let isReplaying = false;
+    let currentSpeed = 1;

-    // 等待 rrweb 加载完成
-    function initWhenReady() {
-      if (
-        typeof rrweb !== 'undefined' &&
-        typeof rrweb.record === 'function' &&
-        typeof rrwebPlayer !== 'undefined'
-      ) {
-        console.log('rrweb 与 rrweb-player 已加载，准备就绪');
-        setupButtons();
+    function getReplayElements() {
+      return {
+        controls: document.getElementById('replay-controls'),
+        playToggle: document.getElementById('play-toggle-btn'),
+        timeline: document.getElementById('timeline'),
+        currentTime: document.getElementById('current-time'),
+        totalTime: document.getElementById('total-time'),
+        speedButtons: Array.from(document.querySelectorAll('#replay-controls [data-speed]')),
+      };
+    }
+
+    function formatTime(ms) {
+      const safeMs = Math.max(0, Math.floor(ms));
+      const totalSeconds = Math.floor(safeMs / 1000);
+      const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
+      const seconds = String(totalSeconds % 60).padStart(2, '0');
+      if (safeMs < 60000) {
+        const tenths = Math.floor((safeMs % 1000) / 100);
+        return `${minutes}:${seconds}.${tenths}`;
+      }
+      return `${minutes}:${seconds}`;
+    }
+
+    function updateStatus(text, type) {
+      const statusEl = document.getElementById('status-bar');
+      statusEl.className = `status-bar ${type}`;
+      statusEl.textContent = text;
+    }
+
+    function updatePlayToggle() {
+      const { playToggle } = getReplayElements();
+      playToggle.textContent = isReplaying ? '⏸ 暂停' : '▶ 播放';
+    }
+
+    function setActiveSpeed(speed) {
+      currentSpeed = speed;
+      const { speedButtons } = getReplayElements();
+      speedButtons.forEach((button) => {
+        button.classList.toggle('active', Number(button.dataset.speed) === speed);
+      });
+    }
+
+    function setReplayControlsEnabled(enabled) {
+      const { controls, playToggle, timeline, speedButtons } = getReplayElements();
+      controls.classList.toggle('disabled', !enabled);
+      playToggle.disabled = !enabled;
+      timeline.disabled = !enabled;
+      speedButtons.forEach((button) => {
+        button.disabled = !enabled;
+      });
+    }
+
+    function syncReplayUI() {
+      if (!replayer || !replayMeta) {
+        return;
+      }
+      const { timeline, currentTime, totalTime } = getReplayElements();
+      const timeOffset = Math.min(replayer.getCurrentTime(), replayMeta.totalTime);
+      timeline.max = String(replayMeta.totalTime);
+      timeline.value = String(Math.max(0, Math.floor(timeOffset)));
+      currentTime.textContent = formatTime(timeOffset);
+      totalTime.textContent = formatTime(replayMeta.totalTime);
+      if (isReplaying && timeOffset >= replayMeta.totalTime) {
+        isReplaying = false;
+        updatePlayToggle();
+        stopReplayLoop();
+      }
+    }
+
+    function stopReplayLoop() {
+      if (replayFrame !== null) {
+        cancelAnimationFrame(replayFrame);
+        replayFrame = null;
+      }
+    }
+
+    function startReplayLoop() {
+      stopReplayLoop();
+      const tick = () => {
+        syncReplayUI();
+        if (isReplaying && replayer) {
+          replayFrame = requestAnimationFrame(tick);
        } else {
-        console.log('等待 rrweb / rrweb-player 加载...');
-        setTimeout(initWhenReady, 100);
+          replayFrame = null;
        }
+      };
+      replayFrame = requestAnimationFrame(tick);
    }

-    function getPlayerConstructor() {
-      if (typeof rrwebPlayer === 'function') {
-        return rrwebPlayer;
-      }
-      if (rrwebPlayer && typeof rrwebPlayer.Player === 'function') {
-        return rrwebPlayer.Player;
-      }
-      if (rrwebPlayer && typeof rrwebPlayer.default === 'function') {
-        return rrwebPlayer.default;
-      }
-      return null;
+    function resetReplayControls() {
+      replayMeta = null;
+      isReplaying = false;
+      stopReplayLoop();
+      setReplayControlsEnabled(false);
+      setActiveSpeed(1);
+      updatePlayToggle();
+      const { timeline, currentTime, totalTime } = getReplayElements();
+      timeline.max = '0';
+      timeline.value = '0';
+      currentTime.textContent = '00:00';
+      totalTime.textContent = '00:00';
    }

-    function setupButtons() {
-      document.getElementById('start-btn').onclick = startRecording;
-      document.getElementById('stop-btn').onclick = stopRecording;
+    function destroyReplay() {
+      stopReplayLoop();
+      if (replayer && typeof replayer.destroy === 'function') {
+        replayer.destroy();
      }
-
-    function destroyPlayer() {
-      const target = document.getElementById('replayer');
-      if (player && typeof player.$destroy === 'function') {
-        player.$destroy();
-      }
-      player = null;
-      target.innerHTML = '';
+      replayer = null;
+      document.getElementById('replayer').innerHTML = '';
+      resetReplayControls();
    }

    function renderReplay() {
      if (!events.length) {
        return;
      }
-      const PlayerConstructor = getPlayerConstructor();
-      if (!PlayerConstructor) {
-        throw new Error('rrweb-player 未正确加载');
-      }
-      destroyPlayer();
+      destroyReplay();
      const target = document.getElementById('replayer');
-      player = new PlayerConstructor({
-        target,
-        props: {
-          events,
-          autoPlay: true,
-          showController: true,
-          speed: 1,
-          speedOption: [0.5, 1, 2, 4],
-          width: 1000,
-          height: 400,
-        },
+      replayer = new rrweb.Replayer(events, {
+        root: target,
+        speed: currentSpeed,
+      });
+      replayMeta = replayer.getMetaData();
+      setReplayControlsEnabled(true);
+      syncReplayUI();
+      replayer.play();
+      isReplaying = true;
+      updatePlayToggle();
+      startReplayLoop();
+    }
+
+    function toggleReplay() {
+      if (!replayer || !replayMeta) {
+        return;
+      }
+      const { timeline } = getReplayElements();
+      const timeOffset = Number(timeline.value);
+      if (isReplaying) {
+        replayer.pause();
+        isReplaying = false;
+        stopReplayLoop();
+      } else {
+        replayer.play(timeOffset);
+        isReplaying = true;
+        startReplayLoop();
+      }
+      updatePlayToggle();
+      syncReplayUI();
+    }
+
+    function seekReplay(timeOffset) {
+      if (!replayer || !replayMeta) {
+        return;
+      }
+      const safeOffset = Math.max(0, Math.min(timeOffset, replayMeta.totalTime));
+      if (isReplaying) {
+        replayer.play(safeOffset);
+        startReplayLoop();
+      } else {
+        replayer.pause(safeOffset);
+      }
+      syncReplayUI();
+    }
+
+    function changeReplaySpeed(speed) {
+      setActiveSpeed(speed);
+      if (replayer) {
+        replayer.setConfig({ speed });
+      }
+    }
+
+    function setupButtons() {
+      document.getElementById('start-btn').onclick = startRecording;
+      document.getElementById('stop-btn').onclick = stopRecording;
+      document.getElementById('play-toggle-btn').onclick = toggleReplay;
+      document.getElementById('timeline').addEventListener('input', (event) => {
+        const value = Number(event.target.value);
+        getReplayElements().currentTime.textContent = formatTime(value);
+      });
+      document.getElementById('timeline').addEventListener('change', (event) => {
+        seekReplay(Number(event.target.value));
+      });
+      getReplayElements().speedButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+          changeReplaySpeed(Number(button.dataset.speed));
+        });
      });
    }

-    // 开始录制
+    function initWhenReady() {
+      if (
+        typeof rrweb !== 'undefined' &&
+        typeof rrweb.record === 'function' &&
+        typeof rrweb.Replayer === 'function'
+      ) {
+        console.log('rrweb 已加载，准备就绪');
+        setupButtons();
+        resetReplayControls();
+      } else {
+        console.log('等待 rrweb 加载...');
+        setTimeout(initWhenReady, 100);
+      }
+    }
+
    function startRecording() {
+      if (typeof stopRecordingFn === 'function') {
+        stopRecordingFn();
+      }
+      stopRecordingFn = null;
      events = [];
-      destroyPlayer();
+      destroyReplay();
      try {
        stopRecordingFn = rrweb.record({
          emit(event) {
@@ -251,7 +458,7 @@
          recordCanvas: true,
          recordCrossOriginIframes: true,
          recordAfter: 'DOMContentLoaded',
-          ignoreSelector: '.status-bar, .info-box, #replayer',
+          ignoreSelector: '.status-bar, .info-box, #replayer, #replay-controls',
        });
        updateStatus('🔴 正在录制...', 'recording');
        document.getElementById('start-btn').disabled = true;
@@ -264,9 +471,10 @@
      }
    }

-    // 停止录制
    function stopRecording() {
-      if (typeof stopRecordingFn === 'function') {
+      if (typeof stopRecordingFn !== 'function') {
+        return;
+      }
      stopRecordingFn();
      stopRecordingFn = null;
      updateStatus(`✅ 已录制 ${events.length} 个事件`, 'idle');
@@ -284,16 +492,7 @@
      console.log('事件列表：', events);
      alert(`录制完成！\n共记录了 ${events.length} 个事件。\n请在右侧查看回放与控制条。`);
    }
-    }

-    // 更新状态
-    function updateStatus(text, type) {
-      const statusEl = document.getElementById('status-bar');
-      statusEl.className = `status-bar ${type}`;
-      statusEl.textContent = text;
-    }
-
-    // 测试函数
    function changeColor() {
      const colors = ['#f8f9fa', '#e3f2fd', '#fff3cd', '#d1ecf1d', '#f8d7da', '#d6d8db', '#cce5ff', '#e2d9f7'];
      document.querySelector('.test-area').style.background = colors[Math.floor(Math.random() * colors.length)];
@@ -317,12 +516,17 @@
    }

    function clearAll() {
+      if (typeof stopRecordingFn === 'function') {
+        stopRecordingFn();
+        stopRecordingFn = null;
+      }
      events = [];
-      destroyPlayer();
+      document.getElementById('start-btn').disabled = false;
+      document.getElementById('stop-btn').disabled = true;
+      destroyReplay();
      updateStatus('⚪ 等待录制', 'idle');
    }

-    // 开始初始化
    setTimeout(initWhenReady, 100);
  </script>
 </body>