Thumbnails for images (list, detail) and videos (list).

dokterbob · dokterbob · commit fcd374f1f2b8 · 2022-09-22T14:27:27.000+01:00
* Configuration for relevant variables.
* Separate thumbnail components wrapping v-img.
* Use dweb.link as default IPFS gateway and our own gateway for thumbnails.
* Auto scale thumbnails to container size.
* Failure indicator for unavailable thumbnails/images.
diff --git a/README.md b/README.md
@@ -49,14 +49,14 @@ Developers: you will likely want to run `npm run serve` in one terminal and `npm
 
 Ops will want to use `npm run build`, `npm run test` or `npm run test:coverage`, `npm run prettier:check`
 
-## NSFW api
+## Configuration
 
-This build uses an API to check nsfw content.
+The following environment variables may be used to configure the frontend.
 
-The default API endpoint to is: https://api.ipfs-search.com/nsfw/
-. This can be overridden by injecting environment variable `VITE_NSFW_API`
+### Variables
 
-The API call should be: `<VITE_NSFW_API><CID>`, so e.g.
-
-`https://api.ipfs-search.com/nsfw/QmSZzv7ux1LGwpehVcCMQ9ec945X6qE4qyjKDhCVwY25iw`
-https://api.ipfs-search.com/v1/nsfw/classify/
+- `VITE_IPFS_GATEWAY`: Gateway for URL generation. Default: `https://dweb.link`
+- `VITE_NSFW_API`: Endpoint for [nsfw-server](https://github.com/ipfs-search/nsfw-server). Default: `https://api.ipfs-search.com/v1/nsfw/classify/`
+- `VITE_NYATS_API`: Endpoint for [nyats](https://github.com/ipfs-search/nyats) (Not Yet Another Thumbnail Server) API. Default: `https://api.ipfs-search.com/v1/thumbnail/`
+- `VITE_NYATS_IPFS_GATEWAY`: Gateway for nyats. Default: `https://gw.dwebsearch.com`
+- `VITE_NYATS_IPNS_ROOT`: Root for thumbnails over IPNS. Default: `/ipns/12D3KooWPVobDRG9Mdmact3ejSe6UAFP8cevmw35HHR1ZDwCozSo/`
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "masonry-layout": "^4.2.2",
     "mime": "^3.0.0",
     "moment": "^2.29.4",
+    "nyats-client": "^0.2.0-alpha.2",
     "pretty-bytes": "^6.0.0",
     "regenerator-runtime": "^0.13.9",
     "ts-node": "^10.8.0",
@@ -57,6 +58,7 @@
     "prettier": "2.7.1",
     "sass": "^1.53.0",
     "typescript": "^4.7.3",
+    "url-join": "^5.0.0",
     "vite": "^3.0.2",
     "vite-plugin-vuetify": "^1.0.0-alpha.11",
     "vitest": "^0.13.1"
diff --git a/src/components/detailViewComponents/ImageDetail.vue b/src/components/detailViewComponents/ImageDetail.vue
@@ -1,22 +1,26 @@
 <script setup>
+import { mdiRobotDead } from "@mdi/js";
+
 import NsfwTooltip from "@/components/shared/nsfwTooltip.vue";
 import { detailProps } from "@/composables/useDetail";
 defineProps(detailProps);
-import getResourceURL from "@/helpers/resourceURL";
 
 import GenericDetail from "@/components/detailViewComponents/GenericDetail.vue";
 import { useBlurExplicit } from "@/composables/BlurExplicitImagesComposable";
 const { blurExplicit } = useBlurExplicit();
+
+import NyatsImg from "@/helpers/nyats/vuetify-img-cid.vue";
 </script>
 
 <template>
   <generic-detail :file="file">
     <v-row>
       <v-col cols="12" md="10" offset-md="1" :class="{ blurExplicit: blurExplicit(file) }">
-        <v-img
+        <nyats-img
+          :cid="file.hash"
+          type="image"
           :data-nsfw-classification="JSON.stringify(file.nsfwClassification)"
           :data-nsfw="file.nsfw"
-          :src="getResourceURL(file.hash)"
           max-height="400px"
           class="image-wrapper"
           :class="{ blurExplicit: blurExplicit(file) }"
@@ -26,8 +30,15 @@ const { blurExplicit } = useBlurExplicit();
               <v-progress-circular indeterminate color="ipfsPrimary" />
             </v-row>
           </template>
+
+          <template #failed>
+            <v-row class="fill-height ma-0" align="center" justify="center">
+              <v-icon color="grey" size="large" :icon="mdiRobotDead" />
+            </v-row>
+          </template>
+
           <NsfwTooltip :file="file" />
-        </v-img>
+        </nyats-img>
       </v-col>
     </v-row>
   </generic-detail>
diff --git a/src/components/searchViewComponents/ImageList.vue b/src/components/searchViewComponents/ImageList.vue
@@ -2,18 +2,17 @@
 import NsfwTooltip from "@/components/shared/nsfwTooltip.vue";
 import ListBase from "./BaseList.vue";
 import HoverCard from "./subcomponents/HoverCard.vue";
-import { useFileListComposable, imports } from "@/composables/useFileListComposable";
+import { useFileListComposable } from "@/composables/useFileListComposable";
 import { useBlurExplicit } from "@/composables/BlurExplicitImagesComposable";
 import { Types } from "@/helpers/typeHelper";
 import { useDisplay } from "vuetify";
+import { mdiRobotDead } from "@mdi/js";
+import NyatsImg from "@/helpers/nyats/vuetify-img-cid.vue";
 
 const fileType = Types.images;
 const { xs, smAndDown, mdAndDown } = useDisplay();
 
 const { slicedHits } = useFileListComposable({ fileType });
-
-const { getResourceURL } = imports;
-
 const { blurExplicit } = useBlurExplicit();
 </script>
 
@@ -30,8 +29,9 @@ const { blurExplicit } = useBlurExplicit();
           lg="2"
         >
           <hover-card :hit="hit" :index="index" :file-type="fileType">
-            <v-img
-              :src="getResourceURL(hit.hash)"
+            <nyats-img
+              :cid="hit.hash"
+              type="image"
               aspect-ratio="1"
               :class="{ blurExplicit: blurExplicit(hit) }"
               :data-nsfw-classification="JSON.stringify(hit.nsfwClassification)"
@@ -43,8 +43,15 @@ const { blurExplicit } = useBlurExplicit();
                   <v-progress-circular indeterminate color="ipfsPrimary" />
                 </v-row>
               </template>
+
+              <template #failed>
+                <v-row class="fill-height ma-0" align="center" justify="center">
+                  <v-icon color="grey" size="large" :icon="mdiRobotDead" />
+                </v-row>
+              </template>
+
               <NsfwTooltip :file="hit" />
-            </v-img>
+            </nyats-img>
           </hover-card>
         </v-col>
       </v-row>
diff --git a/src/components/searchViewComponents/VideoList.vue b/src/components/searchViewComponents/VideoList.vue
@@ -6,7 +6,8 @@ import CardContent from "@/components/searchViewComponents/subcomponents/generic
 import MediaCenterIcon from "@/components/searchViewComponents/subcomponents/MediaCenterIcon.vue";
 import { mdiVideo } from "@mdi/js";
 import { Types } from "@/helpers/typeHelper";
-import { picsum } from "@/helpers/picsum";
+import { mdiRobotDead, mdiTimerSand } from "@mdi/js";
+import NyatsImg from "@/helpers/nyats/vuetify-img-cid.vue";
 
 const fileType = Types.video;
 
@@ -19,15 +20,28 @@ const { slicedHits } = useFileListComposable({ fileType });
       <hover-card :hit="hit" :index="index" :file-type="fileType">
         <v-row>
           <v-col cols="12" sm="4" md="3" lg="2">
-            <v-img
+            <nyats-img
               class="ma-3 mr-sm-0"
               cover
               aspect-ratio="1.778"
-              :src="hit.src || picsum({ seed: hit.hash })"
               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
+              :cid="hit.hash"
+              type="video"
             >
               <media-center-icon :icon="mdiVideo" />
-            </v-img>
+
+              <template #placeholder>
+                <v-row class="fill-height ma-0" align="center" justify="center">
+                  <v-icon color="grey" size="large" :icon="mdiTimerSand" />
+                </v-row>
+              </template>
+
+              <template #failed>
+                <v-row class="fill-height ma-0" align="center" justify="center">
+                  <v-icon color="grey" size="large" :icon="mdiRobotDead" />
+                </v-row>
+              </template>
+            </nyats-img>
           </v-col>
           <v-col cols="12" sm="8" md="9" lg="10" class="py-sm-0 ml-sm-n6">
             <CardContent :hit="hit" />
diff --git a/src/helpers/nyats/vuetify-img-cid.vue b/src/helpers/nyats/vuetify-img-cid.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-img ref="img" :src="thumbURL()" v-bind="$attrs" @error="thumbErr()">
+    <template #placeholder>
+      <slot v-if="generateErr" name="failed" />
+      <slot v-else name="placeholder" />
+    </template>
+
+    <template #failed> <slot name="failed" /> </template>
+
+    <template #default>
+      <slot name="default" />
+    </template>
+  </v-img>
+</template>
+
+<script>
+import { DefaultConfig, GetClient } from "nyats-client";
+
+const config = {
+  endpoint: import.meta.env.VITE_NYATS_API || DefaultConfig.endpoint,
+  gatewayURL: import.meta.env.VITE_NYATS_IPFS_GATEWAY || DefaultConfig.gatewayURL,
+  ipnsRoot: import.meta.env.VITE_NYATS_IPNS_ROOT || DefaultConfig.ipnsRoot,
+};
+
+const { IPNSThumbnailURL, GenerateThumbnailURL } = GetClient(config);
+
+export default {
+  props: {
+    cid: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data: () => ({
+    ipnsErr: false,
+    generateErr: false,
+    width: null,
+    height: null,
+  }),
+  mounted() {
+    this.updateSize(this.$refs.img);
+  },
+  updated() {
+    this.updateSize(this.$refs.img);
+  },
+  methods: {
+    updateSize(el) {
+      if (el) {
+        this.height = el.$el.clientHeight;
+        this.width = el.$el.clientHeight;
+      }
+    },
+    thumbErr() {
+      if (this.ipnsErr) {
+        this.generateErr = true;
+      } else {
+        this.ipnsErr = true;
+      }
+    },
+    thumbURL() {
+      if (this.width && this.height) {
+        if (this.ipnsErr) {
+          return GenerateThumbnailURL(this.cid, this.width, this.height, this.type);
+        }
+
+        return IPNSThumbnailURL(this.cid, this.width, this.height);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/helpers/resourceURL.js b/src/helpers/resourceURL.js
@@ -1,7 +1,6 @@
-const gatewayURL = "https://gateway.ipfs.io";
+const gatewayURL = import.meta.env.VITE_IPFS_GATEWAY || "https://dweb.link";
 
-function getResourceURL(hash) {
-  return `${gatewayURL}/ipfs/${hash}`;
+export default function getResourceURL(hash) {
+  const resourcePath = `/ipfs/${hash}`;
+  return new URL(resourcePath, gatewayURL).toString();
 }
-
-export default getResourceURL;
