chore: move assets to dedicated folder

src/App/ErrorDialog/ErrorDialog.js

@@ -22,7 +22,7 @@ const ErrorDialog = ({ className }) => {
         <div className={classnames(className, styles['error-container'])}>
             <Image
                 className={styles['error-image']}
-                src={require('/images/empty.png')}
+                src={require('/assets/images/empty.png')}
                 alt={' '}
             />
             <div className={styles['error-message']}>

src/App/styles.less

@@ -5,7 +5,7 @@
 
 @font-face {
     font-family: 'PlusJakartaSans';
-    src: url('/fonts/PlusJakartaSans.ttf') format('truetype');
+    src: url('/assets/fonts/PlusJakartaSans.ttf') format('truetype');
 }
 
 :global {

src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -35,7 +35,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     <div className={styles['logo-container']}>
                         <Image
                             className={styles['logo']}
-                            src={require('/images/stremio_symbol.png')}
+                            src={require('/assets/images/stremio_symbol.png')}
                             alt={' '}
                         />
                     </div>

src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

@@ -52,12 +52,12 @@ const NavMenuContent = ({ onClick }) => {
                     className={styles['avatar-container']}
                     style={{
                         backgroundImage: profile.auth === null ?
-                            `url('${require('/images/anonymous.png')}')`
+                            `url('${require('/assets/images/anonymous.png')}')`
                             :
                             profile.auth.user.avatar ?
                                 `url('${profile.auth.user.avatar}')`
                                 :
-                                `url('${require('/images/default_avatar.png')}')`
+                                `url('${require('/assets/images/default_avatar.png')}')`
                     }}
                 />
                 <div className={styles['user-info-details']}>

src/routes/Calendar/Placeholder/Placeholder.tsx

@@ -17,7 +17,7 @@ const Placeholder = () => {
             <div className={styles['image-container']}>
                 <Image
                     className={styles['image']}
-                    src={require('/images/calendar_placeholder.png')}
+                    src={require('/assets/images/calendar_placeholder.png')}
                     alt={' '}
                 />
             </div>

src/routes/Discover/Discover.js

@@ -133,14 +133,14 @@ const Discover = ({ urlParams, queryParams }) => {
                         discover.catalog === null ?
                             <DelayedRenderer delay={500}>
                                 <div className={styles['message-container']}>
-                                    <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                    <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                                     <div className={styles['message-label']}>{t('NO_CATALOG_SELECTED')}</div>
                                 </div>
                             </DelayedRenderer>
                             :
                             discover.catalog.content.type === 'Err' ?
                                 <div className={styles['message-container']}>
-                                    <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                    <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                                     <div className={styles['message-label']}>{discover.catalog.content.content}</div>
                                 </div>
                                 :

src/routes/Intro/Intro.js

@@ -296,7 +296,7 @@ const Intro = ({ queryParams }) => {
             <div className={styles['background-container']} />
             <div className={styles['heading-container']}>
                 <div className={styles['logo-container']}>
-                    <Image className={styles['logo']} src={require('/images/logo.png')} alt={' '} />
+                    <Image className={styles['logo']} src={require('/assets/images/logo.png')} alt={' '} />
                 </div>
                 <div className={styles['title-container']}>
                     {t('WEBSITE_SLOGAN_NEW_NEW')}

src/routes/Intro/styles.less

@@ -19,7 +19,7 @@
         bottom: -1rem;
         left: -1rem;
         right: -1rem;
-        background: url('/images/background_1.svg'), url('/images/background_2.svg');
+        background: url('/assets/images/background_1.svg'), url('/assets/images/background_2.svg');
         background-color: var(--primary-background-color);
         background-position: bottom left, top right;
         background-size: 53%, 54%;

src/routes/Library/Library.js

@@ -85,7 +85,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                                     <div className={styles['message-container']}>
                                         <Image
                                             className={styles['image']}
-                                            src={require('/images/empty.png')}
+                                            src={require('/assets/images/empty.png')}
                                             alt={' '}
                                         />
                                         <div className={styles['message-label']}>{model === 'library' ? t('LIBRARY_NOT_LOADED') : t('BOARD_CONTINUE_WATCHING_NOT_LOADED')}</div>
@@ -96,7 +96,7 @@ const Library = ({ model, urlParams, queryParams }) => {
                                     <div className={styles['message-container']}>
                                         <Image
                                             className={styles['image']}
-                                            src={require('/images/empty.png')}
+                                            src={require('/assets/images/empty.png')}
                                             alt={' '}
                                         />
                                         <div className={styles['message-label']}>{model === 'library' ? t('LIBRARY_EMPTY') : t('BOARD_CONTINUE_WATCHING_EMPTY')}</div>

src/routes/Library/Placeholder/Placeholder.tsx

@@ -17,7 +17,7 @@ const Placeholder = () => {
             <div className={styles['image-container']}>
                 <Image
                     className={styles['image']}
-                    src={require('/images/library_placeholder.png')}
+                    src={require('/assets/images/library_placeholder.png')}
                     alt={' '}
                 />
             </div>

src/routes/MetaDetails/MetaDetails.js

@@ -130,20 +130,20 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                     metaPath === null ?
                         <DelayedRenderer delay={500}>
                             <div className={styles['meta-message-container']}>
-                                <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                                 <div className={styles['message-label']}>{t('ERR_NO_META_SELECTED')}</div>
                             </div>
                         </DelayedRenderer>
                         :
                         metaDetails.metaItem === null ?
                             <div className={styles['meta-message-container']}>
-                                <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                                 <div className={styles['message-label']}>{t('ERR_NO_ADDONS_FOR_META')}</div>
                             </div>
                             :
                             metaDetails.metaItem.content.type === 'Err' ?
                                 <div className={styles['meta-message-container']}>
-                                    <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                                    <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                                     <div className={styles['message-label']}>{t('ERR_NO_META_FOUND')}</div>
                                 </div>
                                 :

src/routes/MetaDetails/StreamsList/StreamsList.js

@@ -132,7 +132,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
                                 <SeasonEpisodePicker className={styles['search']} onSubmit={handleEpisodePicker} />
                                 : null
                         }
-                        <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                        <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                         <div className={styles['label']}>{t('ERR_NO_ADDONS_FOR_STREAMS')}</div>
                     </div>
                     :
@@ -148,7 +148,7 @@ const StreamsList = ({ className, video, type, onEpisodeSearch, ...props }) => {
                                     <div className={styles['label']}>{t('UPCOMING')}...</div>
                                     : null
                             }
-                            <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                            <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                             <div className={styles['label']}>{t('NO_STREAM')}</div>
                             {
                                 showInstallAddonsButton ?

src/routes/MetaDetails/VideosList/VideosList.js

@@ -124,7 +124,7 @@ const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect,
                     metaItem.content.type === 'Err' || videosForSeason.length === 0 ?
                         <div className={styles['message-container']}>
                             <EpisodePicker className={styles['episode-picker']} onSubmit={onSeasonSearch} />
-                            <Image className={styles['image']} src={require('/images/empty.png')} alt={' '} />
+                            <Image className={styles['image']} src={require('/assets/images/empty.png')} alt={' '} />
                             <div className={styles['label']}>{t('ERR_NO_VIDEOS_FOR_META')}</div>
                         </div>
                         :

src/routes/NotFound/NotFound.js

@@ -19,7 +19,7 @@ const NotFound = () => {
             <div className={styles['not-found-content']}>
                 <Image
                     className={styles['not-found-image']}
-                    src={require('/images/empty.png')}
+                    src={require('/assets/images/empty.png')}
                     alt={' '}
                 />
                 <div className={styles['not-found-label']}>{t('PAGE_NOT_FOUND')}</div>

src/routes/Player/BufferingLoader/BufferingLoader.js

@@ -13,7 +13,7 @@ const BufferingLoader = React.forwardRef(({ className, logo }, ref) => {
                 className={styles['buffering-loader']}
                 src={logo}
                 alt={' '}
-                fallbackSrc={require('/images/stremio_symbol.png')}
+                fallbackSrc={require('/assets/images/stremio_symbol.png')}
             />
         </div>
     );

src/routes/Search/Search.js

@@ -78,7 +78,7 @@ const Search = ({ queryParams }) => {
                             <div className={styles['message-container']}>
                                 <Image
                                     className={styles['image']}
-                                    src={require('/images/empty.png')}
+                                    src={require('/assets/images/empty.png')}
                                     alt={' '}
                                 />
                                 <div className={styles['message-label']}>{ t.string('STREMIO_TV_SEARCH_NO_ADDONS') }</div>

src/routes/Settings/General/User/User.tsx

@@ -14,12 +14,12 @@ const User = ({ profile }: Props) => {
 
     const avatar = useMemo(() => (
         !profile.auth ?
-            `url('${require('/images/anonymous.png')}')`
+            `url('${require('/assets/images/anonymous.png')}')`
             :
             profile.auth.user.avatar ?
                 `url('${profile.auth.user.avatar}')`
                 :
-                `url('${require('/images/default_avatar.png')}')`
+                `url('${require('/assets/images/default_avatar.png')}')`
     ), [profile.auth]);
 
     const onLogout = useCallback(() => {

webpack.config.js

@@ -228,9 +228,9 @@ module.exports = (env, argv) => ({
             }),
         new CopyWebpackPlugin({
             patterns: [
-                { from: 'favicons', to: 'favicons' },
+                { from: 'assets/favicons', to: 'favicons' },
-                { from: 'images', to: 'images' },
+                { from: 'assets/images', to: 'images' },
-                { from: 'screenshots/*.webp', to: './' },
+                { from: 'assets/screenshots/*.webp', to: 'screenshots/[name][ext]' },
                 { from: '.well-known', to: '.well-known' },
                 { from: 'manifest.json', to: 'manifest.json' },
             ]