added: prefetch

config.json

@@ -2,7 +2,7 @@
   "info": {
     "name": "JSBooru",
     "url": "",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "author": "Gandum2077",
     "website": "https://github.com/Gandum2077/JSBooru",
     "types": 1

prefs.json

@@ -57,6 +57,13 @@
           "key": "orginal_image_first",
           "value": false
         },
+        {
+          "title": "Prefetch",
+          "type": "list",
+          "key": "prefetch",
+          "items": ["Off", "Next Page", "Next 2 Pages", "Next 3 Pages", "Next 4 Pages"],
+          "value": 0
+        },
         {
           "title": "Slideshow Intervals",
           "type": "integer",

scripts/subController.js

@@ -1,7 +1,8 @@
 const ImageView = require("./views/imageView");
 const FooterStackView = require("./views/footerStackView");
+const PrefetchView = require("./views/prefetchView");
 const InfoView = require("./views/infoView");
-const { ContentView, MaskView, Button } = require("./views/views");
+const { ContentView, MaskView, Button, Label } = require("./views/views");
 const database = require("./utils/database");
 
 class SubCotroller {
@@ -38,25 +39,27 @@ class SubCotroller {
       tapped: sender => {
         if (classThis.timer) {
           classThis.views.slideshowButton.symbol = "play";
-          classThis.stopTimer()
+          classThis.stopTimer();
         } else {
           classThis.views.slideshowButton.symbol = "pause";
-          classThis.startTimer()
+          classThis.startTimer();
         }
       }
     });
     this.views.shareButton = new Button({
       symbol: "square.and.arrow.up",
       tapped: sender => {
-        const image = classThis.views.imageView.image
+        const image = classThis.views.imageView.image;
         if (image) $share.sheet(image);
       }
     });
+    this.views.indexLabel = new Label();
     this.views.footerStackView = new FooterStackView({
       items: [
         this.views.favoritedButton.definition,
         this.views.slideshowButton.definition,
-        this.views.shareButton.definition
+        this.views.shareButton.definition,
+        this.views.indexLabel.definition
       ]
     });
     this.views.imageView = new ImageView({
@@ -66,11 +69,17 @@ class SubCotroller {
       },
       upEvent: () => {
         classThis.index -= 1;
-        classThis.refresh()
+        classThis.refresh();
       },
       downEvent: () => {
         classThis.index += 1;
-        classThis.refresh()
+        classThis.refresh();
+      }
+    });
+    this.views.prefetchView = new PrefetchView({
+      layout: (make, view) => {
+        make.size.equalTo($size(150, 30));
+        make.bottom.equalTo(view.super.bottom);
       }
     });
   }
@@ -95,7 +104,7 @@ class SubCotroller {
     const classThis = this;
     $ui.push({
       props: {
-        title: "",
+        titleView: this.views.prefetchView.definition,
         navButtons: this._defineNavButtons()
       },
       views: [this.views.main.definition],
@@ -115,7 +124,7 @@ class SubCotroller {
           });
         },
         dealloc: function() {
-          classThis.stopTimer()
+          classThis.stopTimer();
         }
       }
     });
@@ -124,13 +133,15 @@ class SubCotroller {
     );
     this.views.main.add(this.views.footerStackView.definition);
     this.views.main.add(this.views.imageView.definition);
