fetch pending videos

package.json

@@ -21,7 +21,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "remark-gfm": "^1.0.0",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "video-react": "^0.14.1"
   },
   "scripts": {
     "start": "HOST=localhost PORT=3030 react-scripts start",

src/components/Curation/index.jsx

@@ -35,8 +35,13 @@ class Curation extends React.Component<> {
 
   async fetchPending(offset: number = 0) {
     const { page } = this.state;
-    console.log(`Fetching assets (offset: ${offset})`);
-    const pending = await fetchPending(offset);
+    console.log(`Fetching videos`);
+    const videos = await fetchPending(offset);
+    if (!videos) return;
+    const pending = videos.filter(
+      (v) => v.videomediaDataObject && v.videomediaDataObject[0]
+    );
+    //console.log(`pending`, pending);
     this.setState({ pending, loading: false });
   }
 
@@ -62,8 +67,7 @@ class Curation extends React.Component<> {
   }
 
   setPage(page: number) {
-    this.setState({ page, loading: true, pending: [] });
-    this.fetchPending((page - 1) * 50);
+    this.setState({ page });
   }
   toggleHideWithoutThumb() {
     this.setState({ hideWithoutThumb: !this.state.hideWithoutThumb });
@@ -87,7 +91,6 @@ class Curation extends React.Component<> {
       hideWithoutThumb,
       ipfsLocations,
     } = this.state;
-    if (!pending) return <Loading target="pending videos" />;
 
     const showCurated = this.props.showCurated ? "" : "un";
     const noThumb = pending.filter((v) => !v.thumbnailPhotoDataObject);
@@ -109,7 +112,7 @@ class Curation extends React.Component<> {
             value={search}
             placeholder={
               loading
-                ? `Loading page ${page} ..`
+                ? `Loading videos ..`
                 : `Search in ${pending.length} uploads`
             }
             disabled={!pending.length}
@@ -139,132 +142,108 @@ class Curation extends React.Component<> {
             ``
           )}
 
-          {pending
-            .filter((v) => hideWithoutThumb || v.thumbnailPhotoDataObject)
-            .map((v: Video) => {
-              const {
-                id,
-                ipfsContentId,
-                mediaDataObject,
-                createdAt,
-                createdInBlock,
-                updatedAt,
-                size,
-              } = v;
-              const ipfs = v.mediaDataObject.joystreamContentId;
-              const {
-                categoryId,
-                channelId,
-                title,
-                description,
-                duration,
-                languageId,
-                licenseId,
-                hasMarketing,
-                isCensored,
-                isExplicit,
-                isFeatured,
-                mediaDataObjectId,
-                mediaMetadataId,
-                mediaUrls,
-                thumbnailPhotoDataObjectId,
-              } = hideWithoutThumb
-                ? v.mediaDataObject
-                  ? v.mediaDataObject
-                  : {}
-                : v.thumbnailPhotoDataObject;
-
-              return (
-                <div key={id}>
-                  <h4>
-                    <a href={`https://play.joystream.org/video/${id}`}>
-                      {title || `Video ${id}`}
-                    </a>
-                  </h4>
-
-                  <div className="d-flex flex-row mb-3">
-                    <div className="col-3">
+          {pending.slice((page - 1) * 50, page * 50).map((v: Video) => {
+            const ipfs = v.joystreamContentId;
+            const {
+              id,
+              createdAt,
+              updatedAt,
+              channelId,
+              categoryId,
+              title,
+              description,
+              duration,
+              thumbnailPhotoDataObjectId,
+              thumbnailPhotoUrls,
+              thumbnailPhotoAvailability,
+              languageId,
+              hasMarketing,
+              publishedBeforeJoystream,
+              isPublic,
+              isCensored,
+              isExplicit,
+              licenseId,
+              mediaDataObjectId,
+              mediaUrls,
+              mediaAvailability,
+              mediaMetadataId,
+              createdInBlock,
+              isFeatured,
+            } = v.videomediaDataObject[0];
+
+            return (
+              <div key={id}>
+                <h4>
+                  <a href={`https://play.joystream.org/video/${id}`}>
+                    {title || `Video ${id}`}
+                  </a>
+                </h4>
+
+                <div className="d-flex flex-row mb-3">
+                  <div className="col-3">
+                    <div>
                       <div>
-                        <div>
-                          created: {moment(createdAt).fromNow()} (
-                          <a
-                            href={`${domain}/#/explorer/query/${createdInBlock}`}
-                          >
-                            {createdInBlock}
-                          </a>
-                          )
-                        </div>
-                        <div>updated: {moment(updatedAt).fromNow()}</div>
-                        <div>
-                          Duration:{" "}
-                          {duration > 60
-                            ? `${(duration / 60).toFixed()} m, ${
-                                duration % 60
-                              } s`
-                            : `${duration || 0} s`}
-                        </div>
-                        <div>Size: {(size / 1000000).toFixed(1)} mb</div>
-                        <div>
-                          Channel:{" "}
-                          <a
-                            href={`https://play.joystream.org/video/${channelId}`}
-                          >
-                            {channelId}
-                          </a>
-                        </div>
-                        <div>License: {licenseId}</div>
-                        <div>Language: {languageId}</div>
+                        created: {moment(createdAt).fromNow()} (
+                        <a
+                          href={`${domain}/#/explorer/query/${createdInBlock}`}
+                        >
+                          {createdInBlock}
+                        </a>
+                        )
                       </div>
-
-                      {ipfsLocations[ipfs] ? (
-                        ``
-                      ) : (
-                        <div>
-                          <div
-                            className="px-3 display-none"
-                            style={{ width: "130px", minWidth: "130px" }}
-                          >
-                            <img
-                              onClick={() => selectVideo(id)}
-                              src={thumbnailPhotoDataObjectId}
-                              alt={thumbnailPhotoDataObjectId}
-                              width="100"
-                            />
-                          </div>
-                          <Button
-                            onClick={() => this.findProvider(ipfs)}
-                            variant="light"
-                            className="btn btn-sm"
-                          >
-                            Load
-                          </Button>
-                        </div>
-                      )}
+                      <div>updated: {moment(updatedAt).fromNow()}</div>
+                      <div>
+                        Duration:{" "}
+                        {duration > 60
+                          ? `${(duration / 60).toFixed()} m, ${duration % 60} s`
+                          : `${duration || 0} s`}
+                      </div>
+                      <div>Size: {(v.size / 1000000).toFixed(1)} mb</div>
+                      <div>
+                        Channel:{" "}
+                        <a
+                          href={`https://play.joystream.org/channel/${channelId}`}
+                        >
+                          {channelId}
+                        </a>
+                      </div>
+                      <div>License: {licenseId}</div>
+                      <div>Language: {languageId}</div>
+                      <div title={JSON.stringify(v)}>Details</div>
                     </div>
+                  </div>
+                  {ipfsLocations[ipfs] ? (
+                    <div className="col-5">
+                      <Player autoPlay playsInline src={ipfsLocations[ipfs]} />
+                    </div>
+                  ) : (
+                    ``
+                  )}
+
+                  <div className={ipfsLocations[ipfs] ? "col-4" : "col-9"}>
+                    <Buttons addVideoVote={addVideoVote} id={id} />
+                    <span onClick={() => selectVideo(id)}>
+                      <Curated curations={curations} videoId={id} />
+                    </span>
+                    <p>{description}</p>
                     {ipfsLocations[ipfs] ? (
-                      <div className="col-5">
-                        <Player
-                          autoPlay
-                          playsInline
-                          src={ipfsLocations[ipfs]}
-                        />
-                      </div>
-                    ) : (
                       ``
+                    ) : (
+                      <div>
+                        <Button
+                          onClick={() => this.findProvider(ipfs)}
+                          variant="light"
+                          className="btn btn-sm"
+                        >
+                          Load
+                        </Button>
+                      </div>
                     )}
-
-                    <div className={ipfsLocations[ipfs] ? "col-4" : "col-9"}>
-                      <Buttons addVideoVote={addVideoVote} id={id} />
-                      <span onClick={() => selectVideo(id)}>
-                        <Curated curations={curations} videoId={id} />
-                      </span>
-                      <p>{description}</p>
-                      <div title={JSON.stringify(v)}>Details</div>
-                    </div>
                   </div>
                 </div>
-              );
-            })}
+              </div>
+            );
+          })}
         </div>
       </div>
     );

src/lib/hydra.ts

@@ -0,0 +1,10 @@
+import { hydraLocation } from "../config";
+import axios from "axios";
+
+export const fetchPending = async (offset: number = 0) => {
+  const query = `query {\n  dataObjects(where: {liaisonJudgement_eq: PENDING}, offset: ${offset}, limit: 1000) { \n    id,\n    createdAt,\n    updatedAt,\n    createdInBlock,\n    typeId,\n    size,\n    liaison {\n      id,\n      createdAt,\n      updatedAt,\n      isActive,\n      workerId,\n      type,\n      metadata,\n    },\n    liaisonId,\n    liaisonJudgement,\n    ipfsContentId,\n    joystreamContentId,\n    videomediaDataObject {\n      id,\n      createdAt,\n      updatedAt,\n      channelId,\n      categoryId,\n      title,\n      description,\n      duration,\n      thumbnailPhotoDataObjectId,\n      thumbnailPhotoUrls,\n      thumbnailPhotoAvailability,\n      languageId,\n      hasMarketing,\n      publishedBeforeJoystream,\n      isPublic,\n      isCensored,\n      isExplicit,\n      licenseId,\n      mediaDataObjectId,\n      mediaUrls,\n      mediaAvailability,\n      mediaMetadataId,\n      createdInBlock,\n      isFeatured,\n    },\n }\n}`
+
+  const { data } = await axios.post(hydraLocation, { query });
+  //console.log(data)
+  return data.data.dataObjects;
+};

yarn.lock

@@ -1099,6 +1099,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.4.5", "@babel/runtime@^7.9.2":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -7828,6 +7835,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -10523,6 +10535,13 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redux@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -12534,6 +12553,17 @@ vfile@*, vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+video-react@^0.14.1:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/video-react/-/video-react-0.14.1.tgz#49ac7b19f1d039c0b3ebec82f81224bc2fa8bdf1"
+  integrity sha512-R5ClJo58iJcQLS+bGNmuAMc/fx9/xcJ6oLrAlbuu7MGI49Jh7b7o79aUdQMZvzuynT1NvhVmD4N/fTOEmWNDlg==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+    classnames "^2.2.6"
+    lodash.throttle "^4.1.1"
+    prop-types "^15.7.2"
+    redux "^4.0.1"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"