Handle playback issues

server/server/api/files.py

@@ -1,3 +1,4 @@
+import os
 from http import HTTPStatus
 from os.path import dirname, basename
 
@@ -91,6 +92,8 @@ def get_thumbnail(file_id):
     thumbnail = thumbnails_cache.get(file.file_path, file.sha256, position=time)
     if thumbnail is None:
         video_path = resolve_video_file_path(file.file_path)
+        if not os.path.isfile(video_path):
+            abort(HTTPStatus.NOT_FOUND.value, f"Video file is missing: {file.file_path}")
         thumbnail = extract_frame_tmp(video_path, position=time)
         if thumbnail is None:
             abort(HTTPStatus.NOT_FOUND.value, f"Timestamp exceeds video length: {time}")

server/server/api/videos.py

@@ -1,3 +1,4 @@
+import os
 from http import HTTPStatus
 from os.path import dirname, basename
 
@@ -18,4 +19,7 @@ def watch_video(file_id):
         abort(HTTPStatus.NOT_FOUND.value, f"File id not found: {file_id}")
 
     path = resolve_video_file_path(file.file_path)
+    if not os.path.isfile(path):
+        abort(HTTPStatus.NOT_FOUND.value, f"Video file is missing: {file.file_path}")
+
     return send_from_directory(dirname(path), basename(path))

web/package.json

@@ -54,6 +54,7 @@
     "clsx": "^1.1.1",
     "d3": "^6.2.0",
     "date-fns": "^2.16.1",
+    "flv.js": "^1.5.0",
     "fontsource-roboto": "^2.1.4",
     "get-user-locale": "^1.4.0",
     "http-status-codes": "^1.4.0",

web/src/collection/components/FileLoadingHeader/FileLoadingHeader.js

@@ -8,6 +8,7 @@ import IconButton from "@material-ui/core/IconButton";
 import ArrowBackOutlinedIcon from "@material-ui/icons/ArrowBackOutlined";
 import { useHistory } from "react-router";
 import { ButtonBase } from "@material-ui/core";
+import { Status } from "../../../server-api/Response";
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -51,6 +52,7 @@ function useMessages() {
   return {
     retry: intl.formatMessage({ id: "actions.retry" }),
     error: intl.formatMessage({ id: "file.load.error.single" }),
+    notFound: intl.formatMessage({ id: "file.load.error.notFound" }),
     goBack: intl.formatMessage({ id: "actions.goBack" }),
   };
 }
@@ -80,13 +82,11 @@ function FileLoadingHeader(props) {
     );
   }
 