-    $delay(0.2, () => {
+    $delay(0.3, () => {
       classThis.refresh();
     });
   }
 
   refresh() {
-    this.views.imageView.src = this.item.sampleUrl;
+    this.views.imageView.src = $prefs.get("orginal_image_first")
+      ? this.item.fileUrl
+      : this.item.sampleUrl;
     const id = this.item.id;
     const site = this.item.booru.domain;
     const favorited = database.queryPostFavorited({ site, id });
@@ -141,7 +152,18 @@ class SubCotroller {
       this.views.favoritedButton.symbol = "bookmark";
       this.views.favoritedButton.tintColor = $color("black");
     }
-    $ui.title = `${this.index + 1} / ${this.items.length}`;
+    this.views.indexLabel.text = `${this.index + 1} / ${this.items.length}`;
+    const prefetch = $prefs.get("prefetch") + 1;
+    this.views.prefetchView.urls = [
+      ...this.items
+        .slice(this.index, prefetch + this.index)
+        .map(n =>
+          $prefs.get("orginal_image_first") ? n.fileUrl : n.sampleUrl
+        ),
+      ...this.items
+        .slice(this.index + prefetch, 5 + this.index)
+        .map(n => n.previewUrl)
+    ];
   }
 
   presentInfoView() {

scripts/views/footerStackView.js

@@ -17,6 +17,7 @@ class FooterStackView extends BaseView {
     return {
        type: "stack",
        props: {
+         id: this.id,
          spacing: 0,
          distribution: $stackViewDistribution.fillEqually,
          axis: $stackViewAxis.horizontal,

scripts/views/prefetchView.js

@@ -0,0 +1,53 @@
+const BaseView = require("../components/baseView");
+
+class PrefetchView extends BaseView {
+  constructor({ layout } = {}) {
+    super();
+    this.layout = layout;
+  }
+
+  _defineView() {
+    return {
+      type: "matrix",
+      props: {
+        id: this.id,
+        frame: $rect(0, 0, 96, 32),
+        bgcolor: $color("clear"),
+        spacing: 1,
+        selectable: false,
+        scrollEnabled: false,
+        direction: $scrollDirection.horizontal,
+        template: {
+          views: [
+            {
+              type: "image",
+              props: {
+                id: "image",
+                contentMode: 1,
+                bgcolor: $color("clear")
+              },
+              layout: $layout.fill
+            }
+          ]
+        }
+      },
+      events: {
+        itemSize: (sender, indexPath) => {
+          if (indexPath.item === 0) {
+            return $size(30, 30);
+          } else {
+            return $size(15, 30);
+          }
+        }
+      }
+    };
+  }
+
+  set urls(urls) {
+    this.view.data = urls.map(n => {
+      return { image: { src: n } };
+    });
+  }
+}
+
+module.exports = PrefetchView;

scripts/views/views.js

@@ -4,7 +4,7 @@ const BaseView = require("../components/baseView");
 class ContentView extends BaseView {
   constructor({
     bgcolor = $color("white"),
-    layout = $layout.fill
+    layout = $layout.fillSafeArea
   } = {}) {
     super();
     this.bgcolor = bgcolor;
@@ -103,8 +103,37 @@ class Button extends BaseView {
   }
 }
 
+class Label extends BaseView {
+  constructor({
+    bgcolor = $color("white"),
+    layout
+  } = {}) {
+    super();
+    this.bgcolor = bgcolor;
+    this.layout = layout
+  }
+
+  _defineView() {
+    return {
+      type: "label",
+      props: {
+        id: this.id,
+        align: $align.center,
+        font: $font("bold", 18),
+        bgcolor: this.bgcolor
+      },
+      layout: this.layout
+    };
+  }
+
+  set text(text) {
+    this.view.text = text
+  }
+}
+
 module.exports = {
   ContentView,
   MaskView,
-  Button
+  Button,
+  Label
 }

strings/en.strings

@@ -25,7 +25,7 @@
 "Next Page" = "Next Page";
 "Next 2 Pages" = "Next 2 Pages";
 "Next 3 Pages" = "Next 3 Pages";
-"Next 5 Pages" = "Next 5 Pages";
+"Next 4 Pages" = "Next 4 Pages";
 "Slideshow Intervals" = "Slideshow Intervals";
 "STORAGE" = "STORAGE";
 "Clear Download Cache" = "Clear Download Cache";

strings/zh-Hans.strings

@@ -25,7 +25,7 @@
 "Next Page" = "提前一页";
 "Next 2 Pages" = "提前两页";
 "Next 3 Pages" = "提前三页";
-"Next 5 Pages" = "提前五页";
+"Next 4 Pages" = "提前四页";
 "Slideshow Intervals" = "幻灯片浏览速度";
 "STORAGE" = "存储";
 "Clear Download Cache" = "清空下载缓存";