design(fix): improve add collection

.github/workflows/publish.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - "master"
       - "v0.3.0"
+      - "v1.0.0"
 
 jobs:
   release:

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",

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,
       }),

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 = [

src/render/core/app/components/Blankslate/index.jsx

@@ -1,17 +1,17 @@
-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)(() => ({
   display: 'flex',
   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>
   );
 };

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

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 () {

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) => {

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": {

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;

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() {

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) {

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>
     )

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)

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);

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)

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',

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,15 +21,15 @@ 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) => {
         o[i] = k[index]
         return o
       }, {})
     },
-    get available () {
+    get available() {
       return Object.keys(this.hash)
     }
   },

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)
-        }
-      }
-    }
   }
 }