From 7d9ae0a4eac794271d373ce2ce4f1f9ffe207858 Mon Sep 17 00:00:00 2001
From: Geolffrey Mena <gmjun2000@gmail.com>
Date: Thu, 13 Jun 2024 14:31:16 -0600
Subject: [PATCH] design(fix): improve add collection

---
 .github/workflows/publish.yml                 |   1 +
 package.json                                  |   3 +-
 src/main/core/helia.mjs                       |   2 +-
 src/main/core/hls.js                          |   3 +-
 .../core/app/components/Blankslate/index.jsx  |  44 ++-
 .../core/app/components/Catalog/index.jsx     |   7 +-
 .../core/app/components/Catalog/list.jsx      |   2 +-
 .../core/app/components/Catalog/row.jsx       |   6 +-
 .../app/components/CustomButton/index.jsx     |   7 +-
 .../core/app/components/Footer/index.jsx      |   2 +-
 .../core/app/components/Image/index.jsx       |   4 +-
 .../core/app/components/MainLoader/index.jsx  |   3 +-
 .../app/components/PlayerLoader/index.jsx     |   2 -
 .../app/components/PointsLoader/index.jsx     |   6 +-
 .../core/app/components/Poster/index.jsx      |   4 +-
 .../core/app/components/Search/index.jsx      |   6 +-
 src/render/core/app/pages/Home/index.jsx      |   6 +-
 src/render/core/settings.js                   |  13 +-
 src/render/css/app/default.scss               |  20 -
 src/render/css/app/layout.scss                |   4 +-
 src/render/css/app/player.queries.scss        |  90 -----
 src/render/css/app/queries.scss               | 371 ------------------
 src/render/css/app/queries.web.scss           | 369 -----------------
 src/render/index.scss                         |   6 +-
 src/render/index.web.js                       |   3 +-
 src/render/index.web.scss                     |   5 +-
 26 files changed, 74 insertions(+), 915 deletions(-)
 delete mode 100644 src/render/css/app/player.queries.scss
 delete mode 100755 src/render/css/app/queries.scss
 delete mode 100755 src/render/css/app/queries.web.scss

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 998447f46..9151ff4ef 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -5,6 +5,7 @@ on:
     branches:
       - "master"
       - "v0.3.0"
+      - "v1.0.0"
 
 jobs:
   release:
diff --git a/package.json b/package.json
index b0941c9bd..b621b6d2d 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,8 @@
     "package:win": "npm run package -- --win --x64 --ia32",
     "publish:mac": "npm run package:mac -- --publish always",
     "publish:linux": "npm run package:linux -- --publish always",
