Stories: Fix false positive media compatibility check (#4337)

src/components/story/Story.tsx

@@ -348,9 +348,11 @@ function Story({
   useEffect(() => {
     if (!isLoadedStory || isDeletedStory || areViewsExpired) return;
 
+    if (!isOut && !isChannelStory) return;
+
     // Refresh counters each time
     loadStoryViews({ peerId, storyId });
-  }, [isDeletedStory, areViewsExpired, isLoadedStory, peerId, storyId]);
+  }, [isDeletedStory, areViewsExpired, isLoadedStory, peerId, storyId, isOut, isChannelStory]);
 
   useEffect(() => {
     if (

src/components/story/hooks/useStoryPreloader.ts

@@ -5,6 +5,7 @@ import { ApiMediaFormat } from '../../../api/types';
 
 import { getStoryMediaHash } from '../../../global/helpers';
 import { selectPeerStories } from '../../../global/selectors';
+import unloadVideo from '../../../util/browser/unloadVideo';
 import { preloadImage } from '../../../util/files';
 import * as mediaLoader from '../../../util/mediaLoader';
 import { getProgressiveUrl } from '../../../util/mediaLoader';
@@ -125,9 +126,7 @@ function preloadProgressive(url: string) {
   head.appendChild(video);
   video.load();
   setTimeout(() => {
-    video.pause();
+    unloadVideo(video);
-    video.src = '';
-    video.load();
     head.removeChild(video);
   }, PROGRESSIVE_PRELOAD_DURATION);
 }

src/hooks/useStreaming.ts

@@ -4,6 +4,7 @@ import { useEffect } from '../lib/teact/teact';
 import { DEBUG } from '../config';
 import { requestMutation } from '../lib/fasterdom/fasterdom';
 import { applyStyles } from '../util/animation';
+import unloadVideo from '../util/browser/unloadVideo';
 import { makeProgressiveLoader } from '../util/progressieveLoader';
 import { IS_SAFARI } from '../util/windowEnvironment';
 
@@ -78,9 +79,7 @@ export function useStreaming(videoRef: RefObject<HTMLVideoElement>, url?: string
     return () => {
       requestMutation(() => {
         const src = video.src;
-        video.pause();
+        unloadVideo(video);
-        video.src = '';
-        video.load();
         mediaSource.removeEventListener('sourceopen', onSourceOpen);
         if (mediaSource.readyState === 'open') {
           endOfStream(mediaSource);

src/hooks/useVideoCleanup.ts

@@ -2,6 +2,7 @@ import type { RefObject } from 'react';
 import { useEffect } from '../lib/teact/teact';
 
 import { requestNextMutation } from '../lib/fasterdom/fasterdom';
+import unloadVideo from '../util/browser/unloadVideo';
 
 // Fix for memory leak when unmounting video element
 export default function useVideoCleanup(videoRef: RefObject<HTMLVideoElement>, dependencies: any[]) {
@@ -12,9 +13,7 @@ export default function useVideoCleanup(videoRef: RefObject<HTMLVideoElement>, d
       if (videoEl) {
         // It may be slow (specifically on iOS), so we postpone it after unmounting
         requestNextMutation(() => {
-          videoEl.pause();
+          unloadVideo(videoEl);
-          videoEl.src = '';
-          videoEl.load();
         });
       }
     };

src/util/browser/unloadVideo.ts

@@ -0,0 +1,6 @@
+export default function unloadVideo(video: HTMLVideoElement) {
+  video.pause();
+  // https://github.com/shaka-project/shaka-player/commit/0e3d10e61cb08cc35750e48face4e58f24542fc8
+  video.removeAttribute('src');
+  video.load();
+}