-  return (
-    <div className={clsx(classes.header, className)}>
-      {back && (
-        <IconButton onClick={handleBack} aria-label={messages.goBack}>
-          <ArrowBackOutlinedIcon />
-        </IconButton>
-      )}
+  let content;
+  if (error.status === Status.NOT_FOUND) {
+    content = <div className={classes.errorMessage}>{messages.notFound}</div>;
+  } else {
+    content = (
       <div className={classes.errorMessage}>
         {messages.error}
         <ButtonBase
@@ -98,6 +98,17 @@ function FileLoadingHeader(props) {
           {messages.retry}
         </ButtonBase>
       </div>
+    );
+  }
+
+  return (
+    <div className={clsx(classes.header, className)}>
+      {back && (
+        <IconButton onClick={handleBack} aria-label={messages.goBack}>
+          <ArrowBackOutlinedIcon />
+        </IconButton>
+      )}
+      {content}
     </div>
   );
 }
@@ -107,7 +118,9 @@ FileLoadingHeader.propTypes = {
    * True iff file is not loading and previous
    * attempt resulted in failure.
    */
-  error: PropTypes.bool.isRequired,
+  error: PropTypes.shape({
+    status: PropTypes.any,
+  }),
   /**
    * Fires on retry.
    */

web/src/collection/components/VideoDetailsPage/VideoPlayer.js

@@ -5,10 +5,47 @@ import { makeStyles } from "@material-ui/styles";
 import { FileType } from "../FileBrowserPage/FileType";
 import MediaPreview from "../../../common/components/MediaPreview";
 import ReactPlayer from "react-player";
+import { FLV_GLOBAL } from "react-player/lib/players/FilePlayer";
+import flvjs from "flv.js";
 import TimeCaption from "./TimeCaption";
 import VideoController from "./VideoController";
+import { useServer } from "../../../server-api/context";
+import { Status } from "../../../server-api/Response";
+import { useIntl } from "react-intl";
+import WarningOutlinedIcon from "@material-ui/icons/WarningOutlined";
 
-const useStyles = makeStyles(() => ({
+/**
+ * Setup bundled flv.js.
+ *
+ * By default react-player tries to lazy-load playback SDK from CDN.
+ * But the application must be able play video files when Internet
+ * connection is not available. To solve that we bundle flv.js and
+ * initialize global variable consumed by react-player's FilePlayer.
+ *
+ * See https://www.npmjs.com/package/react-player#sdk-overrides
+ * See https://github.com/CookPete/react-player/issues/605#issuecomment-492561909
+ */
+function setupBundledFlvJs(options = { suppressLogs: false }) {
+  const FLV_VAR = FLV_GLOBAL || "flvjs";
+  if (window[FLV_VAR] == null) {
+    window[FLV_VAR] = flvjs;
+  }
+
+  // Disable flv.js error messages and info messages (#149)
+  if (options.suppressLogs) {
+    flvjs.LoggingControl.enableError = false;
+    flvjs.LoggingControl.enableVerbose = false;
+
+    const doCreatePlayer = flvjs.createPlayer;
+    flvjs.createPlayer = (mediaDataSource, optionalConfig) => {
+      const player = doCreatePlayer(mediaDataSource, optionalConfig);
+      player.on("error", () => {});
+      return player;
+    };
+  }
+}
+
+const useStyles = makeStyles((theme) => ({
   container: {},
   preview: {
     width: "100%",
@@ -19,28 +56,77 @@ const useStyles = makeStyles(() => ({
     height: "100%",
     maxHeight: 300,
   },
+  error: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    backgroundColor: theme.palette.common.black,
+    color: theme.palette.grey[500],
+    ...theme.mixins.text,
+  },
+  errorIcon: {
+    margin: theme.spacing(2),
+  },
 }));
 
 function makePreviewActions(handleWatch) {
   return [{ name: "Watch Video", handler: handleWatch }];
 }
 
+/**
+ * Get i18n text.
+ */
+function useMessages() {
+  const intl = useIntl();
+  return {
+    notFoundError: intl.formatMessage({ id: "video.error.missing" }),
+    loadError: intl.formatMessage({ id: "video.error.load" }),
+    playbackError: intl.formatMessage({ id: "video.error.playback" }),
+  };
+}
+
 const VideoPlayer = function VideoPlayer(props) {
-  const { file, onReady, onProgress, className } = props;
+  const {
+    file,
+    onReady,
+    onProgress,
+    suppressErrors = false,
+    className,
+  } = props;
   const classes = useStyles();
+  const server = useServer();
+  const messages = useMessages();
   const [watch, setWatch] = useState(false);
   const [player, setPlayer] = useState(null);
+  const [error, setError] = useState(null);
 
   const handleWatch = useCallback(() => setWatch(true), []);
   const controller = useMemo(() => new VideoController(player, setWatch), []);
   const previewActions = useMemo(() => makePreviewActions(handleWatch), []);
 
+  // Make sure flv.js is available
+  useEffect(() => setupBundledFlvJs({ suppressLogs: suppressErrors }), []);
+
   // Provide controller to the consumer
   useEffect(() => onReady && onReady(controller), [onReady]);
 
   // Update controlled player
   useEffect(() => controller._setPlayer(player), [player]);
 
+  // Check if video is available
+  useEffect(() => {
+    server.probeVideoFile({ id: file.id }).then((response) => {
+      if (response.status === Status.NOT_FOUND) {
+        setError(messages.notFoundError);
+      } else if (response.status !== Status.OK) {
+        setError(messages.loadError);
+      }
+    });
+  }, [server, file.id]);
+
   // Enable support for flv files.
   // See https://github.com/CookPete/react-player#config-prop
   const exifType = file?.exif?.General_FileExtension?.trim();
@@ -59,7 +145,7 @@ const VideoPlayer = function VideoPlayer(props) {
           onMediaClick={handleWatch}
         />
       )}
-      {watch && (
+      {watch && error == null && (
         <ReactPlayer
           playing
           ref={setPlayer}
@@ -68,13 +154,20 @@ const VideoPlayer = function VideoPlayer(props) {
           controls
           url={file.playbackURL}
           onProgress={onProgress}
+          onError={() => setError(messages.playbackError)}
           config={{
             file: {
               forceFLV,
             },
           }}
         />
       )}
+      {watch && error != null && (
+        <div className={classes.error}>
+          <WarningOutlinedIcon fontSize="large" className={classes.errorIcon} />
+          {error}
+        </div>
+      )}
     </div>
   );
 };
@@ -110,6 +203,11 @@ VideoPlayer.propTypes = {
    * https://www.npmjs.com/package/react-player#callback-props
    */
   onProgress: PropTypes.func,
+
+  /**
+   * Suppress error logs.
+   */
+  suppressErrors: PropTypes.bool,
   className: PropTypes.string,
 };
 

web/src/collection/components/VideoDetailsPage/VideoPlayerPane.js

@@ -73,6 +73,7 @@ function VideoPlayerPane(props) {
         className={classes.player}
         onReady={callEach(setPlayer, onPlayerReady)}
         onProgress={setProgress}
+        suppressErrors
       />
       <ObjectTimeLine
         file={file}

web/src/collection/hooks/useFile.js

@@ -3,33 +3,34 @@ import { useDispatch, useSelector } from "react-redux";
 import { selectCachedFile } from "../state/selectors";
 import { useServer } from "../../server-api/context";
 import { cacheFile } from "../state/actions";
+import { Status } from "../../server-api/Response";
 
 /**
  * Fetch file by id.
  * @param id
  */
 export function useFile(id) {
   const file = useSelector(selectCachedFile(id));
-  const [error, setError] = useState(false);
+  const [error, setError] = useState(null);
   const server = useServer();
   const dispatch = useDispatch();
 
   const loadFile = useCallback(() => {
     const doLoad = async () => {
-      setError(false);
+      setError(null);
       const response = await server.fetchFile({ id });
       if (response.success) {
         const file = response.data;
         dispatch(cacheFile(file));
       } else {
         console.error(response.error);
-        setError(true);
+        setError({ status: response.status });
       }
     };
 
     doLoad().catch((error) => {
       console.error(error);
-      setError(true);
+      setError({ status: Status.CLIENT_ERROR });
     });
   }, [id]);
 

web/src/i18n/locales/default.en-US.json

@@ -141,6 +141,7 @@
     "file.tabExif": "EXIF Data",
     "file.load.error": "Error loading files.",
     "file.load.error.single": "Error loading file.",
+    "file.load.error.notFound": "File not found.",
     "file.details": "Details",
     "file.oneMatch": "01 File Matched",
     "file.manyMatches": "{count} Files Matched",
@@ -171,6 +172,9 @@
     "filter.creationDate": "Creation date (mm/dd/yyyy)",
     "filter.creationDate.help": "Based on file creation date.",
     "preview.notAvailable": "Preview not available.",
-    "match.load.error": "Error loading matches."
+    "match.load.error": "Error loading matches.",
+    "video.error.missing": "File Missing",
+    "video.error.load": "Loading Error",
+    "video.error.playback": "Playback Error"
   }
 }

web/src/server-api/Server/Server.js

@@ -68,6 +68,15 @@ export default class Server {
     }
   }
 
+  async probeVideoFile({ id }) {
+    try {
+      await this.axios.head(`/files/${id}/watch`);
+      return Response.ok(null);
+    } catch (error) {
+      return this.errorResponse(error);
+    }
+  }
+
   errorResponse(error) {
     if (error.response == null) {
       return Response.clientError(error);