-    "publish:win": "npm run package:win -- --publish always"
+    "publish:win": "npm run package:win -- --publish always",
+    "release": "electron-builder --publish always"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
diff --git a/src/main/core/helia.mjs b/src/main/core/helia.mjs
index 38a808d5a..55068056b 100644
--- a/src/main/core/helia.mjs
+++ b/src/main/core/helia.mjs
@@ -67,7 +67,7 @@ function getConfig(runtime = "node") {
     services: {
       ...defaults.services,
       pubsub: gossipsub({
-        allowPublishToZeroPeers: true,
+        allowPublishToZeroTopicPeers: true,
         emitSelf: true,
         canRelayMessage: true,
       }),
diff --git a/src/main/core/hls.js b/src/main/core/hls.js
index a27ab6d09..6fb12cd6d 100644
--- a/src/main/core/hls.js
+++ b/src/main/core/hls.js
@@ -6,7 +6,8 @@ const log = require('logplease').create('HLS')
 const CONF = {
   manifestLoadingMaxRetry: 2,
   manifestLoadingTimeOut: 5 * 1000,
-  manifestLoadingRetryDelay: 1000
+  manifestLoadingRetryDelay: 1000,
+  manifestLoadingMaxRetryTimeout: 60 * 1000,
 }
 
 const DEFAULT_PLAYER_CONTROLS = [
diff --git a/src/render/core/app/components/Blankslate/index.jsx b/src/render/core/app/components/Blankslate/index.jsx
index dc69c0b11..2efe7cb44 100644
--- a/src/render/core/app/components/Blankslate/index.jsx
+++ b/src/render/core/app/components/Blankslate/index.jsx
@@ -1,9 +1,9 @@
-import React, { useState} from 'react';
+import React, { useState } from 'react';
 import { styled, Box, TextField, Typography, Divider } from '@mui/material';
-import NoCollection from '@render/media/img/layout/movies.png';
 import CustomButton from "@components/CustomButton";
 import ChannelItem from '@components/ChannelItem';
 import CustomScrollbars from "@components/Scroller";
+import Footer from '@components/Footer'
 import settings from '@settings'
 
 export const Wrapper = styled(Box)(() => ({
@@ -11,7 +11,7 @@ export const Wrapper = styled(Box)(() => ({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
-  width: '25rem',
+  width: '100%',
   backgroundColor: '#212328',
   borderRadius: '1rem',
   boxShadow: 24,
@@ -69,30 +69,35 @@ const Blankslate = (props) => {
       textAlign="center"
       height="calc(100% - 6rem)"
     >
-      <Box display="flex" alignItems="center" mb={4}>
-        <Box
-          component="img"
-          src={NoCollection}
-          alt="No Collection"
-          width="20rem"
-        />
-      </Box>
       <Typography variant="h4" color={'#eee'} gutterBottom>
-        Add a new collection.
+        New collection.
       </Typography>
       <Typography variant="body1" color={'#eee'} gutterBottom>
-        You can find a collection cid in the creator profile.
+        Find the collection CID in the creator's profile.
       </Typography>
 
       <Wrapper>
         <TextField
+          fullWidth
           value={cid}
           label="Collection CID"
-          sx={{ marginY: 2, 'fieldset': { borderColor: '#eee !important' }, 'label, input': { color: '#eee !important' } }}
           onChange={(e) => setCID(e.target.value)}
-          fullWidth
+          sx={{
+            marginY: 2,
+            fieldset: {
+              borderColor: '#eee !important'
+            },
+            'label,input': {
+              color: '#eee !important',
+            }
+          }}
         />
-        <CustomButton variant={'filled'} onClick={handleClick} padding={'8px 16px'}>
+        <CustomButton
+          variant={'filled'}
+          onClick={handleClick}
+          width='100%'
+          padding={'8px 16px'}
+        >
           Connect
         </CustomButton>
       </Wrapper>
@@ -108,16 +113,17 @@ const EmptyPage = (props) => {
           <Collections onButtonClick={props.onButtonClick} />
         </Box>
         <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" sx={{ height: '50%', opacity: 0.4, overflow: 'hidden' }}>
-          <Divider orientation="vertical" sx={{ height: '100%', mx: 2, borderColor: '#D1D2D3' }} />
-          <Typography variant="body1" color={'#D1D2D3'} gutterBottom>
+          <Divider orientation="vertical" sx={{ height: '100%', mx: 2, borderColor: '#eee' }} />
+          <Typography variant="body1" color={'#eee'} gutterBottom>
             or
           </Typography>
-          <Divider orientation="vertical" sx={{ height: '100%', mx: 2, borderColor: '#D1D2D3' }} />
+          <Divider orientation="vertical" sx={{ height: '100%', mx: 2, borderColor: '#eee' }} />
         </Box>
         <Box display="flex" justifyContent="center" alignItems="center" width="60%">
           <Blankslate onButtonClick={props.onButtonClick} />
         </Box>
       </Box>
+      <Footer />
     </Box>
   );
 };
diff --git a/src/render/core/app/components/Catalog/index.jsx b/src/render/core/app/components/Catalog/index.jsx
index 3c52154bb..9ea082ad3 100755
--- a/src/render/core/app/components/Catalog/index.jsx
+++ b/src/render/core/app/components/Catalog/index.jsx
@@ -139,11 +139,6 @@ export default class Catalog extends React.Component {
     this.resizeTimeout = setTimeout(this.recalculateScreen, 500)
   }
 
-  // shouldComponentUpdate(nextProps, nextState) {
-  //   return nextProps.cid !== this.props.cid || nextState.loading;
-  // }
-
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize)
     broker.removeAllListeners()
@@ -256,7 +251,7 @@ export default class Catalog extends React.Component {
         {
           <section className='row full-height'>
             <div className='clearfix full-height'>
-              <header className='no-margin vertical-padding transparent z-depth-1 d-flex align-items-center justify-content-between header_search'>
+              <header className='no-margin vertical-padding transparent z-depth-1 d-flex align-items-center justify-content-between header-search'>
                 <Search cid={this.props.cid} onClick={this.handleClickMovie} />
                 <nav className='col l6 m6 transparent z-depth-0'>
                   <CatalogNav
diff --git a/src/render/core/app/components/Catalog/list.jsx b/src/render/core/app/components/Catalog/list.jsx
index 2fd915f8f..1ce05164c 100755
--- a/src/render/core/app/components/Catalog/list.jsx
+++ b/src/render/core/app/components/Catalog/list.jsx
@@ -60,7 +60,7 @@ export default class CatalogList extends React.Component {
     const [start, end] = params
     return this.state.end
       ? new Promise(() => console.log('Finish'))
-      : this.props.loadOrder && this.props.loadOrder(start, end)
+      : this.props.loadOrder?.(start, end)
   }
 
   render () {
diff --git a/src/render/core/app/components/Catalog/row.jsx b/src/render/core/app/components/Catalog/row.jsx
index 65c277c1c..01f336462 100644
--- a/src/render/core/app/components/Catalog/row.jsx
+++ b/src/render/core/app/components/Catalog/row.jsx
@@ -10,9 +10,13 @@ export default class CatalogRow extends React.Component {
       chunk: PropTypes.array.isRequired
     }
   }
+  
+  shouldComponentUpdate(nextProps) {
+    return nextProps.chunk !== this.props.chunk || nextProps.chunkSize != this.props.chunkSize
+  }
+
 
   render () {
-    
     return (
       <div className='clearfix row-img' style={this.props.style}>
         {!this.props.empty && this.props.chunk.map((i) => {
diff --git a/src/render/core/app/components/CustomButton/index.jsx b/src/render/core/app/components/CustomButton/index.jsx
index 4245eb007..6c8f3ce45 100644
--- a/src/render/core/app/components/CustomButton/index.jsx
+++ b/src/render/core/app/components/CustomButton/index.jsx
@@ -40,7 +40,6 @@ export const CustomButton = (props) => {
 
 const CustomButtonWrapper = styled(Button)(() => ({
     background: 'transparent',
-    borderRadius: '50px !important',
     color: '#D1D2D3 !important',
     fontWeight: '500 !important',
     textTransform: 'capitalize',
@@ -60,11 +59,11 @@ const CustomButtonWrapper = styled(Button)(() => ({
         }
     },
     "&.filled": {
-        background: '#D1D2D3 !important',
+        background: '#44bd32 !important',
         border: 'none !important',
-        color: '#1c1d21 !important',
+        color: '#fff !important',
         '&:hover': {
-            backgroundColor: '#fff !important',
+            backgroundColor: '#44bd32 !important',
         }
     },
     "&.flat": {
diff --git a/src/render/core/app/components/Footer/index.jsx b/src/render/core/app/components/Footer/index.jsx
index 0767cb3ce..b36b6fb94 100755
--- a/src/render/core/app/components/Footer/index.jsx
+++ b/src/render/core/app/components/Footer/index.jsx
@@ -5,7 +5,7 @@ import setting from 'package.json'
 const FooterWrapper = styled.div`
   height: auto;
   width: 100%;
-  position: fixed;
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: flex-start;
diff --git a/src/render/core/app/components/Image/index.jsx b/src/render/core/app/components/Image/index.jsx
index bda9ce8a8..aa9714734 100755
--- a/src/render/core/app/components/Image/index.jsx
+++ b/src/render/core/app/components/Image/index.jsx
@@ -29,7 +29,9 @@ export default class Image extends React.PureComponent {
 
   componentDidMount() {
     const img = this.img?.current
-    if (img && img.complete) { this.handleImageLoaded() }
+    if (img && img.complete) {
+      this.handleImageLoaded()
+    }
   }
 
   componentWillUnmount() {
diff --git a/src/render/core/app/components/MainLoader/index.jsx b/src/render/core/app/components/MainLoader/index.jsx
index 90085f736..6568a0a8f 100644
--- a/src/render/core/app/components/MainLoader/index.jsx
+++ b/src/render/core/app/components/MainLoader/index.jsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import Lottie from 'lottie-react'
-import loaderAnimation from '@render/media/img/watchit_logo.json'
 import {Typography} from "@mui/material";
+
 import BarLoader from "@components/BarLoader";
+import loaderAnimation from '@render/media/img/watchit_logo.json'
 
 export default class MainLoader extends React.Component {
   shouldComponentUpdate (nextProps) {
diff --git a/src/render/core/app/components/PlayerLoader/index.jsx b/src/render/core/app/components/PlayerLoader/index.jsx
index c3786dd46..80b4bc47c 100755
--- a/src/render/core/app/components/PlayerLoader/index.jsx
+++ b/src/render/core/app/components/PlayerLoader/index.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import Background from '@components/Background/'
 import BarLoader from '@components/BarLoader/'
 import ButtonClose from '@components/ButtonClose/'
-import Footer from '@components/Footer/'
 
 export default class PlayerLoader extends React.PureComponent {
   static get propTypes () {
@@ -20,7 +19,6 @@ export default class PlayerLoader extends React.PureComponent {
           {this.props.onClose && <ButtonClose onClick={this.props.onClose} />}
           <Background absolute />
           <BarLoader stateText={this.props.stateText} statePercent={this.props.statePercent} />
-          <Footer />
         </div>
       </div>
     )
diff --git a/src/render/core/app/components/PointsLoader/index.jsx b/src/render/core/app/components/PointsLoader/index.jsx
index ad455fe0c..67ffd4ec9 100755
--- a/src/render/core/app/components/PointsLoader/index.jsx
+++ b/src/render/core/app/components/PointsLoader/index.jsx
@@ -1,7 +1,9 @@
+import React from 'react'
 import styled from 'styled-components'
-// import Dots from '@render/media/img/spinner/three-dots.svg'
+import Dots from '@render/media/img/spinner/three-dots.svg'
 
 const PointsLoader = styled.img`
   height: 0.8rem;
 `
-export default PointsLoader
+PointsLoader.defaultProps = { src: Dots }
+export default React.memo(PointsLoader)
diff --git a/src/render/core/app/components/Poster/index.jsx b/src/render/core/app/components/Poster/index.jsx
index a40d51975..8040a362f 100644
--- a/src/render/core/app/components/Poster/index.jsx
+++ b/src/render/core/app/components/Poster/index.jsx
@@ -4,7 +4,6 @@ import { Box } from "@mui/material";
 
 import Image from "@components/Image";
 import setting from "@settings";
-
 import './index.scss';
 
 const ResultDetailsItem = styled.span`
@@ -13,7 +12,6 @@ const ResultDetailsItem = styled.span`
 `
 
 export const Poster = (props) => {
-
     if (props.empty)
         return <Box sx={{
             width: `${props?.screen?.itemWidth}px`,
@@ -71,4 +69,4 @@ export const Poster = (props) => {
     );
 };
 
-export default Poster;
+export default React.memo(Poster);
diff --git a/src/render/core/app/components/Search/index.jsx b/src/render/core/app/components/Search/index.jsx
index 394fe371e..aa63950d7 100644
--- a/src/render/core/app/components/Search/index.jsx
+++ b/src/render/core/app/components/Search/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
@@ -21,7 +21,7 @@ const Search = (props) => {
   const [searching, setSearching] = useState(false)
   const [searchResult, setSearchResult] = useState(false)
 
-  const handleSearch = (e) => {
+  const handleSearch = useCallback((e) => {
     // //The incoming value;
     const targetValue = e.target.value
     const invalidInput = utilHelper.invalidString(targetValue)
@@ -55,7 +55,7 @@ const Search = (props) => {
         })
       }
     }, 1000)
-  }
+  }, [])
 
   const handleClick = (id) => {
     setSearchResult(false)
diff --git a/src/render/core/app/pages/Home/index.jsx b/src/render/core/app/pages/Home/index.jsx
index 7c4e53c4c..da7534fc0 100755
--- a/src/render/core/app/pages/Home/index.jsx
+++ b/src/render/core/app/pages/Home/index.jsx
@@ -75,12 +75,14 @@ export default function MovieIndex() {
     }, []);
 
   const onRemoveCollection = async (collectionId) => {
-    await getCollectionDb().delete({ _id: collectionId });
     // filter the collection and avoid adding the removed to avoid re-slice..
+    // setIsLoading(true);
     const newCollection = collections.filter((el) => el != collectionId);
+    await getCollectionDb().delete({ _id: collectionId });
     setCollections(newCollection);
     setSelectedCollection(null);
     setIsAdding(true);
+    // setIsLoading(false);
   };
 
   useEffect(() => {
@@ -231,7 +233,7 @@ export const MainContent = styled(Box)(() => ({
   height: '100%',
   position: 'relative',
   borderTopLeftRadius: '1rem',
-  border: '1px solid #444',
+  // border: '1px solid #444',
   overflow: 'hidden',
   '&::-webkit-scrollbar': {
     width: '0',
diff --git a/src/render/core/settings.js b/src/render/core/settings.js
index 34dff0a27..9e539c02e 100755
--- a/src/render/core/settings.js
+++ b/src/render/core/settings.js
@@ -9,13 +9,8 @@ export default {
   gateways: () => {
     return [
       'https://ipfs.io',
-      // 'https://gateway.ipfs.io',
-      // 'https://cloudflare-ipfs.com',
-      // 'https://storry.tv',
-      // 'https://w3s.link',
-      // "https://10.via0.com",
-      // 'https://4everland.io',
-      'https://dweb.link'
+      'https://dweb.link',
+      'https://gw.watchit.movie/'
     ]
   },
   featuredCollections: [
@@ -26,7 +21,7 @@ export default {
       spanish: 'es',
       english: 'en'
     },
-    get revHash () {
+    get revHash() {
       const v = Object.values(this.hash)
       const k = Object.keys(this.hash)
       return v.reduce((o, i, index) => {
@@ -34,7 +29,7 @@ export default {
         return o
       }, {})
     },
-    get available () {
+    get available() {
       return Object.keys(this.hash)
     }
   },
diff --git a/src/render/css/app/default.scss b/src/render/css/app/default.scss
index 8d2aeeed9..64dbd6813 100755
--- a/src/render/css/app/default.scss
+++ b/src/render/css/app/default.scss
@@ -73,7 +73,6 @@ img {
 
   //Main movies lists
   .movies-box {
-    height: calc(100% - 7rem);
     width: 100% !important;
     overflow: hidden !important;
     z-index: 1;
@@ -530,25 +529,6 @@ img {
       }
     }
 
-    .chat-list {
-      .chat-item {
-        .item-text {
-          margin-top: -5px;
-
-          span {
-            font-size: 1rem;
-          }
-
-          strong {
-            font-size: 1.2rem;
-          }
-        }
-
-        .profile-picture-img {
-          @include mixins.border-radius(5px)
-        }
-      }
-    }
   }
 }
 
diff --git a/src/render/css/app/layout.scss b/src/render/css/app/layout.scss
index bcb931e92..56e140458 100755
--- a/src/render/css/app/layout.scss
+++ b/src/render/css/app/layout.scss
@@ -168,12 +168,12 @@
   }
 }
 
-.header_search {
+.header-search {
   position: relative;
   padding: 1rem;
   z-index: 2;
   box-shadow: none;
-  border-bottom: 1px solid #444;
+  border-bottom: 1px solid #18191c;
 
   & > div {
     padding: 0 !important;
diff --git a/src/render/css/app/player.queries.scss b/src/render/css/app/player.queries.scss
deleted file mode 100644
index 9770aef38..000000000
--- a/src/render/css/app/player.queries.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-
-@media (min-width: 300px) {
-  #drag-bar {
-    height: 3.5rem;
-
-    h5 {
-      font-size: 1.5rem !important;
-
-      img {
-        width: 40px;
-        height: 40px;
-      }
-    }
-
-    ul {
-      i {
-        font-size: 1.1rem !important;
-      }
-    }
-  }
-
-
-  .movie-player {
-    height: calc(100% - 3.5rem) !important;
-  }
-}
-
-@media (min-width: 992px) {
-  #drag-bar {
-    height: 4rem;
-
-    h5 {
-      font-size: 2rem !important;
-
-      img {
-        width: 50px;
-        height: 50px;
-      }
-    }
-
-    ul {
-      i {
-        font-size: 1.2rem !important;
-      }
-    }
-  }
-
-  .movie-player {
-    height: calc(100% - 4rem) !important;
-  }
-}
-
-@media (min-width: 1400px) {
-  .share-menu {
-    top: calc(5rem);
-  }
-
-  .btn-close {
-    top: 1.5rem;
-  }
-}
-
-@media (min-width: 2000px) {
-  #drag-bar {
-    height: 6rem;
-
-    h5 {
-      font-size: 3rem !important;
-
-      span, strong {
-        top: -12px !important;
-      }
-
-      img {
-        width: 70px;
-        height: 70px;
-      }
-    }
-
-    ul {
-      i {
-        font-size: 2rem !important;
-      }
-    }
-  }
-
-  .movie-player {
-    height: calc(100% - 6rem) !important;
-  }
-}
\ No newline at end of file
diff --git a/src/render/css/app/queries.scss b/src/render/css/app/queries.scss
deleted file mode 100755
index baf237419..000000000
--- a/src/render/css/app/queries.scss
+++ /dev/null
@@ -1,371 +0,0 @@
-/**MEDIA QUERIES*/
-//FIXED WIDTH
-
-/* Small devices (tablets, 768px and up) */
-//
-@media (min-width: 768px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 30%;
-      }
-
-      .item-text {
-        width: 70%;
-      }
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 34vw !important;
-  }
-}
-
-@media (min-width: 900px) {
-  //User profile box
-  .profile-media {
-    width: 30vw !important;
-  }
-}
-
-///* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 25%;
-      }
-
-      .item-text {
-        width: 75%;
-      }
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 28vw !important;
-  }
-
-  //.search-result-box {
-  //  .result-search-box-img {
-  //    display: inline-block !important;
-  //  }
-  //
-  //  .result-search-box-content {
-  //    margin-left: 1rem !important;
-  //  }
-  //}
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {
-  .video-stream {
-    .btn-close {
-      right: 1rem;
-    }
-
-    .chat-box-toggle {
-      right: 2rem !important;
-    }
-  }
-
-  //Main images
-  .movies-poster {
-    width: 14.26667% !important;
-
-    .placeholder-img {
-      max-height: 20vw !important;
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 26vw !important;
-  }
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1250px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 21%;
-      }
-
-      .item-text {
-        width: 79%;
-      }
-    }
-  }
-  //Main images
-  .movies-poster {
-    width: 14.26667% !important;
-  }
-
-  //Main images
-  .movie-details-poster {
-    width: 29.3% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 25vw !important;
-  }
-}
-
-@media (min-width: 1300px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 19%;
-      }
-
-      .item-text {
-        width: 81%;
-      }
-    }
-  }
-  //Main images
-  .movie-details-poster {
-    width: 27.33333% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 23vw !important;
-  }
-}
-
-@media (min-width: 1500px) {
-
-  //.row-list {
-  //  .row-img {
-  //    padding-right: 0.7rem !important;
-  //  }
-  //}
-
-  //Main images
-  .movie-details-poster {
-    width: 30.33333% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 20vw !important;
-  }
-}
-
-@media (min-width: 1600px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 16%;
-      }
-
-      .item-text {
-        width: 84%;
-      }
-    }
-  }
-
-  //Main images
-  .movies-poster {
-    width: 9.966667% !important;
-
-    .placeholder-img {
-      max-height: 13.9vw !important;
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 19vw !important;
-  }
-
-}
-
-@media (min-width: 1900px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 16%;
-      }
-
-      .item-text {
-        width: 84%;
-      }
-    }
-  }
-
-  .movie-details-poster {
-    width: 47vh !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 17vw !important;
-  }
-
-  //Main images
-  .movies-poster {
-    width: 7.66667% !important;
-
-    .placeholder-img {
-      max-height: 10.4vw !important;
-    }
-  }
-}
-
-
-//MEDIA QUERIES
-//FIXED HEIGHT
-//IN 600 ranges
-@media (max-height: 600px) {
-
-  .chat-list {
-    height: 75vh;
-  }
-
-  .movies-box {
-    height: 66vh;
-  }
-
-  .movie-details-description {
-    display: none;
-    //display: 22vh;
-  }
-}
-
-@media (min-height: 601px) {
-  .chat-list {
-    height: 75vh;
-  }
-  .movies-box {
-    height: 70vh;
-  }
-
-  .movie-details-description {
-    height: 20vh;
-  }
-}
-
-//IN 700 ranges
-@media (min-height: 701px) {
-  .chat-list {
-    height: 77vh;
-  }
-
-  .movies-box {
-    height: 69vh;
-  }
-
-  .movie-details-description {
-    height: 22vh;
-  }
-}
-
-@media (min-height: 740px) {
-  .chat-list {
-    height: 78vh;
-  }
-
-  .movies-box {
-    height: 70vh;
-  }
-}
-
-@media (min-height: 768px) {
-
-  .chat-list {
-    height: 79vh;
-  }
-
-  .movies-box {
-    height: 71vh;
-  }
-
-  .movie-details-description {
-    height: 20vh;
-  }
-}
-
-@media (min-height: 800px) {
-  .chat-list {
-    height: 80vh;
-  }
-
-  .movie-details-description {
-    height: 15vh;
-  }
-}
-
-@media (min-height: 850px) {
-
-  .chat-list {
-    height: 80.6vh;
-  }
-
-  .movies-box {
-    height: 75vh;
-  }
-
-  .movie-details-description {
-    height: 26vh;
-  }
-}
-
-@media (min-height: 950px) {
-  .chat-list {
-    height: 82vh;
-  }
-}
-
-@media (min-height: 1018px) {
-  .chat-list {
-    height: 82vh;
-  }
-
-  .movies-box {
-    height: 76vh;
-  }
-}
-
-@media (min-height: 1027px) {
-
-  .movies-box {
-    height: 76vh;
-  }
-
-  .movie-details-description {
-    height: 28vh;
-  }
-}
-
-@media (min-height: 1050px) {
-  .chat-list {
-    height: 82vh;
-  }
-
-  .movies-box {
-    height: 77vh;
-  }
-}
-
-@media (min-height: 1080px) {
-
-  .chat-list {
-    height: 83vh;
-  }
-
-  .movies-box {
-    height: 78vh;
-  }
-
-  .movie-details-description {
-    height: 30vh;
-  }
-}
-
-
diff --git a/src/render/css/app/queries.web.scss b/src/render/css/app/queries.web.scss
deleted file mode 100755
index 1de884aa2..000000000
--- a/src/render/css/app/queries.web.scss
+++ /dev/null
@@ -1,369 +0,0 @@
-/**MEDIA QUERIES*/
-//FIXED WIDTH
-
-/* Small devices (tablets, 768px and up) */
-//
-@media (min-width: 768px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 30%;
-      }
-
-      .item-text {
-        width: 70%;
-      }
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 34vw !important;
-  }
-}
-
-@media (min-width: 900px) {
-  //User profile box
-  .profile-media {
-    width: 30vw !important;
-  }
-}
-
-///* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 25%;
-      }
-
-      .item-text {
-        width: 75%;
-      }
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 28vw !important;
-  }
-
-  //.search-result-box {
-  //  .result-search-box-img {
-  //    display: inline-block !important;
-  //  }
-  //
-  //  .result-search-box-content {
-  //    margin-left: 1rem !important;
-  //  }
-  //}
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {
-  .video-stream {
-    .btn-close {
-      right: 1rem;
-    }
-
-    .chat-box-toggle {
-      right: 2rem !important;
-    }
-  }
-
-  //Main images
-  .movies-poster {
-    width: 14.26667% !important;
-
-    .placeholder-img {
-      max-height: 20vw !important;
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 26vw !important;
-  }
-}
-
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1250px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 21%;
-      }
-
-      .item-text {
-        width: 79%;
-      }
-    }
-  }
-  //Main images
-  .movies-poster {
-    width: 14.26667% !important;
-  }
-
-  //Main images
-  .movie-details-poster {
-    width: 29.3% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 25vw !important;
-  }
-}
-
-@media (min-width: 1300px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 19%;
-      }
-
-      .item-text {
-        width: 81%;
-      }
-    }
-  }
-  //Main images
-  .movie-details-poster {
-    width: 27.33333% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 23vw !important;
-  }
-}
-
-@media (min-width: 1500px) {
-
-  //.row-list {
-  //  .row-img {
-  //    padding-right: 0.7rem !important;
-  //  }
-  //}
-
-  //Main images
-  .movie-details-poster {
-    width: 30.33333% !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 20vw !important;
-  }
-}
-
-@media (min-width: 1600px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 16%;
-      }
-
-      .item-text {
-        width: 84%;
-      }
-    }
-  }
-
-  //Main images
-  .movies-poster {
-    width: 9.966667% !important;
-
-    .placeholder-img {
-      max-height: 13.9vw !important;
-    }
-  }
-
-  //User profile box
-  .profile-media {
-    width: 19vw !important;
-  }
-
-}
-
-@media (min-width: 1900px) {
-  .chat-list {
-    .chat-item {
-      .small-picture {
-        width: 16%;
-      }
-
-      .item-text {
-        width: 84%;
-      }
-    }
-  }
-
-  .movie-details-poster {
-    width: 47vh !important;
-  }
-
-  //User profile box
-  .profile-media {
-    width: 17vw !important;
-  }
-
-  //Main images
-  .movies-poster {
-    width: 7.66667% !important;
-
-    .placeholder-img {
-      max-height: 10.4vw !important;
-    }
-  }
-}
-
-
-//MEDIA QUERIES
-//FIXED HEIGHT
-//IN 600 ranges
-@media (max-height: 600px) {
-
-  .chat-list {
-    height: 75vh;
-  }
-
-  .movies-box {
-    height: 66vh;
-  }
-
-  .movie-details-description {
-    display: none;
-    //display: 22vh;
-  }
-}
-
-@media (min-height: 601px) {
-  .chat-list {
-    height: 75vh;
-  }
-  .movies-box {
-    height: 70vh;
-  }
-
-  .movie-details-description {
-    height: 20vh;
-  }
-}
-
-//IN 700 ranges
-@media (min-height: 701px) {
-  .chat-list {
-    height: 77vh;
-  }
-
-  .movies-box {
-    height: 69vh;
-  }
-
-  .movie-details-description {
-    height: 22vh;
-  }
-}
-
-@media (min-height: 740px) {
-  .chat-list {
-    height: 78vh;
-  }
-
-  .movies-box {
-    height: 70vh;
-  }
-}
-
-@media (min-height: 768px) {
-
-  .chat-list {
-    height: 79vh;
-  }
-
-  .movies-box {
-    height: 71vh;
-  }
-
-  .movie-details-description {
-    height: 20vh;
-  }
-}
-
-@media (min-height: 800px) {
-  .chat-list {
-    height: 80vh;
-  }
-
-  .movie-details-description {
-    height: 15vh;
-  }
-}
-
-@media (min-height: 850px) {
-
-  .chat-list {
-    height: 80.6vh;
-  }
-
-  .movies-box {
-    height: 75vh;
-  }
-
-  .movie-details-description {
-    height: 26vh;
-  }
-}
-
-@media (min-height: 950px) {
-  .chat-list {
-    height: 82vh;
-  }
-}
-
-@media (min-height: 1018px) {
-  .chat-list {
-    height: 82vh;
-  }
-
-  .movies-box {
-    height: 76vh;
-  }
-}
-
-@media (min-height: 1027px) {
-
-  .movies-box {
-    height: 76vh;
-  }
-
-  .movie-details-description {
-    height: 18vh;
-  }
-}
-
-@media (min-height: 1050px) {
-  .chat-list {
-    height: 82vh;
-  }
-
-  .movies-box {
-    height: 77vh;
-  }
-}
-
-@media (min-height: 1080px) {
-
-  .chat-list {
-    height: 83vh;
-  }
-
-  .movies-box {
-    height: 83vh;
-  }
-
-  .movie-details-description {
-    height: 18vh;
-  }
-}
diff --git a/src/render/index.scss b/src/render/index.scss
index c225510d2..6734ea57b 100644
--- a/src/render/index.scss
+++ b/src/render/index.scss
@@ -12,12 +12,14 @@
 @import  "css/app/state";
 @import  "css/app/base";
 @import  "css/app/layout";
