From 3e6730e00f6cb457f3996c1fe1cbba9af06f47b0 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Tue, 24 Aug 2021 19:43:39 +0700
Subject: [PATCH] fix metadata crash #720

also useMemo to improve performance
---
 src/StreamsSelector.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/StreamsSelector.jsx b/src/StreamsSelector.jsx
index b5d5d43e..6f9ee3e4 100644
--- a/src/StreamsSelector.jsx
+++ b/src/StreamsSelector.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useMemo } from 'react';
 
 import { FaVideo, FaVideoSlash, FaFileExport, FaFileImport, FaVolumeUp, FaVolumeMute, FaBan, FaTrashAlt, FaInfoCircle } from 'react-icons/fa';
 import { GoFileBinary } from 'react-icons/go';
@@ -96,7 +96,7 @@ const TagEditor = memo(({ existingTags, customTags, onTagChange, onTagReset }) =
 
 const EditFileDialog = memo(({ editingFile, externalFiles, mainFileFormatData, mainFilePath, customTagsByFile, setCustomTagsByFile }) => {
   const formatData = editingFile === mainFilePath ? mainFileFormatData : externalFiles[editingFile].formatData;
-  const existingTags = formatData.tags;
+  const existingTags = formatData.tags || {};
   const customTags = customTagsByFile[editingFile] || {};
 
   function onTagChange(tag, value) {
@@ -115,11 +115,10 @@ const EditFileDialog = memo(({ editingFile, externalFiles, mainFileFormatData, m
 
 const EditStreamDialog = memo(({ editingStream: { streamId: editingStreamId, path: editingFile }, externalFiles, mainFilePath, mainFileStreams, customTagsByStreamId, setCustomTagsByStreamId }) => {
   const streams = editingFile === mainFilePath ? mainFileStreams : externalFiles[editingFile].streams;
-  const stream = streams.find((s) => s.index === editingStreamId);
-  if (!stream) return null;
+  const stream = useMemo(() => streams.find((s) => s.index === editingStreamId), [streams, editingStreamId]);
 
-  const existingTags = stream.tags;
-  const customTags = (customTagsByStreamId[editingFile] || {})[editingStreamId] || {};
+  const existingTags = useMemo(() => (stream && stream.tags) || {}, [stream]);
+  const customTags = useMemo(() => (customTagsByStreamId[editingFile] || {})[editingStreamId] || {}, [customTagsByStreamId, editingFile, editingStreamId]);
 
   // This is deep!
   function onTagChange(tag, value) {
@@ -149,6 +148,8 @@ const EditStreamDialog = memo(({ editingStream: { streamId: editingStreamId, pat
     });
   }
 
+  if (!stream) return null;
+
   return <TagEditor existingTags={existingTags} customTags={customTags} onTagChange={onTagChange} onTagReset={onTagReset} />;
 });