media: shuffle discovered providers when viewing content

packages/joy-media/package.json

@@ -14,6 +14,7 @@
     "aplayer": "^1.10.1",
     "dplayer": "^1.25.0",
     "ipfs-only-hash": "^1.0.2",
+    "lodash": "^4.17.11",
     "mime-types": "^2.1.22",
     "react-aplayer": "^1.0.0",
     "react-dplayer": "^0.2.3"

packages/joy-media/src/DiscoveryProvider.tsx

@@ -47,7 +47,7 @@ function newDiscoveryProvider ({ bootstrapNodes }: BootstrapNodes): DiscoveryPro
   const resolveAssetEndpoint = async (storageProvider: AccountId, contentId?: string, cancelToken?: CancelToken) => {
     const serviceInfoQuery = `${discoveryUrl}/discover/v0/${storageProvider.toString()}`;
 
-    const serviceInfo = await axios.get(serviceInfoQuery,{ cancelToken }) as any
+    const serviceInfo = await axios.get(serviceInfoQuery, {cancelToken}) as any
 
     if (!serviceInfo) {
       throw new Error('empty response to service discovery query')

packages/joy-media/src/View.tsx

@@ -19,6 +19,8 @@ import { DEFAULT_THUMBNAIL_URL, onImageError } from './utils';
 import { isEmptyStr } from '@polkadot/joy-utils/';
 import { MyAccountContext, MyAccountContextProps } from '@polkadot/joy-utils/MyAccountContext';
 
+import _ from 'lodash';
+
 type Asset = {
   iAmOwner: boolean,
   contentId: string,
@@ -238,16 +240,25 @@ class InnerPlay extends React.PureComponent<PlayProps, PlayState> {
         .filter(r => r.ready)
         .map(r => r.storage_provider);
 
+    // runtime doesn't currently guarantee unique set
+    readyProviders = _.uniqBy(readyProviders, provider => provider.toString());
+
     if (!readyProviders.length) {
-      this.setState({resolvingAsset: false, error: new Error('No Storage Provider found storing this content')});
+      this.setState({resolvingAsset: false, error: new Error('No Storage Providers found storing this content')});
       return
     }
 
-    // shuffle then loop over providers until we find one that responds
-    // TODO: readyProviders = readyProviders.shuffle()
+    console.log(`found ${readyProviders.length} providers ready to serve content: ${readyProviders}`);
+
+    readyProviders = _.shuffle(readyProviders);
+
     const { cancelSource } = this.state;
 
-    for(let provider; provider = readyProviders.pop();) {
+    // loop over providers until we find one that responds
+    while(readyProviders.length) {
+      const provider = readyProviders.shift();
+      if (!provider) continue;
+
       const {resolvingAsset} = this.state;
       if (!resolvingAsset) {
         break;
@@ -264,6 +275,7 @@ class InnerPlay extends React.PureComponent<PlayProps, PlayState> {
       }
 
       try {
+        console.log('trying', resolvedAssetUrl)
         let response = await axios.head(resolvedAssetUrl, {cancelToken: cancelSource.token})
         const contentType = response.headers['content-type'] || 'video/video';
         this.setState({ contentType, resolvedAssetUrl, resolvingAsset: false });