-@import  "css/app/queries";
-@import  "css/app/player.queries";
 @import  "css/include/iconmoon/style.css";
 @import  "~plyr/src/sass/plyr";
 
 
 .hide-on-desktop {
   display: none;
+}
+
+.movies-box {
+  height: calc(100% - 11rem);
 }
\ No newline at end of file
diff --git a/src/render/index.web.js b/src/render/index.web.js
index f8d14f464..aae9794db 100644
--- a/src/render/index.web.js
+++ b/src/render/index.web.js
@@ -1,6 +1,5 @@
 // eslint-disable-next-line
-
-// import './wdyr';
+import './wdyr';
 
 import React from "react";
 import { Helia } from "@main/core/helia.mjs";
diff --git a/src/render/index.web.scss b/src/render/index.web.scss
index c8d6841ee..01336f912 100644
--- a/src/render/index.web.scss
+++ b/src/render/index.web.scss
@@ -12,10 +12,13 @@
 @import "css/app/state";
 @import "css/app/base";
 @import "css/app/layout";
-@import "css/app/queries.web";
 @import "css/include/iconmoon/style.css";
 @import "~plyr/src/sass/plyr";
 
 .hide-on-web {
   display: none;
+}
+
+.movies-box {
+  height: calc(100% - 7rem);
 }
\ No newline at end of file