Update 1.3.2

Fixed a bug with the media modal not loading on search result items. Fixed a bug with the media modal not loading on anime items.
synthofficial · Aug 22, 2024 · 507a7df · 507a7df
1 parent 02a85db
commit 507a7df
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 57 deletions.
diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "streamflix",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A desktop app for streaming movies, tv series and anime.",
   "license": "MIT",
   "author": {

diff --git a/src/modules/api/Movies.ts b/src/modules/api/Movies.ts
@@ -190,7 +190,7 @@ export const getMediaInfo = async (id: string) => {
                         number: episode.number,
                         season: episode.season,
                         thumbnail: episode.image,
-                        description: episode.summary.replaceAll("<p>", ""), 
+                        description: episode.summary, 
                     }
                 }))
 

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -10,7 +10,7 @@ import SettingsModal from './pages/modals/SettingsModal';
 import MediaModal from './pages/modals/MediaModal';
 import { MediaProvider } from './contexts/MediaContext';
 import { useVideoPlayer, VideoPlayerProvider } from './contexts/VideoPlayerContext';
-import { searchMedia } from '../modules/api/Movies';
+import { getMediaInfo, searchMedia } from '../modules/api/Movies';
 import TitleBar from '../components/TitleBar';
 import { ipcRenderer } from 'electron';
 import UpdateModal from './pages/modals/UpdateModal';
@@ -119,57 +119,54 @@ const AppContent = () => {
               </Flex>
 
               <Flex align="center" flexGrow={1} justifyContent="center" position="relative">
-                <Input
-                  placeholder="Search movies, shows, anime..."
-                  className={`${isSearchFocused ? "scale-105" : "scale-100"} transition-all duration-300`}
-                  bg={inputBgColor}
-                  border={0}
-                  _placeholder={{ color: 'gray.400' }}
-                  maxWidth="400px"
-                  value={searchTerm}
-                  onChange={(e) => handleSearch(e.target.value)}
-                  onFocus={() => setIsSearchFocused(true)}
-                  onBlur={() => setIsSearchFocused(false)}
-
-                />
-                {searchTerm.length > 2 && (searchResults.length > 0 || isSearching) && isSearchFocused && (
-                  <Box
-                    position="absolute"
-                    top="100%"
-                    left="50%"
-                    transform="translateX(-50%)"
-                    width="400px"
-                    bg={inputBgColor}
-                    mt={2}
-                    borderRadius="md"
-                    boxShadow="lg"
-                    zIndex={10}
-                    maxHeight="400px"
-                    overflowY="auto"
-                  >
-                    {isSearching ? (
-                      <Text p={2} color="gray.400">Searching...</Text>
-                    ) : (
-                      searchResults.map((result) => (
-                        <Flex
-                          key={result.id}
-                          p={2}
-                          _hover={{ bg: 'gray.600' }}
-                          cursor="pointer"
-                          onClick={() => handleResultClick(result)}
-                          alignItems="center"
-                        >
-                          <Image src={result.thumbnail} alt={result.title} boxSize="40px" objectFit="cover" mr={3} />
-                          <Box>
-                            <Text fontWeight="bold">{result.title}</Text>
-                            <Text fontSize="sm" color="gray.300">{result.type} • {result.releaseDate}</Text>
-                          </Box>
-                        </Flex>
-                      ))
-                    )}
+        <Input
+          placeholder="Search movies, shows, anime..."
+          value={searchTerm}
+          onChange={(e) => handleSearch(e.target.value)}
+          onFocus={() => setIsSearchFocused(true)}
+          onBlur={() => setTimeout(() => setIsSearchFocused(false), 200)}
+        />
+        {searchTerm.length > 2 && (searchResults.length > 0 || isSearching) && isSearchFocused && (
+          <Box
+            position="absolute"
+            top="100%"
+            left="50%"
+            transform="translateX(-50%)"
+            width="400px"
+            bg="dark.200"
+            mt={2}
+            borderRadius="md"
+            boxShadow="lg"
+            zIndex={10}
+            maxHeight="400px"
+            overflowY="auto"
+          >
+            {isSearching ? (
+              <Text p={2} color="gray.400">Searching...</Text>
+            ) : (
+              searchResults.map((result) => (
+                <Flex
+                  key={result.id}
+                  p={2}
+                  _hover={{ bg: 'gray.600' }}
+                  cursor="pointer"
+                  onClick={() => {
+                    console.log("Result clicked in render:", result.id);
+                    handleResultClick(result);
+                  }}
+                  alignItems="center"
+                >
+                  <Image src={result.thumbnail} alt={result.title} boxSize="40px" objectFit="cover" mr={3} />
+                  <Box>
+                    <Text fontWeight="bold">{result.title}</Text>
+                    <Text fontSize="sm" color="gray.300">{result.type} • {result.releaseDate}</Text>
                   </Box>
-                )}
-              </Flex>
+                </Flex>
+              ))
+            )}
+          </Box>
+        )}
+      </Flex>
 
               <Flex align="center">
                 <Tooltip hasArrow label="Support Server">

diff --git a/src/renderer/pages/modals/MediaModal.tsx b/src/renderer/pages/modals/MediaModal.tsx
@@ -43,6 +43,7 @@ interface MediaModalProps {
 }
 
 const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, media, onPlayClick }) => {
+  console.log(media);
   if (!media) return null;
   const [selectedRange, setSelectedRange] = useState<number>(0);
   const [selectedSeason, setSelectedSeason] = useState<number>(1);
@@ -301,7 +302,7 @@ const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, media, onPlayC
                       >
                         <Box position="relative" minWidth="160px" height="90px" mr={4}>
                           <Image
-                            src={episode.thumbnail.medium}
+                            src={episode.image || episode.thumbnail.medium}
                             alt={episode.title}
                             objectFit="cover"
                             width="100%"
@@ -343,7 +344,7 @@ const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, media, onPlayC
                             {episode.title}
                           </Text>
                           <Text fontSize="sm" color="gray.400" noOfLines={2}>
-                            {episode.description}
+                            {episode.description.replace(/<\/?[^>]+(>|$)/g, "")}
                           </Text>
                         </Flex>
                       </Flex>