fix: preget albums covers before rendering them (#192)

src/main/methods/startCommunication/startIpfsBridge.js

@@ -30,7 +30,7 @@ const startIpfsBridge = ({ ipfsProcessPromise }) => {
     return ipfsProcess.call({ type: IPC_IPFS_CACHE_CIDS, payload: cids })
   }
 
-  const handleOpenCachedCIDsStream = async event => {
+  const handleopenCachedIPFSFilesStream = async event => {
     const ipfsProcess = await ipfsProcessPromise
     const handleMessage = ({ type, ...rest }) => {
       switch (type) {
@@ -54,7 +54,7 @@ const startIpfsBridge = ({ ipfsProcessPromise }) => {
     ipcMainTake(IPC_IPFS_SHARE_OBJECT, handleShareObject),
     ipcMainTake(IPC_IPFS_SHARE_FS_FILE, handleShareFsFile),
     ipcMainTake(IPC_IPFS_CACHE_CIDS, handleCacheFilesByCIDs),
-    ipcMainTake(IPC_IPFS_OPEN_CACHED_CIDS_STREAM, handleOpenCachedCIDsStream),
+    ipcMainTake(IPC_IPFS_OPEN_CACHED_CIDS_STREAM, handleopenCachedIPFSFilesStream),
     ipcMainTake(IPC_IPFS_GET_STATS, handleGetStats)
   ]
   return () => {

src/renderer/sagas/startApp/getApis/getCustomIpfsApi.js

@@ -34,10 +34,10 @@ function * getCustomIpfsApi () {
   const cacheIPFSFilesByCIDs = cids => {
     return rendererCalls(IPC_IPFS_CACHE_CIDS, cids)
   }
-  const openCachedCIDsStream = () => {
+  const openCachedIPFSFilesStream = () => {
     return rendererCalls(IPC_IPFS_OPEN_CACHED_CIDS_STREAM)
   }
-  const getCachedCIDsChannel = () => {
+  const getCachedIPFSFilesChannel = () => {
     return eventChannel(emit => {
       const handleMessage = (e, arg) => {
         emit(arg)
@@ -58,8 +58,8 @@ function * getCustomIpfsApi () {
     shareFsFileToIpfs,
     shareObjectToIpfs,
     cacheIPFSFilesByCIDs,
-    openCachedCIDsStream,
-    getCachedCIDsChannel,
+    openCachedIPFSFilesStream,
+    getCachedIPFSFilesChannel,
     getIPFSStats
   }
 }

src/renderer/sagas/startApp/startServices.js

@@ -8,10 +8,10 @@ import startAlbumsReciever from './startServices/startAblumsReciever'
 import startAlbumsPublisher from './startServices/startAlbumsPublisher'
 import startAlbumsSharingService from './startServices/startAlbumsSharingService'
 import startDiscoverPageService from './startServices/startDiscoverPageService'
-import startTracksCache from './startServices/startTracksCache'
 import startNotificationsService from './startServices/startNotificationsService'
 import startAlbumsCollectionInfo from './startServices/startAlbumsCollectionInfo'
 import startNewReleaseChecker from './startServices/startNewReleaseChecker'
+import startIPFSCachingService from './startServices/startIPFSCachingService'
 import startIndicatorsBarService from './startServices/startIndicatorsBarService'
 
 function * startServices (apis) {
@@ -21,7 +21,7 @@ function * startServices (apis) {
     spawn(startAlbumsPublisher, apis),
     spawn(startAlbumsSharingService, apis),
     spawn(startDiscoverPageService, apis),
-    spawn(startTracksCache, apis),
+    spawn(startIPFSCachingService, apis),
     spawn(startAlbumsCollectionInfo, apis),
     spawn(startNotificationsService, apis),
     spawn(startNewReleaseChecker, apis),

src/renderer/sagas/startApp/startServices/startIPFSCachingService.js

@@ -0,0 +1,14 @@
+import { fork } from 'redux-saga/effects'
+import startCachedIPFSFilesReciever from './startIPFSCachingService/startCachedIPFSFilesReciever'
+import startIPFSFilesCatch from './startIPFSCachingService/startIPFSFilesCatch'
+
+function * startIPFSCachingService (api) {
+  try {
+    yield fork(startCachedIPFSFilesReciever, api)
+    yield fork(startIPFSFilesCatch, api)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+export default startIPFSCachingService

src/renderer/sagas/startApp/startServices/startIPFSCachingService/startCachedIPFSFilesReciever.js

@@ -0,0 +1,18 @@
+import { call, put, take } from 'redux-saga/effects'
+import { systemIPFSFileCached } from '~actions/system'
+
+function * startCachedIPFSFilesReciever (api) {
+  const { getCachedIPFSFilesChannel, openCachedIPFSFilesStream } = api
+  yield call(openCachedIPFSFilesStream)
+  const channel = yield call(getCachedIPFSFilesChannel)
+  while (true) {
+    const { errorMessage, payload } = yield take(channel)
+    if (!errorMessage) {
+      yield put(systemIPFSFileCached(payload))
+    } else {
+      console.error(new Error(errorMessage))
+    }
+  }
+}
+
+export default startCachedIPFSFilesReciever

src/renderer/sagas/startApp/startServices/startIPFSCachingService/startIPFSFilesCatch.js

@@ -0,0 +1,16 @@
+import { call, takeEvery } from 'redux-saga/effects'
+import { systemPlayedTracksRecieved, systemQueuedTracksRecieved, systemDiscoverAlbumsFetchSucceed } from '~actions/system'
+import cachePlaylistTracks from './startIPFSFilesCatch/cachePlaylistTracks'
+import cacheDiscoverAlbumsCovers from './startIPFSFilesCatch/cacheDiscoverAlbumsCovers'
+
+function * startIPFSFilesCatch (api) {
+  yield call(cachePlaylistTracks, api)
+  yield takeEvery(
+    [ systemPlayedTracksRecieved, systemQueuedTracksRecieved ], cachePlaylistTracks, api
+  )
+  yield takeEvery(
+    systemDiscoverAlbumsFetchSucceed, cacheDiscoverAlbumsCovers, api
+  )
+}
+
+export default startIPFSFilesCatch

src/renderer/sagas/startApp/startServices/startIPFSCachingService/startIPFSFilesCatch/cacheDiscoverAlbumsCovers.js

@@ -0,0 +1,19 @@
+import { call } from 'redux-saga/effects'
+
+const handleMap = ({ albumCoverCid }) => albumCoverCid
+
+const getAlbumsCoversCIDs = (albums) => {
+  return albums.map(handleMap)
+}
+
+function * cacheDiscoverAlbumsCovers (api, { payload }) {
+  const { cacheIPFSFilesByCIDs } = api
+  const uncachedCIDs = getAlbumsCoversCIDs(payload)
+  try {
+    yield call(cacheIPFSFilesByCIDs, uncachedCIDs)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+export default cacheDiscoverAlbumsCovers

src/renderer/sagas/startApp/startServices/startTracksCache/cachePlaylistTracks.js → src/renderer/sagas/startApp/startServices/startIPFSCachingService/startIPFSFilesCatch/cachePlaylistTracks.js

@@ -3,9 +3,9 @@ import { getPlaylistUncachedTracksCIDs } from '#selectors'
 
 function * cachePlaylistTracks (api) {
   const { cacheIPFSFilesByCIDs } = api
-  const uncachedTracks = yield select(getPlaylistUncachedTracksCIDs)
+  const uncachedCIDs = yield select(getPlaylistUncachedTracksCIDs)
   try {
-    yield call(cacheIPFSFilesByCIDs, uncachedTracks)
+    yield call(cacheIPFSFilesByCIDs, uncachedCIDs)
   } catch (e) {
     console.error(e)
   }

src/renderer/state/actions/system.js

@@ -49,8 +49,7 @@ export const systemPlaylistCleared = c('PLAYLIST_CLEARED')
 export const systemPlayedTracksRecieved = c('PLAYED_TRACKS_RECIEVED')
 export const systemQueuedTracksRecieved = c('QUEUED_TRACKS_RECIEVED')
 
-export const systemCacheTracks = c('CACHE_TRACKS')
-export const systemCacheTrackSucceed = c('CACHE_TRACK_SUCCEED')
+export const systemIPFSFileCached = c('IPFS_FILE_CACHED')
 
 export const systemRepeatedPlaylistEnded = c('REPEATED_PLAYLIST_ENDED')
 

src/renderer/state/domains/cachedCIDs.js

@@ -1,5 +1,7 @@
-import { systemCacheTrackSucceed, systemPlayedTracksRecieved } from '~actions/system'
-import { uiPlaylistCleared } from '~actions/ui'
+
+import {
+  systemIPFSFileCached
+} from '~actions/system'
 
 const DOMAIN = 'cachedCIDs'
 
@@ -10,11 +12,11 @@ export const getCachedCIDs = state => state[DOMAIN]
 const reducer = (state = initialState, action) => {
   const { type, payload } = action
   switch (type) {
-    case systemCacheTrackSucceed.toString():
-      return { ...state, [payload]: true }
-    case uiPlaylistCleared.toString():
-    case systemPlayedTracksRecieved.toString():
-      return {}
+    case systemIPFSFileCached.toString():
+      return {
+        ...state,
+        [payload]: true
+      }
     default:
       return state
   }

src/renderer/state/domains/localAudiosCIDs.js

@@ -0,0 +1,38 @@
+import { systemPlayedTracksRecieved, systemIPFSFileCached, systemQueuedTracksRecieved } from '~actions/system'
+import { uiPlaylistCleared } from '~actions/ui'
+
+const DOMAIN = 'localAudiosCIDs'
+
+const initialState = {}
+
+export const getLocalAudiosCIDs = state => state[DOMAIN]
+
+const handleReduceTracks = (acc, track) => {
+  acc[track.audio] = false
+  return acc
+}
+
+const reducer = (state = initialState, action) => {
+  const { type, payload } = action
+  switch (type) {
+    case systemIPFSFileCached.toString():
+      if (state[payload] === false) {
+        return { ...state, [payload]: true }
+      }
+      return state
+    case systemPlayedTracksRecieved.toString():
+      return payload.reduce(handleReduceTracks, {})
+    case systemQueuedTracksRecieved.toString():
+      const newCids = payload.reduce(handleReduceTracks, {})
+      return {
+        ...newCids,
+        ...state
+      }
+    case uiPlaylistCleared.toString():
+      return {}
+    default:
+      return state
+  }
+}
+
+export default reducer

src/renderer/state/domains/localCoversCIDs.js

@@ -0,0 +1,36 @@
+import {
+  systemIPFSFileCached, systemDiscoverAlbumsFetchSucceed
+} from '~actions/system'
+import {
+  uiDiscoverPageClosed
+} from '~actions/ui'
+
+const DOMAIN = 'localCoversCIDs'
+
+const initialState = {}
+
+export const getLocalCoversCIDs = state => state[DOMAIN]
+
+const handleReduce = (acc, album) => {
+  acc[album.albumCoverCid] = false
+  return acc
+}
+
+const reducer = (state = initialState, action) => {
+  const { type, payload } = action
+  switch (type) {
+    case systemIPFSFileCached.toString():
+      if (state[payload] === false) {
+        return { ...state, [payload]: true }
+      }
+      return state
+    case systemDiscoverAlbumsFetchSucceed.toString():
+      return payload.reduce(handleReduce, {})
+    case uiDiscoverPageClosed.toString():
+      return {}
+    default:
+      return state
+  }
+}
+
+export default reducer

src/renderer/state/selectors/derived.js

@@ -10,10 +10,10 @@ import {
   getPlaylistTracksByIndex,
   getShareCandidates,
   getNotifications,
-  getIpfsGateway,
-  getCachedCIDs
+  getIpfsGateway
 } from '#selectors'
 import { getIpfsApiEndpoint } from '../domains/ipfsInfo'
+import { getCachedCIDs } from '../domains/cachedCIDs'
 
 export const isAppReady = state => getAppStartProgress(state) === 100
 
@@ -45,15 +45,15 @@ export const getPlaylistTracksIndexes = createSelector(
 
 export const getPlaylistTracksCount = state => getPlaylistTracksIndexes(state).length
 
-export const getPlaylistTracksCids = createSelector(
+export const getPlaylistTracksCIDs = createSelector(
   getPlaylistTracksByIndex,
   tracks => {
     return Object.values(tracks).map(({ audio }) => audio)
   }
 )
 
 export const getPlaylistUncachedTracksCIDs = createSelector(
-  [ getPlaylistTracksCids, getCachedCIDs ],
+  [ getPlaylistTracksCIDs, getCachedCIDs ],
   (tracksCIDs, cachedCIDs) => {
     return tracksCIDs.filter(cid => !cachedCIDs[cid])
   }

src/renderer/view/App/ReadyScreen/Page/DiscoverPage/DiscoverPageBody/FeedScreen/Album.css

@@ -49,4 +49,24 @@
 .album__actions-button:active {
   background-color: var(--accent-color);
   color: white;
+}
+
+.album__cover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0.25em;
+  object-fit: contain;
+}
+
+.album__cover-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0.25em;
+  object-fit: contain;
 }

src/renderer/view/App/ReadyScreen/Page/DiscoverPage/DiscoverPageBody/FeedScreen/Album.jsx

@@ -3,15 +3,15 @@ import propTypes from 'prop-types'
 import MdPlay from 'react-icons/lib/md/play-arrow'
 import MdAdd from 'react-icons/lib/md/playlist-add'
 
+import NoCover from '~components/DiskIcon.jsx'
+
 import {
   E2E_DISCOVER_ALBUM_QUEUE_BUTTON,
   E2E_DISCOVER_ALBUM_PLAY_BUTTON,
   E2E_DISCOVER_ALBUM_TITLE,
   E2E_DISCOVER_ALBUM_ARTIST
 } from '~data/e2eConstants'
 
-import CoverImage from './Album/CoverImage.jsx'
-
 import './Album.css'
 
 class Album extends React.Component {
@@ -41,7 +41,8 @@ class Album extends React.Component {
       hasSelectedView,
       albumTitle,
       albumArtist,
-      albumCoverURL
+      albumCoverURL,
+      isCoverCached
     } = this.props
 
     return (
@@ -51,7 +52,17 @@ class Album extends React.Component {
             onClick={this.handleAlbumClick}
             className='album__cover'
           >
-            <CoverImage src={albumCoverURL} />
+            {
+              isCoverCached ? (
+                <img
+                  className='album__cover-image'
+                  src={albumCoverURL}
+                  onLoad={this.handleImageLoad}
+                />
+              ) : (
+                <NoCover />
+              )
+            }
           </button>
           {
             !hasSelectedView && (
@@ -100,7 +111,8 @@ Album.propTypes = {
   albumCid: propTypes.string.isRequired,
   albumArtist: propTypes.string.isRequired,
   albumTitle: propTypes.string.isRequired,
-  albumCoverURL: propTypes.string.isRequired
+  albumCoverURL: propTypes.string.isRequired,
+  isCoverCached: propTypes.bool.isRequired
 }
 
 export default Album