videoReplayer.spec.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
  1. import {createEvent, fireEvent} from 'sentry-test/reactTestingLibrary';
  2. import {VideoReplayer} from './videoReplayer';
  3. // XXX: Not quite sure the best way to mock RAF - here we use fake timers
  4. // VideoReplayer uses `app/util/replays/timer` which uses RAF to count up. This
  5. // is used to render the progress of the seeker bar and sync with video
  6. // replays.
  7. //
  8. // advancing by 2000ms ~== 20000s in Timer, but this may depend on hardware, TBD
  9. jest.useFakeTimers();
  10. jest.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
  11. describe('VideoReplayer - no starting gap', () => {
  12. beforeEach(() => {
  13. jest.clearAllTimers();
  14. });
  15. const attachments = [
  16. {
  17. id: 0,
  18. timestamp: 0,
  19. duration: 5000,
  20. },
  21. // no gap
  22. {
  23. id: 1,
  24. timestamp: 5000,
  25. duration: 5000,
  26. },
  27. {
  28. id: 2,
  29. timestamp: 10_001,
  30. duration: 5000,
  31. },
  32. // 5 second gap
  33. {
  34. id: 3,
  35. timestamp: 20_000,
  36. duration: 5000,
  37. },
  38. // 5 second gap
  39. {
  40. id: 4,
  41. timestamp: 30_000,
  42. duration: 5000,
  43. },
  44. {
  45. id: 5,
  46. timestamp: 35_002,
  47. duration: 5000,
  48. },
  49. ];
  50. const extra = [
  51. {
  52. id: 6,
  53. timestamp: 40_002,
  54. duration: 5000,
  55. },
  56. {
  57. id: 7,
  58. timestamp: 45_002,
  59. duration: 5000,
  60. },
  61. ];
  62. const skip = [
  63. {
  64. id: 7,
  65. timestamp: 45_002,
  66. duration: 5000,
  67. },
  68. {
  69. id: 8,
  70. timestamp: 50_002,
  71. duration: 5000,
  72. },
  73. ];
  74. it('plays and seeks inside of a segment', async () => {
  75. const root = document.createElement('div');
  76. const inst = new VideoReplayer(attachments, {
  77. videoApiPrefix: '/foo/',
  78. root,
  79. start: 0,
  80. onFinished: jest.fn(),
  81. onLoaded: jest.fn(),
  82. onBuffer: jest.fn(),
  83. durationMs: 40000,
  84. config: {skipInactive: false, speed: 1.0},
  85. });
  86. // @ts-expect-error private
  87. expect(inst._currentIndex).toEqual(0);
  88. const playPromise = inst.play(6500);
  89. jest.advanceTimersByTime(10000);
  90. await playPromise;
  91. // @ts-expect-error private
  92. expect(inst._currentIndex).toEqual(1);
  93. // `currentTime` is in seconds
  94. // @ts-expect-error private
  95. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(1.5);
  96. });
  97. it('seeks to a gap in a video', async () => {
  98. const root = document.createElement('div');
  99. const inst = new VideoReplayer(attachments, {
  100. videoApiPrefix: '/foo/',
  101. root,
  102. start: 0,
  103. onFinished: jest.fn(),
  104. onLoaded: jest.fn(),
  105. onBuffer: jest.fn(),
  106. durationMs: 40000,
  107. config: {skipInactive: false, speed: 1.0},
  108. });
  109. const playPromise = inst.play(18100);
  110. // @ts-expect-error private
  111. const video = inst.getVideo(2)!;
  112. // the replay is actually stopped right now to wait for loading
  113. fireEvent(video, createEvent.loadedData(video));
  114. // 15000 -> 20000 is a gap, so player should start playing @ index 3, from
  115. // the beginning.
  116. jest.advanceTimersByTime(2500);
  117. await playPromise;
  118. // @ts-expect-error private
  119. expect(inst._currentIndex).toEqual(3);
  120. // `currentTime` is in seconds
  121. // @ts-expect-error private
  122. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(0);
  123. });
  124. it('seeks past end of the replay', async () => {
  125. const root = document.createElement('div');
  126. const inst = new VideoReplayer(attachments, {
  127. videoApiPrefix: '/foo/',
  128. root,
  129. start: 0,
  130. // Unfortunately, `video.play()` is not implemented in jsdom, so no events,
  131. // so can't check that onFinished is called
  132. onFinished: jest.fn(),
  133. onLoaded: jest.fn(),
  134. onBuffer: jest.fn(),
  135. durationMs: 40000,
  136. config: {skipInactive: false, speed: 1.0},
  137. });
  138. const playPromise = inst.play(50000);
  139. // 15000 -> 20000 is a gap, so player should start playing @ index 3, from
  140. // the beginning.
  141. jest.advanceTimersByTime(5000);
  142. await playPromise;
  143. // @ts-expect-error private
  144. expect(inst._currentIndex).toEqual(5);
  145. // `currentTime` is in seconds
  146. // @ts-expect-error private
  147. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(5);
  148. });
  149. it('initially only loads videos from 0 to BUFFER', async () => {
  150. const root = document.createElement('div');
  151. const inst = new VideoReplayer(attachments, {
  152. videoApiPrefix: '/foo/',
  153. root,
  154. start: 0,
  155. onFinished: jest.fn(),
  156. onLoaded: jest.fn(),
  157. onBuffer: jest.fn(),
  158. durationMs: 40000,
  159. config: {skipInactive: false, speed: 1.0},
  160. });
  161. const playPromise = inst.play(0);
  162. jest.advanceTimersByTime(2500);
  163. await playPromise;
  164. // @ts-expect-error private
  165. expect(inst._currentIndex).toEqual(0);
  166. // @ts-expect-error private
  167. expect(inst._videos.size).toEqual(3);
  168. });
  169. it('should load the correct videos after playing at a timestamp', async () => {
  170. const root = document.createElement('div');
  171. const inst = new VideoReplayer(attachments.concat(extra), {
  172. videoApiPrefix: '/foo/',
  173. root,
  174. start: 0,
  175. onFinished: jest.fn(),
  176. onLoaded: jest.fn(),
  177. onBuffer: jest.fn(),
  178. durationMs: 50000,
  179. config: {skipInactive: false, speed: 1.0},
  180. });
  181. // play at segment 7
  182. const playPromise = inst.play(45_003);
  183. jest.advanceTimersByTime(2500);
  184. await playPromise;
  185. // @ts-expect-error private
  186. expect(inst._currentIndex).toEqual(7);
  187. // videos loaded should be [0, 1, 2, 4, 5, 6, 7]
  188. // since we have [0, 1, 2] preloaded initially
  189. // and only [4, 5, 6, 7] loaded when segment 7 is requested
  190. // @ts-expect-error private
  191. const videos = inst._videos;
  192. // @ts-expect-error private
  193. const getVideo = index => inst.getVideo(index);
  194. expect(videos.size).toEqual(7);
  195. expect(videos.get(0)).toEqual(getVideo(0));
  196. expect(videos.get(2)).toEqual(getVideo(2));
  197. expect(videos.get(3)).toEqual(undefined);
  198. expect(videos.get(4)).toEqual(getVideo(4));
  199. expect(videos.get(7)).toEqual(getVideo(7));
  200. });
  201. it('should work correctly if we have missing segments', async () => {
  202. const root = document.createElement('div');
  203. const inst = new VideoReplayer(attachments.concat(skip), {
  204. videoApiPrefix: '/foo/',
  205. root,
  206. start: 0,
  207. onFinished: jest.fn(),
  208. onLoaded: jest.fn(),
  209. onBuffer: jest.fn(),
  210. durationMs: 55000,
  211. config: {skipInactive: false, speed: 1.0},
  212. });
  213. // play at segment 7
  214. const playPromise = inst.play(45_003);
  215. jest.advanceTimersByTime(2500);
  216. await playPromise;
  217. // @ts-expect-error private
  218. expect(inst._currentIndex).toEqual(6);
  219. // @ts-expect-error private
  220. const videos = inst._videos;
  221. // @ts-expect-error private
  222. const getVideo = index => inst.getVideo(index);
  223. // videos loaded should be [0, 1, 2, 3, 4, 5, 7, 8]
  224. expect(videos.size).toEqual(8);
  225. expect(videos.get(0)).toEqual(getVideo(0));
  226. expect(videos.get(2)).toEqual(getVideo(2));
  227. expect(videos.get(5)).toEqual(getVideo(5));
  228. expect(videos.get(6)).toEqual(getVideo(6));
  229. expect(videos.get(7)).toEqual(getVideo(7));
  230. });
  231. });
  232. describe('VideoReplayer - with starting gap', () => {
  233. beforeEach(() => {
  234. jest.clearAllTimers();
  235. });
  236. const attachments = [
  237. {
  238. id: 0,
  239. timestamp: 2500,
  240. duration: 5000,
  241. },
  242. // no gap
  243. {
  244. id: 1,
  245. timestamp: 5000,
  246. duration: 5000,
  247. },
  248. {
  249. id: 2,
  250. timestamp: 10_001,
  251. duration: 5000,
  252. },
  253. // 5 second gap
  254. {
  255. id: 3,
  256. timestamp: 20_000,
  257. duration: 5000,
  258. },
  259. // 5 second gap
  260. {
  261. id: 4,
  262. timestamp: 30_000,
  263. duration: 5000,
  264. },
  265. {
  266. id: 5,
  267. timestamp: 35_002,
  268. duration: 5000,
  269. },
  270. ];
  271. it('plays and seeks before replay starts', async () => {
  272. const root = document.createElement('div');
  273. const inst = new VideoReplayer(attachments, {
  274. videoApiPrefix: '/foo/',
  275. root,
  276. start: 0,
  277. onFinished: jest.fn(),
  278. onLoaded: jest.fn(),
  279. onBuffer: jest.fn(),
  280. durationMs: 40000,
  281. config: {skipInactive: false, speed: 1.0},
  282. });
  283. // @ts-expect-error private
  284. expect(inst._currentIndex).toEqual(0);
  285. const playPromise = inst.play(1500);
  286. jest.advanceTimersByTime(2000);
  287. await playPromise;
  288. // @ts-expect-error private
  289. expect(inst._currentIndex).toEqual(0);
  290. // `currentTime` is in seconds
  291. // @ts-expect-error private
  292. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(0);
  293. });
  294. it('seeks to a gap in a video', async () => {
  295. const root = document.createElement('div');
  296. const inst = new VideoReplayer(attachments, {
  297. videoApiPrefix: '/foo/',
  298. root,
  299. start: 0,
  300. onFinished: jest.fn(),
  301. onLoaded: jest.fn(),
  302. onBuffer: jest.fn(),
  303. durationMs: 40000,
  304. config: {skipInactive: false, speed: 1.0},
  305. });
  306. const playPromise = inst.play(18100);
  307. // @ts-expect-error private
  308. const video = inst.getVideo(2)!;
  309. // the replay is actually stopped right now to wait for loading
  310. fireEvent(video, createEvent.loadedData(video));
  311. // 15000 -> 20000 is a gap, so player should start playing @ index 3, from
  312. // the beginning.
  313. jest.advanceTimersByTime(2500);
  314. await playPromise;
  315. // @ts-expect-error private
  316. expect(inst._currentIndex).toEqual(3);
  317. // `currentTime` is in seconds
  318. // @ts-expect-error private
  319. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(0);
  320. });
  321. it('seeks past end of the replay', async () => {
  322. const root = document.createElement('div');
  323. const inst = new VideoReplayer(attachments, {
  324. videoApiPrefix: '/foo/',
  325. root,
  326. start: 0,
  327. // Unfortunately, `video.play()` is not implemented in jsdom, so no events,
  328. // so can't check that onFinished is called
  329. onFinished: jest.fn(),
  330. onLoaded: jest.fn(),
  331. onBuffer: jest.fn(),
  332. durationMs: 40000,
  333. config: {skipInactive: false, speed: 1.0},
  334. });
  335. const playPromise = inst.play(50000);
  336. // 15000 -> 20000 is a gap, so player should start playing @ index 3, from
  337. // the beginning.
  338. jest.advanceTimersByTime(5000);
  339. await playPromise;
  340. // @ts-expect-error private
  341. expect(inst._currentIndex).toEqual(5);
  342. // `currentTime` is in seconds
  343. // @ts-expect-error private
  344. expect(inst.getVideo(inst._currentIndex)?.currentTime).toEqual(5);
  345. });
  346. });
  347. describe('VideoReplayer - with ending gap', () => {
  348. beforeEach(() => {
  349. jest.clearAllTimers();
  350. });
  351. const attachments = [
  352. {
  353. id: 0,
  354. timestamp: 2500,
  355. duration: 5000,
  356. },
  357. // no gap
  358. {
  359. id: 1,
  360. timestamp: 5000,
  361. duration: 5000,
  362. },
  363. {
  364. id: 2,
  365. timestamp: 10_001,
  366. duration: 5000,
  367. },
  368. // 5 second gap
  369. {
  370. id: 3,
  371. timestamp: 20_000,
  372. duration: 5000,
  373. },
  374. // 5 second gap
  375. {
  376. id: 4,
  377. timestamp: 30_000,
  378. duration: 5000,
  379. },
  380. {
  381. id: 5,
  382. timestamp: 35_002,
  383. duration: 5000,
  384. },
  385. ];
  386. it('keeps playing until the end if there is an ending gap', async () => {
  387. const root = document.createElement('div');
  388. const inst = new VideoReplayer(attachments, {
  389. videoApiPrefix: '/foo/',
  390. root,
  391. start: 0,
  392. onFinished: jest.fn(),
  393. onLoaded: jest.fn(),
  394. onBuffer: jest.fn(),
  395. durationMs: 50000,
  396. config: {skipInactive: false, speed: 1.0},
  397. });
  398. // actual length of the segments is 40s
  399. // 10s gap at the end
  400. // play at the last segment
  401. const playPromise = inst.play(36000);
  402. await playPromise;
  403. jest.advanceTimersByTime(4000);
  404. // we're still within the last segment (5)
  405. // @ts-expect-error private
  406. expect(inst._currentIndex).toEqual(5);
  407. expect(inst.getCurrentTime()).toEqual(40000);
  408. // now we are in the gap
  409. // timer should still be going since the duration is 50s
  410. jest.advanceTimersByTime(5000);
  411. // @ts-expect-error private
  412. expect(inst._isPlaying).toEqual(true);
  413. // a long time passes
  414. // ensure the timer stops at the end duration (50s)
  415. jest.advanceTimersByTime(60000);
  416. expect(inst.getCurrentTime()).toEqual(50000);
  417. // @ts-expect-error private
  418. expect(inst._isPlaying).toEqual(false);
  419. });
  420. it('ends at the proper time if seeking into a gap at the end', async () => {
  421. const root = document.createElement('div');
  422. const inst = new VideoReplayer(attachments, {
  423. videoApiPrefix: '/foo/',
  424. root,
  425. start: 0,
  426. onFinished: jest.fn(),
  427. onLoaded: jest.fn(),
  428. onBuffer: jest.fn(),
  429. durationMs: 50000,
  430. config: {skipInactive: false, speed: 1.0},
  431. });
  432. // actual length of the segments is 40s
  433. // 10s gap at the end
  434. // play at the gap
  435. const playPromise = inst.play(40002);
  436. await playPromise;
  437. jest.advanceTimersByTime(4000);
  438. // we should be still playing in the gap
  439. expect(inst.getCurrentTime()).toEqual(44002);
  440. // @ts-expect-error private
  441. expect(inst._isPlaying).toEqual(true);
  442. // a long time passes
  443. // ensure the timer stops at the end duration (50s)
  444. jest.advanceTimersByTime(60000);
  445. expect(inst.getCurrentTime()).toBeLessThan(50100);
  446. // @ts-expect-error private
  447. expect(inst._isPlaying).toEqual(false);
  448. });
  449. });