v2.2.0

Upgrade to Java 11
Embedd JRE within the app

.gitignore

@@ -2,4 +2,5 @@
 /**/*/node_modules
 /**/*/target
 /**/*/build-dir
+/**/*/java-runtime
 .idea

CHANGELOG.md

@@ -1,5 +1,79 @@
 # Changelog
 
+## [2.2.0] - 2019-10-01
+### Added
+- Embedd JRE within the app
+### Changed
+- Fix 'Start' on pending items
+- Upgrade to Java 11
+
+## [2.1.0] - 2019-09-30
+### Added
+- Add a create a subfolder per thread option
+
+## [2.0.4] - 2019-09-27
+### Changed
+- Fix some issues with ImxHost
+
+## [2.0.3] - 2019-09-23
+### Changed
+- Update deb dependencies
+
+## [2.0.2] - 2019-09-23
+### Changed
+- Add portable mode
+
+## [2.0.1] - 2019-09-22
+### Changed
+- Change app name
+
+## [2.0.0] - 2019-09-22
+### Added
+- Add sub folder option
+- Add clear finished option
+### Changed
+- UI enhancements
+- Bug fixes
+- Change data and log paths
+
+## [1.6.5] - 2019-09-18
+### Changed
+- electron update
+
+## [1.6.4] - 2019-09-18
+### Changed
+- Change menu item name
+
+## [1.6.3] - 2019-09-18
+### Changed
+- Better multithread management
+- Fix partial state UI
+
+## [1.6.2] - 2019-09-17
+### Changed
+- Rework UI colors
+- Fix scan input bug
+
+## [1.6.1] - 2019-09-16
+### Changed
+- Rework UI
+- Fix clipboard monitoring
+
+## [1.6.0] - 2019-09-15
+### Changed
+- Rework the UI
+- Add a dark theme
+- Fix the force ordering bug
+- Other bug fixes
+
+## [1.5.2] - 2019-09-01
+### Added
+- imx.to host fix
+
+## [1.5.1] - 2019-08-24
+### Added
+- Bug fixes
+
 ## [1.5.0] - 2019-08-24
 ### Added
 - Display logged in user

pom.xml

@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>tn.mnlr</groupId>
     <artifactId>vripper</artifactId>
-    <version>1.5.0</version>
+    <version>2.2.0</version>
     <packaging>pom</packaging>
     <parent>
         <groupId>org.springframework.boot</groupId>

vripper-electron/main.js

@@ -34,16 +34,15 @@ if (!commandExists("java")) {
 function createWindow() {
   let icon;
   if(process.platform === "win32") {
-    icon = path.join(__dirname, `icon.ico`);
+    icon = __dirname + '/icon.ico';
   } else {
-    icon = path.join(__dirname, `icon.icns`);
+    icon = __dirname + '/icon.png';
   }
   win = new BrowserWindow({
     width: 1024,
     height: 800,
-    minWidth: 640,
-    minHeight: 480,
-    frame: false,
+    minWidth: 800,
+    minHeight: 600,
     webPreferences: {
       nodeIntegration: true
     },
@@ -51,6 +50,8 @@ function createWindow() {
   });
 
   win.removeMenu();
+  win.setMenu(null);
+  win.setMenuBarVisibility(false);
 
   win.loadURL(
     url.format({
@@ -72,7 +73,8 @@ getPort().then(port => {
   ipcMain.on("get-port", event => {
     event.reply("port", port);
   });
-  vripperServer = spawn("java", [
+  vripperServer = spawn(appDir !== undefined ? path.join(appDir, "java-runtime/bin/java") :
+  path.join(app.getPath('exe'), "../java-runtime/bin/java"), [
     "-Xms256m",
     "-Xmx1024m",
     "-Dvripper.server.port=" + port,

vripper-electron/package.json

@@ -1,12 +1,14 @@
 {
   "name": "vripper-electron",
-  "version": "1.5.0",
-  "description": "",
+  "version": "2.2.0",
+  "description": "A ripper for vipergirls.to built using web technolgies",
   "main": "main.js",
-  "author": "",
+  "author": "death-claw <53543762+death-claw@users.noreply.github.com>",
+  "homepage": "https://github.com/death-claw/vripper-project",
   "license": "ISC",
   "build": {
     "appId": "tn.mnlr.vripper",
+    "productName": "V Ripper",
     "files": [
       "**/*",
       "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
@@ -29,24 +31,51 @@
       {
         "from": "../vripper-server/target/vripper-server-${version}-electron.jar",
         "to": "bin/vripper-server.jar"
+      },
+      {
+        "from": "java-runtime",
+        "to": "java-runtime"
       }
     ],
     "win": {
-      "target": "nsis"
+      "icon": "icon.png",
+      "target": [
+        "nsis"
+      ]
+    },
+    "nsis": {
+      "createDesktopShortcut": "always",
+      "oneClick": false,
+      "perMachine": false
     },
     "linux": {
+      "synopsis": "vipergirls.to ripper",
+      "category": "Utility",
+      "packageCategory": "Utility",
+      "icon": "icons",
       "target": [
-        "zip"
+        "deb"
+      ]
+    },
+    "deb": {
+      "depends": [
+        "gconf2",
+        "gconf-service",
+        "libnotify4",
+        "libappindicator1",
+        "libxtst6",
+        "libnss3",
+        "openjdk-8-jre"
       ]
     }
   },
   "scripts": {
     "start": "electron .",
-    "dist": "node pre-build.js && build"
+    "dist": "node pre-build.js && electron-builder"
   },
   "devDependencies": {
-    "electron": "^5.0.5",
-    "electron-builder": "^20.44.4"
+    "electron": "^6.0.9",
+    "electron-builder": "^21.2.0"
   },
   "dependencies": {
     "axios": "^0.19.0",

vripper-electron/pom.xml

@@ -5,7 +5,7 @@
   <parent>
     <groupId>tn.mnlr</groupId>
     <artifactId>vripper</artifactId>
-      <version>1.5.0</version>
+      <version>2.2.0</version>
   </parent>
   <artifactId>vripper-electron</artifactId>
   <name>vripper-electron</name>

vripper-electron/pre-build.js

@@ -2,7 +2,7 @@ const cheerio = require('cheerio');
 const fs = require('fs');
 const rimraf = require("rimraf");
 const copydir = require("copy-dir");
-
+const { execSync } = require("child_process");
 
 rimraf.sync('./build/vripper-ui');
 copydir.sync('../vripper-ui/dist/vripper-ui', './build/vripper-ui', {});
@@ -16,3 +16,6 @@ $('body').prepend(`<script>require('../renderer.js')</script>`);
 
 fs.writeFileSync('./build/vripper-ui/index.html', $.html());
 
+console.log('Building runtime environment');
+rimraf.sync('java-runtime');
+execSync('jlink --no-header-files --no-man-pages --compress=2 --strip-debug --add-modules java.base,java.desktop,java.instrument,java.management,java.naming,java.prefs,java.rmi,java.scripting,java.security.jgss,java.sql,jdk.httpserver,jdk.unsupported,jdk.crypto.ec --output java-runtime');

vripper-electron/renderer.js

@@ -1,12 +1,3 @@
 console.log("renderer intialized");
-const customTitlebar = require("custom-electron-titlebar");
-const electron = require("electron").remote;
 const contextMenu = require("electron-context-menu");
-
-contextMenu({});
-const menu = new electron.Menu();
-const titlebar = new customTitlebar.Titlebar({
-  backgroundColor: customTitlebar.Color.fromHex("#3f51b5"),
-  menu: menu
-});
-titlebar.updateTitle("Viper Ripper");
+contextMenu({});

vripper-server/pom.xml

@@ -5,14 +5,14 @@
     <parent>
         <groupId>tn.mnlr</groupId>
         <artifactId>vripper</artifactId>
-        <version>1.5.0</version>
+        <version>2.2.0</version>
     </parent>
     <artifactId>vripper-server</artifactId>
     <name>vripper-server</name>
     <description>vripper-server</description>
 
     <properties>
-        <java.version>1.8</java.version>
+        <java.version>11</java.version>
     </properties>
 
     <dependencies>

vripper-server/src/main/java/tn/mnlr/vripper/VripperApplication.java

@@ -1,8 +1,10 @@
 package tn.mnlr.vripper;
 
+import lombok.Getter;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.boot.CommandLineRunner;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
@@ -10,9 +12,9 @@ import org.springframework.stereotype.Component;
 import tn.mnlr.vripper.exception.VripperException;
 import tn.mnlr.vripper.services.AppSettingsService;
 import tn.mnlr.vripper.services.PersistenceService;
-import tn.mnlr.vripper.services.PostParser;
 import tn.mnlr.vripper.services.VipergirlsAuthService;
 
+import javax.annotation.PostConstruct;
 import java.io.File;
 import java.util.concurrent.ExecutorService;
 import java.util.concurrent.Executors;
@@ -22,7 +24,7 @@ public class VripperApplication {
 
     private static final Logger logger = LoggerFactory.getLogger(VripperApplication.class);
 
-    public static final String dataPath = System.getProperty("vripper.datapath", ".") + File.separator + "data.json";
+//    public static final String dataPath = System.getProperty("user.home", ".") + File.separator + ".vripper" + File.separator + "data.json";
 
     public static final ExecutorService commonExecutor = Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors());
 
@@ -47,6 +49,17 @@ public class VripperApplication {
         @Autowired
         private AppSettingsService appSettingsService;
 
+        @Value("${base.dir}")
+        private String baseDir;
+
+        @Getter
+        private String dataPath;
+
+        @PostConstruct
+        public void init() {
+            dataPath = baseDir + File.separator + ".vripper" + File.separator + "data.json";
+        }
+
         @Override
         public void run(String... args) {
 
@@ -65,23 +78,4 @@ public class VripperApplication {
             Runtime.getRuntime().addShutdownHook(new Thread(SpringContext::close));
         }
     }
-
-    @Component
-    public class TestRunner implements CommandLineRunner {
-
-        @Autowired
-        private PostParser postParser;
-
-        @Override
-        public void run(String... args) throws Exception {
-
-//            long start = System.currentTimeMillis();
-//            PostParser.VRThreadParser vrThreadParser = postParser.new VRThreadParser("600408");
-//            vrThreadParser.getPostPublishProcessor().subscribe(e -> System.out.println("new Post: " + e.getPostId()));
-//            vrThreadParser.parse();
-//            System.out.println("Total time: " + (System.currentTimeMillis() - start));
-        }
-    }
 }
-
-

vripper-server/src/main/java/tn/mnlr/vripper/entities/Post.java

@@ -26,12 +26,12 @@ public class Post {
 
     private String postId;
 
+    private String threadTitle;
+
     private String threadId;
 
     private String title;
 
-    private String postCounter;
-
     private String url;
 
     private List<Image> images;
@@ -46,13 +46,17 @@ public class Post {
 
     private boolean removed = false;
 
-    public Post(String title, String url, List<Image> images, Map<String, Object> metadata, String postId, String threadId) {
+    private String forum;
+
+    public Post(String title, String url, List<Image> images, Map<String, Object> metadata, String postId, String threadId, String threadTitle, String forum) {
         this.title = title;
         this.url = url;
         this.images = images;
         this.metadata = metadata;
         this.postId = postId;
+        this.forum = forum;
         this.threadId = threadId;
+        this.threadTitle = threadTitle;
         if (this.images.contains(null)) {
             System.out.println("Oops");
         }

vripper-server/src/main/java/tn/mnlr/vripper/host/Host.java

@@ -45,6 +45,9 @@ abstract public class Host {
     @Autowired
     private AppSettingsService appSettingsService;
 
+    @Autowired
+    private AppStateService appStateService;
+
     @Autowired
     private ConnectionManager cm;
 
@@ -64,6 +67,8 @@ abstract public class Host {
 
         try {
 
+            appStateService.postDownloadingUpdate(image.getPostId());
+
             imageFileData.setPageUrl(image.getUrl());
 
             /**

vripper-server/src/main/java/tn/mnlr/vripper/host/ImxHost.java

@@ -29,7 +29,7 @@ public class ImxHost extends Host {
     private static final Logger logger = LoggerFactory.getLogger(ImxHost.class);
 
     private static final String host = "imx.to";
-    public static final String CONTINUE_BUTTON_XPATH = "//div[@id='continuetoimage']";
+    public static final String CONTINUE_BUTTON_XPATH = "//*[@name='imgContinue']";
     public static final String IMG_XPATH = "//img[@class='centred']";
 
     @Autowired
@@ -41,25 +41,34 @@ public class ImxHost extends Host {
     }
 
     @Override
-    protected void setNameAndUrl(final String url, final ImageFileData imageFileData) throws HostException {
+    protected void setNameAndUrl(final String _url, final ImageFileData imageFileData) throws HostException {
 
-        Document doc = getResponse(url).getDocument();
+        String url = _url.replace("http://", "https://");
+        Response resp = getResponse(url);
+        Document doc = resp.getDocument();
 
         Node contDiv;
+        String value = null;
         try {
             logger.info(String.format("Looking for xpath expression %s in %s", CONTINUE_BUTTON_XPATH, url));
             contDiv = xpathService.getAsNode(doc, CONTINUE_BUTTON_XPATH);
+            Node node = contDiv.getAttributes().getNamedItem("value");
+            if (node != null) {
+                value = node.getTextContent();
+            }
         } catch (XpathException e) {
             throw new HostException(e);
         }
 
         if (contDiv != null) {
+            if (value == null) {
+                throw new HostException("Failed to obtain value attribute from continue input");
+            }
             logger.info(String.format("Click button found for %s", url));
             HttpClient client = cm.getClient().build();
             HttpPost httpPost = cm.buildHttpPost(url);
-            httpPost.addHeader("Referer", url);
             List<NameValuePair> params = new ArrayList<>();
-            params.add(new BasicNameValuePair("imgContinue", "Continue to image ... "));
+            params.add(new BasicNameValuePair("imgContinue", value));
             try {
                 httpPost.setEntity(new UrlEncodedFormEntity(params));
             } catch (Exception e) {

vripper-server/src/main/java/tn/mnlr/vripper/q/DownloadQ.java

@@ -34,12 +34,14 @@ public class DownloadQ {
     @Getter
     private boolean notPauseQ = true;
 
-    public synchronized void put(Image image) throws InterruptedException {
-        logger.info(String.format("Enqueuing a job for %s", image.getUrl()));
-        image.init();
-        DownloadJob downloadJob = new DownloadJob(image);
-        downloadQ.put(downloadJob);
-        appStateService.newDownloadJob(downloadJob);
+    public void put(Image image) throws InterruptedException {
+        synchronized (appStateService) {
+            logger.info(String.format("Enqueuing a job for %s", image.getUrl()));
+            image.init();
+            DownloadJob downloadJob = new DownloadJob(image);
+            downloadQ.put(downloadJob);
+            appStateService.newDownloadJob(downloadJob);
+        }
     }
 
     public DownloadJob take() throws InterruptedException {
@@ -48,69 +50,18 @@ public class DownloadQ {
         return downloadJob;
     }
 
-    public void enqueue(Post post) throws InterruptedException {
+    public synchronized void enqueue(Post post) throws InterruptedException {
         for (Image image : post.getImages()) {
             put(image);
         }
     }
 
     public void restart(String postId) throws InterruptedException {
-        if (appStateService.getRunningPosts().get(postId) != null && appStateService.getRunningPosts().get(postId).get() > 0) {
-            logger.warn(String.format("Cannot restart, jobs are currently running for post id %s", postId));
-            return;
-        }
-        List<Image> images = appStateService.getPost(postId)
-                .getImages()
-                .stream()
-                .filter(e -> !e.getStatus().equals(Image.Status.COMPLETE))
-                .collect(Collectors.toList());
-        if (images.isEmpty()) {
-            return;
-        }
-        appStateService.getPost(postId).setStatus(Post.Status.PENDING);
-        logger.info(String.format("Restarting %d jobs for post id %s", images.size(), postId));
-        for (Image image : images) {
-            put(image);
-        }
-    }
-
-    public void removeScheduled(Image image) {
-        image.setStatus(Image.Status.STOPPED);
-        logger.info(String.format("Removing scheduled job for %s", image.getUrl()));
-
-        Iterator<DownloadJob> iterator = downloadQ.iterator();
-        boolean removed = false;
-        while(iterator.hasNext()) {
-            DownloadJob next = iterator.next();
-            if(next.getImage().getPostId().equals(image.getPostId())) {
-                iterator.remove();
-                appStateService.doneDownloadJob(image);
-                logger.info(String.format("Scheduled job for %s is removed", image.getUrl()));
-                removed = true;
-                break;
-            }
-        }
-
-        if(!removed) {
-            logger.warn(String.format("Job for %s does not exist", image.getUrl()));
-        }
-
-        image.cleanup();
-    }
-
-    public void removeRunning(String postId) {
-        logger.info(String.format("Interrupting running jobs for post id %s", postId));
-        executionService.stop(postId);
-    }
-
-
-    public synchronized void stop(String postId) {
-        try {
-            if (FINISHED.contains(appStateService.getPost(postId).getStatus())) {
+        synchronized (appStateService) {
+            if (appStateService.getRunningPosts().get(postId) != null && appStateService.getRunningPosts().get(postId).get() > 0) {
+                logger.warn(String.format("Cannot restart, jobs are currently running for post id %s", postId));
                 return;
             }
-            notPauseQ = false;
-            appStateService.getPost(postId).setStatus(Post.Status.STOPPED);
             List<Image> images = appStateService.getPost(postId)
                     .getImages()
                     .stream()
@@ -119,9 +70,66 @@ public class DownloadQ {
             if (images.isEmpty()) {
                 return;
             }
-            logger.info(String.format("Stopping %d jobs for post id %s", images.size(), postId));
-            images.forEach(image -> removeScheduled(image));
-            removeRunning(postId);
+            appStateService.getPost(postId).setStatus(Post.Status.PENDING);
+            logger.info(String.format("Restarting %d jobs for post id %s", images.size(), postId));
+            for (Image image : images) {
+                put(image);
+            }
+        }
+    }
+
+    public void removeScheduled(Image image) {
+        synchronized (appStateService) {
+            image.setStatus(Image.Status.STOPPED);
+            logger.info(String.format("Removing scheduled job for %s", image.getUrl()));
+
+            Iterator<DownloadJob> iterator = downloadQ.iterator();
+            boolean removed = false;
+            while (iterator.hasNext()) {
+                DownloadJob next = iterator.next();
+                if (next.getImage().getPostId().equals(image.getPostId())) {
+                    iterator.remove();
+                    appStateService.doneDownloadJob(image);
+                    logger.info(String.format("Scheduled job for %s is removed", image.getUrl()));
+                    removed = true;
+                    break;
+                }
+            }
+
+            if (!removed) {
+                logger.warn(String.format("Job for %s does not exist", image.getUrl()));
+            }
+
+            image.cleanup();
+        }
+    }
+
+    public void removeRunning(String postId) {
+        logger.info(String.format("Interrupting running jobs for post id %s", postId));
+        executionService.stop(postId);
+    }
+
+
+    public void stop(String postId) {
+        try {
+            synchronized (appStateService) {
+                if (FINISHED.contains(appStateService.getPost(postId).getStatus())) {
+                    return;
+                }
+                notPauseQ = false;
+                appStateService.getPost(postId).setStatus(Post.Status.STOPPED);
+                List<Image> images = appStateService.getPost(postId)
+                        .getImages()
+                        .stream()
+                        .filter(e -> !e.getStatus().equals(Image.Status.COMPLETE))
+                        .collect(Collectors.toList());
+                if (images.isEmpty()) {
+                    return;
+                }
+                logger.info(String.format("Stopping %d jobs for post id %s", images.size(), postId));
+                images.forEach(image -> removeScheduled(image));
+                removeRunning(postId);
+            }
         } finally {
             notPauseQ = true;
         }
@@ -131,14 +139,18 @@ public class DownloadQ {
         return downloadQ.size();
     }
 
-    public synchronized void stopAll() {
-        appStateService.getCurrentPosts().values().stream().map(Post::getPostId).forEach(this::stop);
+    public void stopAll() {
+        synchronized (appStateService) {
+            appStateService.getCurrentPosts().values().stream().map(Post::getPostId).forEach(this::stop);
+        }
     }
 
-    public synchronized void restartAll() throws InterruptedException {
-        for (Post post : appStateService.getCurrentPosts().values()) {
-            String postId = post.getPostId();
-            restart(postId);
+    public void restartAll() throws InterruptedException {
+        synchronized (appStateService) {
+            for (Post post : appStateService.getCurrentPosts().values()) {
+                String postId = post.getPostId();
+                restart(postId);
+            }
         }
     }
 }

vripper-server/src/main/java/tn/mnlr/vripper/services/AppSettingsService.java

@@ -2,6 +2,7 @@ package tn.mnlr.vripper.services;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Getter;
+import lombok.NoArgsConstructor;
 import lombok.Setter;
 import org.apache.commons.codec.digest.DigestUtils;
 import org.slf4j.Logger;
@@ -35,6 +36,10 @@ public class AppSettingsService {
     private final String V_THANKS = "VTHANKS";
     private final String DESKTOP_CLIPBOARD = "DESKTOP_CLIPBOARD";
     private final String FORCE_ORDER = "FORCE_ORDER";
+    private final String SUBFOLDER = "SUBFOLDER";
+    private final String THREADSUBFOLDER = "THREADSUBFOLDER";
+    private final String CLEAR = "CLEAR";
+    private final String DARK_THEME = "DARK_THEME";
 
     private String downloadPath;
     private int maxThreads;
@@ -44,7 +49,11 @@ public class AppSettingsService {
     private String vPassword;
     private boolean vThanks;
     private boolean desktopClipboard;
+    private boolean subLocation;
+    private boolean threadSubLocation;
     private boolean forceOrder;
+    private boolean clearCompleted;
+    private boolean darkTheme;
 
     public void setVPassword(String vPassword) {
         if(vPassword.isEmpty()) {
@@ -65,6 +74,10 @@ public class AppSettingsService {
         vThanks = prefs.getBoolean(V_THANKS, false);
         desktopClipboard = prefs.getBoolean(DESKTOP_CLIPBOARD, false);
         forceOrder = prefs.getBoolean(FORCE_ORDER, false);
+        subLocation = prefs.getBoolean(SUBFOLDER, false);
+        threadSubLocation = prefs.getBoolean(THREADSUBFOLDER, false);
+        clearCompleted = prefs.getBoolean(CLEAR, false);
+        darkTheme = prefs.getBoolean(DARK_THEME, false);
     }
 
     @PreDestroy
@@ -79,6 +92,10 @@ public class AppSettingsService {
         prefs.putBoolean(V_THANKS, vThanks);
         prefs.putBoolean(DESKTOP_CLIPBOARD, desktopClipboard);
         prefs.putBoolean(FORCE_ORDER, forceOrder);
+        prefs.putBoolean(SUBFOLDER, subLocation);
+        prefs.putBoolean(THREADSUBFOLDER, threadSubLocation);
+        prefs.putBoolean(CLEAR, clearCompleted);
+        prefs.putBoolean(DARK_THEME, darkTheme);
 
         try {
             prefs.sync();
@@ -106,6 +123,27 @@ public class AppSettingsService {
         }
     }
 
+    public Theme getTheme() {
+        return new Theme(this.darkTheme);
+    }
+
+    public void setTheme(Theme theme) {
+        this.darkTheme = theme.darkTheme;
+        save();
+    }
+
+    @Getter
+    @NoArgsConstructor
+    public static class Theme {
+
+        @JsonProperty("darkTheme")
+        private boolean darkTheme;
+
+        public Theme(boolean darkTheme) {
+            this.darkTheme = darkTheme;
+        }
+    }
+
     @Getter
     public static class Settings {
 
@@ -127,8 +165,14 @@ public class AppSettingsService {
         private boolean desktopClipboard;
         @JsonProperty("forceOrder")
         private boolean forceOrder;
+        @JsonProperty("subLocation")
+        private boolean subLocation;
+        @JsonProperty("threadSubLocation")
+        private boolean threadSubLocation;
+        @JsonProperty("clearCompleted")
+        private boolean clearCompleted;
 
-        public Settings(String downloadPath, int maxThreads, boolean autoStart, boolean vLogin, String vUsername, String vPassword, boolean vThanks, boolean desktopClipboard, boolean forceOrder) {
+        public Settings(String downloadPath, int maxThreads, boolean autoStart, boolean vLogin, String vUsername, String vPassword, boolean vThanks, boolean desktopClipboard, boolean forceOrder, boolean subLocation, boolean threadSubLocation, boolean clearCompleted) {
             this.downloadPath = downloadPath;
             this.maxThreads = maxThreads;
             this.autoStart = autoStart;
@@ -138,6 +182,9 @@ public class AppSettingsService {
             this.vThanks = vThanks;
             this.desktopClipboard = desktopClipboard;
             this.forceOrder = forceOrder;
+            this.subLocation = subLocation;
+            this.threadSubLocation = threadSubLocation;
+            this.clearCompleted = clearCompleted;
         }
     }
 }

vripper-server/src/main/java/tn/mnlr/vripper/services/AppStateService.java

@@ -1,5 +1,6 @@
 package tn.mnlr.vripper.services;
 
+import io.reactivex.disposables.Disposable;
 import io.reactivex.processors.PublishProcessor;
 import lombok.Getter;
 import lombok.Setter;
@@ -37,6 +38,11 @@ public class AppStateService {
     @Autowired
     private PersistenceService persistenceService;
 
+    @Autowired
+    private AppSettingsService appSettingsService;
+
+    private Disposable subscription;
+
     public void onImageUpdate(Image imageState) {
 
         persistenceService.getProcessor().onNext(currentPosts);
@@ -56,9 +62,12 @@ public class AppStateService {
     public synchronized void newDownloadJob(DownloadJob downloadJob) {
         String postId = downloadJob.getImage().getPostId();
         checkKeyRunningPosts(postId);
-        int i = runningPosts.get(postId).incrementAndGet();
-        if (i > 0) {
-            Post post = currentPosts.get(postId);
+        runningPosts.get(postId).incrementAndGet();
+    }
+
+    public synchronized void postDownloadingUpdate(String postId) {
+        Post post = currentPosts.get(postId);
+        if (!post.getStatus().equals(Post.Status.DOWNLOADING)) {
             post.setStatus(Post.Status.DOWNLOADING);
             livePostsState.onNext(post);
         }
@@ -77,9 +86,11 @@ public class AppStateService {
             } else {
                 if (!Post.Status.STOPPED.equals(post.getStatus())) {
                     post.setStatus(Post.Status.COMPLETE);
+                    if (appSettingsService.isClearCompleted()) {
+                        remove(image.getPostId());
+                    }
                 }
             }
-            livePostsState.onNext(post);
         }
     }
 
@@ -124,6 +135,7 @@ public class AppStateService {
         return toRemove;
     }
 
+
     @Getter
     public static class CachedThread {
 

vripper-server/src/main/java/tn/mnlr/vripper/services/ConnectionManager.java

@@ -7,6 +7,7 @@ import org.apache.http.client.methods.HttpPost;
 import org.apache.http.impl.client.DefaultHttpRequestRetryHandler;
 import org.apache.http.impl.client.HttpClientBuilder;
 import org.apache.http.impl.client.HttpClients;
+import org.apache.http.impl.client.LaxRedirectStrategy;
 import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
 import org.springframework.stereotype.Service;
 
@@ -38,6 +39,7 @@ public class ConnectionManager {
     public HttpClientBuilder getClient() {
         return HttpClients.custom()
                 .setConnectionManager(pcm)
+                .setRedirectStrategy(new LaxRedirectStrategy())
                 .setRetryHandler(new DefaultHttpRequestRetryHandler(5, true))
                 .setDefaultRequestConfig(rc);
     }

vripper-server/src/main/java/tn/mnlr/vripper/services/PathService.java

@@ -4,6 +4,7 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import tn.mnlr.vripper.entities.Post;
 
 import java.io.File;
 
@@ -19,8 +20,12 @@ public class PathService {
     private AppSettingsService appSettingsService;
 
     public final File getDownloadDestinationFolder(String postId) {
-        String postTitle = appStateService.getCurrentPosts().get(postId).getTitle();
-        return new File(appSettingsService.getDownloadPath(), sanitize(postTitle + "_" + postId));
+        Post post = appStateService.getCurrentPosts().get(postId);
+        String postTitle = post.getTitle();
+        String threadTitle = post.getThreadTitle();
+        File sourceFolder = appSettingsService.isSubLocation() ? new File(appSettingsService.getDownloadPath(), sanitize(post.getForum())) : new File(appSettingsService.getDownloadPath());
+        sourceFolder = appSettingsService.isThreadSubLocation() ? new File(sourceFolder, threadTitle) : sourceFolder;
+        return new File(sourceFolder, sanitize(postTitle + "_" + postId));
     }
 
     public final String sanitize(final String folderName) {

vripper-server/src/main/java/tn/mnlr/vripper/services/PersistenceService.java

@@ -8,12 +8,14 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import tn.mnlr.vripper.SpringContext;
 import tn.mnlr.vripper.VripperApplication;
 import tn.mnlr.vripper.entities.Image;
 import tn.mnlr.vripper.entities.Post;
 import tn.mnlr.vripper.entities.mixin.persistance.ImagePersistanceMixin;
 import tn.mnlr.vripper.entities.mixin.persistance.PostPersistanceMixin;
 
+import javax.annotation.PostConstruct;
 import javax.annotation.PreDestroy;
 import java.io.File;
 import java.io.FileWriter;
@@ -23,6 +25,7 @@ import java.nio.charset.StandardCharsets;
 import java.nio.file.Files;
 import java.nio.file.Paths;
 import java.util.Arrays;
+import java.util.Date;
 import java.util.HashMap;
 import java.util.Map;
 import java.util.concurrent.TimeUnit;
@@ -36,6 +39,9 @@ public class PersistenceService {
     @Autowired
     private AppStateService stateService;
 
+    @Autowired
+    private VripperApplication.AppCommandRunner appCommandRunner;
+
     private ObjectMapper om;
 
     private Disposable subscription;
@@ -44,22 +50,6 @@ public class PersistenceService {
     private PublishProcessor<Map<String, Post>> processor = PublishProcessor.create();
 
     private PersistenceService() {
-        File dataFile = new File(VripperApplication.dataPath);
-        if(!dataFile.exists()) {
-            try {
-                if(dataFile.createNewFile()) {
-                    logger.info("Data file successfully created");
-                    try (FileWriter fw = new FileWriter(dataFile)) {
-                        fw.write("{}");
-                    }
-                } else {
-                    logger.info("Data file already exists");
-                }
-            } catch (IOException e) {
-                logger.error("Unable to create data file", e);
-                System.exit(-1);
-            }
-        }
         om = new ObjectMapper();
         om.addMixIn(Image.class, ImagePersistanceMixin.class);
         om.addMixIn(Post.class, PostPersistanceMixin.class);
@@ -72,6 +62,32 @@ public class PersistenceService {
                 .subscribe();
     }
 
+    @PostConstruct
+    public void init() {
+        File dataFile = new File(appCommandRunner.getDataPath());
+        if (!dataFile.exists()) {
+            try {
+                dataFile.getParentFile().mkdirs();
+                if (!dataFile.getParentFile().isDirectory() || !dataFile.getParentFile().canWrite()) {
+                    logger.error(String.format("Unable to write in %s", dataFile.getParent()));
+                    SpringContext.close();
+                }
+
+                if (dataFile.createNewFile()) {
+                    logger.info("Data file successfully created");
+                    try (FileWriter fw = new FileWriter(dataFile)) {
+                        fw.write("{}");
+                    }
+                } else {
+                    logger.info("Data file already exists");
+                }
+            } catch (IOException e) {
+                logger.error("Unable to create data file", e);
+                SpringContext.close();
+            }
+        }
+    }
+
     @PreDestroy
     public void preDestroy() {
         this.subscription.dispose();
@@ -82,7 +98,7 @@ public class PersistenceService {
 
     public void persist(Map<String, Post> currentPosts) {
 
-        try (PrintWriter out = new PrintWriter(VripperApplication.dataPath, "UTF-8")) {
+        try (PrintWriter out = new PrintWriter(appCommandRunner.getDataPath(), "UTF-8")) {
             out.print(om.writeValueAsString(currentPosts));
         } catch (IOException e) {
             logger.error("Failed to persist app state", e);
@@ -95,6 +111,14 @@ public class PersistenceService {
             return om.readValue(content, om.getTypeFactory().constructMapType(HashMap.class, String.class, Post.class));
         } catch (IOException e) {
             logger.error("Failed to read app state", e);
+            long timestamp = new Date().getTime();
+            logger.warn(String.format("trying to rename old data file from %s to %s", appCommandRunner.getDataPath(), appCommandRunner.getDataPath() + "." + timestamp + ".old"));
+            try {
+                Files.move(new File(appCommandRunner.getDataPath()).toPath(), new File(appCommandRunner.getDataPath() + "." + timestamp + ".old").toPath());
+            } catch (IOException ex) {
+                logger.error(String.format("Failed to rename %s to %s", appCommandRunner.getDataPath(), appCommandRunner.getDataPath() + ".old"));
+                SpringContext.close();
+            }
         }
 
         return new HashMap<>();
@@ -102,12 +126,12 @@ public class PersistenceService {
 
     public void restore() {
 
-        String jsonContent;
+        String jsonContent = null;
         try {
-            jsonContent = Files.readAllLines(Paths.get(VripperApplication.dataPath), StandardCharsets.UTF_8).stream().collect(Collectors.joining());
+            jsonContent = Files.readAllLines(Paths.get(appCommandRunner.getDataPath()), StandardCharsets.UTF_8).stream().collect(Collectors.joining());
         } catch (Exception e) {
-            logger.warn("data file not found, previous state cannot be restored", e);
-            return;
+            logger.error("data file cannot be read, previous state cannot be restored", e);
+            SpringContext.close();
         }
 
         Map<String, Post> read = read(jsonContent);

vripper-server/src/main/java/tn/mnlr/vripper/services/PostParser.java

@@ -22,7 +22,6 @@ import tn.mnlr.vripper.host.Host;
 import tn.mnlr.vripper.q.DownloadQ;
 
 import javax.xml.parsers.ParserConfigurationException;
-import javax.xml.parsers.SAXParser;
 import javax.xml.parsers.SAXParserFactory;
 import java.io.BufferedInputStream;
 import java.net.URISyntaxException;
@@ -57,7 +56,7 @@ public class PostParser {
 
     @Autowired
     private DownloadQ downloadQ;
-    SAXParser saxParser = factory.newSAXParser();
+
     @Autowired
     private VipergirlsAuthService vipergirlsAuthService;
 
@@ -66,6 +65,11 @@ public class PostParser {
 
     public void addPost(String postId, String threadId) throws PostParseException {
 
+        if (appStateService.getCurrentPosts().containsKey(postId)) {
+            logger.info(String.format("skipping %s, already loaded", postId));
+            return;
+        }
+
         VRPostParser vrPostParser = new VRPostParser(threadId, postId);
         Post post = vrPostParser.parse();
 
@@ -165,7 +169,7 @@ public class PostParser {
                     throw new DownloadException(String.format("Unexpected response code '%d' for %s", response.getStatusLine().getStatusCode(), httpGet));
                 }
 
-                saxParser.parse(new BufferedInputStream(response.getEntity().getContent()), handler);
+                factory.newSAXParser().parse(new BufferedInputStream(response.getEntity().getContent()), handler);
                 EntityUtils.consumeQuietly(response.getEntity());
             } catch (Exception e) {
                 logger.error("parsing failed", e);
@@ -282,7 +286,7 @@ public class PostParser {
                     throw new DownloadException(String.format("Unexpected response code '%d' for %s", response.getStatusLine().getStatusCode(), httpGet));
                 }
 
-                saxParser.parse(new BufferedInputStream(response.getEntity().getContent()), handler);
+                factory.newSAXParser().parse(new BufferedInputStream(response.getEntity().getContent()), handler);
                 post = handler.getParsedPost();
                 EntityUtils.consumeQuietly(response.getEntity());
             } catch (Exception e) {
@@ -300,10 +304,13 @@ public class PostParser {
         private String threadTitle;
 
         private int previewCounter = 0;
+        private int index = 0;
 
         private String postTitle;
         private int imageCount;
 
+        private String forum;
+
         private List<String> previews = new ArrayList<>();
         private List<Image> images = new ArrayList<>();
         @Getter
@@ -322,6 +329,9 @@ public class PostParser {
         public void startElement(String uri, String localName, String qName, Attributes attributes) {
 
             switch (qName.toLowerCase()) {
+                case "forum":
+                    forum = attributes.getValue("title").trim();
+                    break;
                 case "thread":
                     threadTitle = attributes.getValue("title").trim();
                     break;
@@ -330,6 +340,7 @@ public class PostParser {
                     postTitle = Optional.ofNullable(attributes.getValue("title")).map(e -> e.trim().isEmpty() ? null : e.trim()).orElse(threadTitle);
                     break;
                 case "image":
+                    index++;
                     if (previewCounter++ < 4) {
                         String thumbUrl = Optional.ofNullable(attributes.getValue("thumb_url")).map(String::trim).orElse(null);
                         if (thumbUrl != null) {
@@ -342,7 +353,7 @@ public class PostParser {
                         Host foundHost = supportedHosts.stream().filter(host -> host.isSupported(mainUrl)).findFirst().orElse(null);
                         if (foundHost != null) {
                             logger.info(String.format("Found supported host %s for %s", foundHost.getClass().getSimpleName(), mainUrl));
-                            images.add(new Image(mainUrl, postId, postTitle, foundHost, imageCount));
+                            images.add(new Image(mainUrl, postId, postTitle, foundHost, index));
                         } else {
                             logger.warn(String.format("unsupported host for %s, skipping", mainUrl));
                         }
@@ -364,9 +375,12 @@ public class PostParser {
                                 images,
                                 metadata,
                                 postId,
-                                threadId
+                                threadId,
+                                threadTitle,
+                                forum
                         );
                     }
+                    index = 0;
                     previewCounter = 0;
                     previews = new ArrayList<>();
                     images = new ArrayList<>();

vripper-server/src/main/java/tn/mnlr/vripper/web/restendpoints/SettingsRestEndpoint.java

@@ -31,37 +31,57 @@ public class SettingsRestEndpoint {
                 .body(e.getMessage());
     }
 
+    @PostMapping("/settings/theme")
+    @ResponseStatus(value = HttpStatus.OK)
+    public AppSettingsService.Theme postTheme(@RequestBody AppSettingsService.Theme theme) {
+        synchronized (this.settings) {
+            this.settings.setTheme(theme);
+            return settings.getTheme();
+        }
+    }
+
+    @GetMapping("/settings/theme")
+    @ResponseStatus(value = HttpStatus.OK)
+    public AppSettingsService.Theme getTheme() {
+        return settings.getTheme();
+    }
+
     @PostMapping("/settings")
     @ResponseStatus(value = HttpStatus.OK)
     public ResponseEntity postSettings(@RequestBody AppSettingsService.Settings settings) throws Exception {
 
-        try {
-            this.settings.check(settings);
-        } catch (ValidationException e) {
-            return new ResponseEntity(new Response(e.getMessage()), HttpStatus.BAD_REQUEST);
-        }
-        this.settings.setDownloadPath(settings.getDownloadPath());
-        this.settings.setMaxThreads(settings.getMaxThreads());
-        this.settings.setAutoStart(settings.isAutoStart());
-        this.settings.setVLogin(settings.isVLogin());
-
-        if(settings.isVLogin()) {
-            this.settings.setVUsername(settings.getVUsername());
-            if (!this.settings.getVPassword().equals(settings.getVPassword())) {
-                this.settings.setVPassword(settings.getVPassword());
+        synchronized (this.settings) {
+            try {
+                this.settings.check(settings);
+            } catch (ValidationException e) {
+                return new ResponseEntity(new Response(e.getMessage()), HttpStatus.BAD_REQUEST);
             }
-            this.settings.setVThanks(settings.isVThanks());
-        } else {
-            this.settings.setVUsername("");
-            this.settings.setVPassword("");
-            this.settings.setVThanks(false);
+            this.settings.setDownloadPath(settings.getDownloadPath());
+            this.settings.setMaxThreads(settings.getMaxThreads());
+            this.settings.setAutoStart(settings.isAutoStart());
+            this.settings.setVLogin(settings.isVLogin());
+
+            if (settings.isVLogin()) {
+                this.settings.setVUsername(settings.getVUsername());
+                if (!this.settings.getVPassword().equals(settings.getVPassword())) {
+                    this.settings.setVPassword(settings.getVPassword());
+                }
+                this.settings.setVThanks(settings.isVThanks());
+            } else {
+                this.settings.setVUsername("");
+                this.settings.setVPassword("");
+                this.settings.setVThanks(false);
+            }
+            this.settings.setDesktopClipboard(settings.isDesktopClipboard());
+            this.settings.setForceOrder(settings.isForceOrder());
+            this.settings.setSubLocation(settings.isSubLocation());
+            this.settings.setThreadSubLocation(settings.isThreadSubLocation());
+            this.settings.setClearCompleted(settings.isClearCompleted());
+
+            this.settings.save();
+
+            vipergirlsAuthService.authenticate();
         }
-        this.settings.setDesktopClipboard(settings.isDesktopClipboard());
-        this.settings.setForceOrder(settings.isForceOrder());
-
-        this.settings.save();
-
-        vipergirlsAuthService.authenticate();
         return ResponseEntity.ok(getSettings());
     }
 
@@ -78,7 +98,10 @@ public class SettingsRestEndpoint {
                 settings.getVPassword(),
                 settings.isVThanks(),
                 settings.isDesktopClipboard(),
-                settings.isForceOrder()
+                settings.isForceOrder(),
+                settings.isSubLocation(),
+                settings.isThreadSubLocation(),
+                settings.isClearCompleted()
         );
     }
 

vripper-server/src/main/java/tn/mnlr/vripper/web/wsendpoints/WebSocketHandler.java

@@ -209,7 +209,6 @@ public class WebSocketHandler extends TextWebSocketHandler {
                 appStateService.getLivePostsState()
                         .onBackpressureBuffer()
                         .observeOn(Schedulers.io())
-                        .filter(e -> !e.isRemoved())
                         .buffer(2000, TimeUnit.MILLISECONDS, 200)
                         .filter(e -> !e.isEmpty())
                         .map(e -> e.stream().distinct().collect(Collectors.toList()))
@@ -283,7 +282,7 @@ public class WebSocketHandler extends TextWebSocketHandler {
 
     @Override
     public void afterConnectionEstablished(WebSocketSession session) {
-
+        logger.info(String.format("Connection open for client id: %s", session.getId()));
     }
 
     @Override
@@ -296,6 +295,8 @@ public class WebSocketHandler extends TextWebSocketHandler {
         Optional.ofNullable(userSubscriptions.remove(session.getId())).ifPresent(d -> d.dispose());
         Optional.ofNullable(vrPostParserSubscriptions.remove(session.getId())).ifPresent(d -> d.dispose());
         Optional.ofNullable(threadParseRequests.remove(session.getId())).ifPresent(d -> d.cancel(true));
+
+        logger.info(String.format("Connection closed for client id: %s", session.getId()));
     }
 
     @Getter

vripper-server/src/main/resources/application-installer.properties

@@ -0,0 +1 @@
+base.dir=${user.home}

vripper-server/src/main/resources/application-portable.properties

@@ -0,0 +1 @@
+base.dir=${user.dir}

vripper-server/src/main/resources/application.properties

@@ -1,8 +1,9 @@
 logging.level.org.springframework.web=INFO
 logging.level.root=INFO
 logging.level.org.apache.http=INFO
-logging.file=${user.dir}/vripper.log
+logging.file=${base.dir}/.vripper/vripper.log
 server.port=${vripper.server.port:8080}
 management.endpoints.web.exposure.include=shutdown
 management.endpoint.shutdown.enabled=true
-endpoints.shutdown.enabled=true
+endpoints.shutdown.enabled=true
+spring.profiles.active=portable

vripper-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vripper-ui",
-  "version": "1.5.0",
+  "version": "2.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1588,14 +1588,14 @@
       "dev": true
     },
     "ag-grid-angular": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-21.0.1.tgz",
-      "integrity": "sha512-o0mhoPXbZDlxLAlwK+LPpBm5/RA6bYHqXV26yfJmx2wZ/khtT7VOiMbe9XAsGskMv+sxuR7G2FkxbxhluZzTnA=="
+      "version": "21.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-21.2.1.tgz",
+      "integrity": "sha512-4bJ7+Gv6AY+MEJACGD16ZKDhQnBrU7wIaXsAwGbShb8jt8xDRhaS9Hf1jnEhY7vaLfYj+zR9vrXGXbTvwTtY2Q=="
     },
     "ag-grid-community": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-21.0.1.tgz",
-      "integrity": "sha512-wqm6W39kImPonjRxHvnt/L6roJLxPXSopXF4pvcE1paxN7S25HNsBgTOB1uaLlQ4/xt3xSpccPbTDqVUnSxrmQ=="
+      "version": "21.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-21.2.1.tgz",
+      "integrity": "sha512-UmS0j7pOz6SqN++Thg1a82LghW1zKk0k30kpPWxlOzC5On5b8MyKVsYZbGFtpdIHyJlPH3qbkw+PcFWSK168sw=="
     },
     "agent-base": {
       "version": "4.2.1",
@@ -3510,9 +3510,9 @@
       "dev": true
     },
     "electron": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-5.0.5.tgz",
-      "integrity": "sha512-GzVQhImBX3rSCFPyJ1u1KbxquoidAHzGeCH2FTs3lzAh1H8m4vd7xh6CNC111mT/I8pxFk5D8s3atJlJQLPAeg==",
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-6.0.9.tgz",
+      "integrity": "sha512-lFpSmDNyjpvJFwEnK897Soone3DV7D3ASFUb315H2VTVZSbKib9Kbrsovxf4c+e1q5hTdaONsGIm3Lb4CXIW1g==",
       "dev": true,
       "requires": {
         "@types/node": "^10.12.18",
@@ -3521,9 +3521,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "10.14.10",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.10.tgz",
-          "integrity": "sha512-V8wj+w2YMNvGuhgl/MA5fmTxgjmVHVoasfIaxMMZJV6Y8Kk+Ydpi1z2whoShDCJ2BuNVoqH/h1hrygnBxkrw/Q==",
+          "version": "10.14.18",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.18.tgz",
+          "integrity": "sha512-ryO3Q3++yZC/+b8j8BdKd/dn9JlzlHBPdm80656xwYUdmPkpTGTjkAdt6BByiNupGPE8w0FhBgvYy/fX9hRNGQ==",
           "dev": true
         }
       }

vripper-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vripper-ui",
-  "version": "1.5.0",
+  "version": "2.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -24,8 +24,8 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
-    "ag-grid-angular": "^21.0.1",
-    "ag-grid-community": "^21.0.1",
+    "ag-grid-angular": "^21.2.1",
+    "ag-grid-community": "^21.2.1",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
     "ngx-electron": "^2.1.1",
@@ -42,7 +42,7 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
-    "electron": "^5.0.5",
+    "electron": "^6.0.9",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.2.0",

vripper-ui/pom.xml

@@ -5,7 +5,7 @@
   <parent>
     <groupId>tn.mnlr</groupId>
     <artifactId>vripper</artifactId>
-    <version>1.5.0</version>
+    <version>2.2.0</version>
   </parent>
   <artifactId>vripper-ui</artifactId>
   <name>vripper-ui</name>

vripper-ui/src/app/app.component.html

@@ -1,36 +1,45 @@
 <div fxLayout="column" *ngIf="connecting()" class="overlay loading" fxLayoutAlign="center center">
   <mat-spinner></mat-spinner>
-  <h2>Connecting</h2>
+  <h2>Loading...</h2>
 </div>
 <div fxLayout="column" *ngIf="noConnectionState()" class="overlay no-connection" fxLayoutAlign="center center">
   <mat-icon class="overlay-icon">error</mat-icon>
-  <h2>Connection with the server is closed</h2>
+  <h2>The app seems to be shutdown</h2>
 </div>
 <div [ngClass]="{'electron': electronService.isElectronApp}" id="app-container" fxLayout="column" fxLayoutGap="20px">
   <div id="app-header" fxFlex="nogrow">
-    <mat-toolbar class="mat-elevation-z2" color="primary">
-      <mat-toolbar-row fxLayout="row" fxLayoutAlign="center center">
-        <span id="logo" fxFlex="0 0 48px"></span>
-        <span id="title">Viper Ripper</span>
-        <span fxFlex="grow"></span>
-        <span>
+    <mat-toolbar class="mat-elevation-z8" color="accent">
+      <mat-toolbar-row fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
+        <div id="left-controls">
+          <button (click)="scan()" class="add-button" color="primary" mat-icon-button>
+            <mat-icon>add</mat-icon>
+          </button>
+          <button (click)="restartAll()" aria-label="Start" mat-icon-button title="Start">
+            <mat-icon>play_arrow</mat-icon>
+          </button>
+          <button (click)="stopAll()" aria-label="Stop" mat-icon-button title="Stop">
+            <mat-icon>stop</mat-icon>
+          </button>
+          <button (click)="clear()" aria-label="Clear completed" mat-icon-button title="Clear completed">
+            <mat-icon>clear_all</mat-icon>
+          </button>
+          <button (click)="remove()" aria-label="Remove All" mat-icon-button title="Remove All">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+        <span fxFlex="grow" fxLayoutAlign="end center">
           <p style="font-size: 16px">Logged in as: {{loggedUser.user == null || loggedUser.user === '' ? 'guest': loggedUser.user }}</p>
         </span>
-        <div>
-          <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="settings">
-            <mat-icon>more_vert</mat-icon>
+        <div id="right-controls">
+          <button (click)="openSettings()" aria-label="settings" mat-icon-button>
+            <mat-icon>menu</mat-icon>
           </button>
-          <mat-menu #menu="matMenu">
-            <button (click)="openSettings()" mat-menu-item>
-              <mat-icon>settings</mat-icon>
-              <span>Settings</span>
-            </button>
-          </mat-menu>
         </div>
       </mat-toolbar-row>
     </mat-toolbar>
   </div>
   <div id="app-body" fxFlex="grow">
     <router-outlet></router-outlet>
+    <app-status-bar style="width: 100%"></app-status-bar>
   </div>
 </div>

vripper-ui/src/app/app.component.scss

@@ -19,7 +19,3 @@
 .no-connection {
   color: #eb6060;
 }
-
-.electron {
-  margin-top: 30px;
-}

vripper-ui/src/app/app.component.scss-theme.scss

@@ -0,0 +1,11 @@
+@import '~@angular/material/theming';
+
+@mixin app-component-theme($theme) {
+
+  $background: map-get($theme, background);
+
+  button.add-button {
+
+    background-color: mat-color($background, background);
+  }
+}

vripper-ui/src/app/app.component.ts

@@ -1,8 +1,9 @@
+import { AppService } from './app.service';
 import { ClipboardService } from './clipboard.service';
 import { ElectronService } from 'ngx-electron';
 import { SettingsComponent } from './settings/settings.component';
-import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { Component, OnInit, OnDestroy, NgZone, Renderer2, AfterViewInit } from '@angular/core';
+import { MatDialog, MatSnackBar } from '@angular/material';
 import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
 import { Observable, Subscription } from 'rxjs';
 import { WsConnectionService, WSState } from './ws-connection.service';
@@ -10,13 +11,18 @@ import { LoggedUser } from './common/logged-user.model';
 import { WsHandler } from './ws-handler';
 import { CMD } from './common/cmd.enum';
 import { WSMessage } from './common/ws-message.model';
+import { HttpClient } from '@angular/common/http';
+import { RemoveAllResponse } from './common/remove-all-response.model';
+import { ServerService } from './server-service';
+import { ConfirmDialogComponent } from './common/confirmation-component/confirmation-dialog';
+import { filter, flatMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     public dialog: MatDialog,
     private breakpointObserver: BreakpointObserver,
@@ -24,6 +30,11 @@ export class AppComponent implements OnInit, OnDestroy {
     public electronService: ElectronService,
     private clipboardService: ClipboardService,
     private ngZone: NgZone,
+    private httpClient: HttpClient,
+    private serverService: ServerService,
+    private _snackBar: MatSnackBar,
+    private renderer: Renderer2,
+    private appService: AppService
   ) {
     this.websocketHandlerPromise = this.ws.getConnection();
   }
@@ -31,11 +42,18 @@ export class AppComponent implements OnInit, OnDestroy {
   subscriptions: Subscription[] = [];
   websocketHandlerPromise: Promise<WsHandler>;
   currentState: WSState;
-
+  themeLoaded = false;
   loggedUser: LoggedUser = new LoggedUser(null);
-
   isExtraSmall: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.XSmall);
 
+  ngAfterViewInit() {
+    this.appService.renderer = this.renderer;
+  }
+
+  scan() {
+    this.appService.scan();
+  }
+
   openSettings(): void {
     const dialogRef = this.dialog.open(SettingsComponent, {
       width: '70%',
@@ -62,7 +80,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   connecting(): boolean {
-    return this.currentState === WSState.INIT || this.currentState === WSState.CONNECTING;
+    return (this.currentState === WSState.INIT || this.currentState === WSState.CONNECTING) && !this.themeLoaded ;
   }
 
   ngOnInit() {
@@ -84,10 +102,86 @@ export class AppComponent implements OnInit, OnDestroy {
         this.dialog.closeAll();
       } else if (this.currentState === WSState.OPEN) {
         this.clipboardService.init();
+        this.appService
+          .loadTheme()
+          .subscribe(() => this.ngZone.run(() => this.themeLoaded = true));
       }
     });
   }
 
+  clear() {
+    this.ngZone.run(() => {
+      this.httpClient.post<RemoveAllResponse>(this.serverService.baseUrl + '/post/clear/all', {}).subscribe(
+        data => {
+          this._snackBar.open(`${data.removed} items cleared`, null, { duration: 5000 });
+        },
+        error => {
+          this._snackBar.open(error.error, null, {
+            duration: 5000
+          });
+        }
+      );
+    });
+  }
+
+  remove() {
+    this.ngZone.run(() => {
+      this.dialog
+        .open(ConfirmDialogComponent, {
+          maxHeight: '100vh',
+          maxWidth: '100vw',
+          height: '200px',
+          width: '60%',
+          data: { header: 'Confirmation', content: 'Are you sure you want to remove all items ?' }
+        })
+        .afterClosed()
+        .pipe(
+          filter(e => e === 'yes'),
+          flatMap(e => this.httpClient.post<RemoveAllResponse>(this.serverService.baseUrl + '/post/remove/all', {}))
+        )
+        .subscribe(
+          data => {
+            this._snackBar.open(`${data.removed} items removed`, null, { duration: 5000 });
+          },
+          error => {
+            this._snackBar.open(error.error, null, {
+              duration: 5000
+            });
+          }
+        );
+    });
+  }
+
+  stopAll() {
+    this.ngZone.run(() => {
+      this.httpClient.post(this.serverService.baseUrl + '/post/stop/all', {}).subscribe(
+        () => {
+          this._snackBar.open(`Download stopped`, null, { duration: 5000 });
+        },
+        error => {
+          this._snackBar.open(error.error, null, {
+            duration: 5000
+          });
+        }
+      );
+    });
+  }
+
+  restartAll() {
+    this.ngZone.run(() => {
+      this.httpClient.post(this.serverService.baseUrl + '/post/restart/all', {}).subscribe(
+        () => {
+          this._snackBar.open(`Download started`, null, { duration: 5000 });
+        },
+        error => {
+          this._snackBar.open(error.error, null, {
+            duration: 5000
+          });
+        }
+      );
+    });
+  }
+
   ngOnDestroy() {
     this.subscriptions.forEach(e => {
       e.unsubscribe();

vripper-ui/src/app/app.module.ts

@@ -14,7 +14,6 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AgGridModule } from 'ag-grid-angular';
 import { PostProgressRendererComponent } from './posts/post-progress.renderer.component';
-import { MenuRendererComponent } from './posts/menu.renderer.component';
 import { PostDetailsProgressRendererComponent } from './post-detail/post-details-progress.component';
 import { LoginComponent } from './login/login.component';
 import { XhrInterceptorService } from './xhr-interceptor.service';
@@ -29,6 +28,9 @@ import { MultiPostComponent } from './multi-post/multi-post.component';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { AppPreviewComponent } from './common/preview-tooltip.component';
 import { UrlRendererComponent } from './multi-post/url-renderer.component';
+import { FilterComponent } from './filter/filter.component';
+import { ScanComponent } from './scan/scan.component';
+import { StatusBarComponent } from './status-bar/status-bar.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +38,6 @@ import { UrlRendererComponent } from './multi-post/url-renderer.component';
     PostsComponent,
     PostDetailComponent,
     PostProgressRendererComponent,
-    MenuRendererComponent,
     PostDetailsProgressRendererComponent,
     LoginComponent,
     HomeComponent,
@@ -45,9 +46,19 @@ import { UrlRendererComponent } from './multi-post/url-renderer.component';
     MultiPostComponent,
     AppPreviewComponent,
     AppPreviewDirective,
-    UrlRendererComponent
+    UrlRendererComponent,
+    FilterComponent,
+    ScanComponent,
+    StatusBarComponent
+  ],
+  entryComponents: [
+    PostDetailComponent,
+    SettingsComponent,
+    ConfirmDialogComponent,
+    // MultiPostComponent,
+    AppPreviewComponent,
+    ScanComponent
   ],
-  entryComponents: [PostDetailComponent, SettingsComponent, ConfirmDialogComponent, MultiPostComponent, AppPreviewComponent],
   imports: [
     BrowserAnimationsModule,
     FormsModule,
@@ -59,7 +70,6 @@ import { UrlRendererComponent } from './multi-post/url-renderer.component';
     ReactiveFormsModule,
     AgGridModule.withComponents([
       PostProgressRendererComponent,
-      MenuRendererComponent,
       PostDetailsProgressRendererComponent,
       UrlRendererComponent
     ]),

vripper-ui/src/app/app.service.ts

@@ -1,4 +1,79 @@
-import { Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { HttpClient } from '@angular/common/http';
+import { Injectable, Renderer2, NgZone } from '@angular/core';
+import { ServerService } from './server-service';
+import { tap } from 'rxjs/operators';
+import { ScanComponent } from './scan/scan.component';
+import { Observable } from 'rxjs';
+import { BreakpointState, Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 
 @Injectable()
-export class AppService {}
+export class AppService {
+  constructor(
+    private httpClient: HttpClient,
+    private serverService: ServerService,
+    public dialog: MatDialog,
+    private breakpointObserver: BreakpointObserver,
+  ) {}
+
+  darkTheme = false;
+  _renderer: Renderer2;
+  set renderer(renderer: Renderer2) {
+    this._renderer = renderer;
+  }
+
+  isExtraSmall: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.XSmall);
+  isScanOpen = false;
+
+  updateTheme(darkTheme: boolean) {
+    this.darkTheme = darkTheme;
+    if (this.darkTheme) {
+      this._renderer.addClass(document.body, 'dark-theme');
+      this._renderer.removeClass(document.body, 'light-theme');
+    } else {
+      this._renderer.addClass(document.body, 'light-theme');
+      this._renderer.removeClass(document.body, 'dark-theme');
+    }
+    this.httpClient
+      .post<Theme>(this.serverService.baseUrl + '/settings/theme', {
+        darkTheme: this.darkTheme
+      })
+      .subscribe();
+  }
+
+  loadTheme() {
+    return this.httpClient
+      .get<Theme>(this.serverService.baseUrl + '/settings/theme')
+      .pipe(tap(theme => this.updateTheme(theme.darkTheme)));
+  }
+
+  scan(url?: string) {
+
+    const scanDialog = this.dialog.open(ScanComponent, {
+      width: '70%',
+      height: '70%',
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      data: {url: url}
+    });
+
+    const smallDialogSubscription = this.isExtraSmall.subscribe(result => {
+      if (result.matches) {
+        scanDialog.updateSize('100%', '100%');
+      } else {
+        scanDialog.updateSize('70%', '70%');
+      }
+    });
+
+    scanDialog.afterOpened().subscribe(() => this.isScanOpen = true);
+
+    scanDialog.afterClosed().subscribe(() => {
+      smallDialogSubscription.unsubscribe();
+      this.isScanOpen = false;
+    });
+  }
+}
+
+export interface Theme {
+  darkTheme: boolean;
+}

vripper-ui/src/app/filter/filter.component.html

@@ -0,0 +1,3 @@
+<mat-chip-list>
+  <mat-chip (click)="select(c)" *ngFor="let c of criteria" [selected]="c.selected" color="accent">{{c.value}}</mat-chip>
+</mat-chip-list>

vripper-ui/src/app/filter/filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

vripper-ui/src/app/filter/filter.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnInit {
+
+  constructor() { }
+
+  criteria = [
+    {value: 'All', selected: true},
+    {value: 'Downloading', selected: false},
+    {value: 'Completed', selected: false},
+    {value: 'Error', selected: false},
+  ];
+
+  select(chip: {value: string, selected: boolean}) {
+    this.criteria.forEach(e => e.selected = false);
+    chip.selected = true;
+  }
+
+  ngOnInit() {
+  }
+}

vripper-ui/src/app/home/home.component.html

@@ -2,45 +2,9 @@
   <mat-progress-spinner [mode]="spinnerMode" [value]="spinnerValue" style="position: absolute;"></mat-progress-spinner>
 </div>
 <div fxLayout="column" fxLayoutGap="10px" style="height: 100%">
-  <div fxFlex="nogrow">
-    <form
-      #f="ngForm"
-      (ngSubmit)="submit(f)"
-      autocomplete="off"
-      fxLayout="row"
-      fxLayoutAlign="center center"
-      fxLayoutGap="20px"
-    >
-      <mat-form-field fxFlex="grow">
-        <input [(ngModel)]="input" matInput name="url" placeholder="Put a vipergirls.to link" required/>
-      </mat-form-field>
-      <div>
-        <button [disabled]="f.invalid" color="primary" mat-raised-button type="submit">Scan</button>
-      </div>
-    </form>
-  </div>
-  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="10px" id="controls">
-    <button (click)="restartAll()" aria-label="Start" color="primary" mat-mini-fab title="Start">
-      <mat-icon>play_arrow</mat-icon>
-    </button>
-    <button (click)="stopAll()" aria-label="Stop" color="primary" mat-mini-fab title="Stop">
-      <mat-icon>stop</mat-icon>
-    </button>
-    <div fxFlex="grow"></div>
-    <button (click)="clear()" aria-label="Clear completed" color="primary" mat-mini-fab title="Clear completed">
-      <mat-icon>clear_all</mat-icon>
-    </button>
-    <button (click)="remove()" aria-label="Remove All" color="primary" mat-mini-fab title="Remove All">
-      <mat-icon>delete_forever</mat-icon>
-    </button>
-  </div>
-  <mat-divider></mat-divider>
-  <div [fxFlex]="electronService.isElectronApp ? '0 0 calc(100% - 190px)' : '0 0 calc(100% - 163px)'">
-    <app-posts [ngStyle]="{'height': electronService.isElectronApp ? 'calc(100% - 37px)' : '100%'}"
-               style="width: 100%;"></app-posts>
-  </div>
-  <div style="text-align: end">{{ downloadSpeed!.speed + '/s' }} | Downloading: {{ globalState!.running }} | Queued: {{
-    globalState!.queued }} | Remaining:
-    {{ globalState!.remaining }} | Error: {{ globalState!.error }}
+  <div fxFlex="0 0 calc(100% - 90px)">
+    <app-posts
+      style="width: 100%; height: 100%;"
+    ></app-posts>
   </div>
 </div>

vripper-ui/src/app/home/home.component.scss

@@ -1,4 +0,0 @@
-div#controls {
-    margin-left: 10px;
-    margin-right: 10px;
-}

vripper-ui/src/app/home/home.component.ts

@@ -1,22 +1,11 @@
-import { MultiPostComponent } from './../multi-post/multi-post.component';
-import { GlobalState } from './../common/global-state.model';
+import { AppService } from './../app.service';
 import { ElectronService } from 'ngx-electron';
 import { ClipboardService } from './../clipboard.service';
-import { Component, OnInit, ViewChild, Inject, NgZone, OnDestroy } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { filter, flatMap, finalize } from 'rxjs/operators';
-import { MatSnackBar, MatDialog, MatDialogRef } from '@angular/material';
-import { NgForm } from '@angular/forms';
-import { ServerService } from '../server-service';
-import { RemoveAllResponse } from '../common/remove-all-response.model';
-import { PostsComponent } from '../posts/posts.component';
-import { ConfirmDialogComponent } from '../common/confirmation-component/confirmation-dialog';
+import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
+import { MatDialog, MatSnackBar } from '@angular/material';
 import { WsConnectionService } from '../ws-connection.service';
 import { WsHandler } from '../ws-handler';
 import { Subscription } from 'rxjs';
-import { WSMessage } from '../common/ws-message.model';
-import { CMD } from '../common/cmd.enum';
-import { DownloadSpeed } from '../common/download-speed.model';
 
 @Component({
   selector: 'app-home',
@@ -24,192 +13,45 @@ import { DownloadSpeed } from '../common/download-speed.model';
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit, OnDestroy {
-  @ViewChild(PostsComponent)
-  private postsComponent: PostsComponent;
 
   loading = false;
   spinnerMode = 'indeterminate';
   spinnerValue = 0;
-  input: string;
 
   parseEndSubscription: Subscription;
 
   constructor(
-    private httpClient: HttpClient,
-    private _snackBar: MatSnackBar,
-    private serverService: ServerService,
     private clipboardService: ClipboardService,
     public dialog: MatDialog,
     public electronService: ElectronService,
-    private ngZone: NgZone,
-    private wsConnectionService: WsConnectionService
+    private wsConnectionService: WsConnectionService,
+    private appService: AppService,
+    private _snackBar: MatSnackBar,
+    private ngZone: NgZone
   ) {
     this.websocketHandlerPromise = this.wsConnectionService.getConnection();
   }
 
   websocketHandlerPromise: Promise<WsHandler>;
-  subscriptions: Subscription[] = [];
-  globalState: GlobalState = new GlobalState(0, 0, 0, 0);
-  downloadSpeed: DownloadSpeed = new DownloadSpeed('0 B');
-  // parsingState: ThreadParsingState = new ThreadParsingState(0, 0);
 
   ngOnInit() {
     this.clipboardService.links.subscribe(e => {
-      if (this.loading) {
-        this._snackBar.open(e + ' was not processed, the app is beasy parsing another thread', null, {
-          duration: 5000
-        });
-        return;
-      }
-      this.processUrl(e);
-    });
-
-    this.websocketHandlerPromise.then((handler: WsHandler) => {
-      console.log('Connecting to global state and download speed');
-      this.subscriptions.push(
-        handler.subscribeForGlobalState((e: GlobalState[]) => {
-          this.ngZone.run(() => {
-            this.globalState = e[0];
+      this.ngZone.run(() => {
+        if (this.appService.isScanOpen) {
+          this._snackBar.open(e + ' was not processed, the app is busy parsing another thread', null, {
+            duration: 5000
           });
-        })
-      );
-      this.subscriptions.push(
-        handler.subscribeForSpeed((e: DownloadSpeed[]) => {
-          this.ngZone.run(() => {
-            this.downloadSpeed = e[0];
-          });
-        })
-      );
-      handler.send(new WSMessage(CMD.GLOBAL_STATE_SUB.toString()));
-      handler.send(new WSMessage(CMD.SPEED_SUB.toString()));
-    });
-  }
-
-  submit(form: NgForm) {
-    this.processUrl(this.input, form);
-  }
-
-  processUrl(url: string, form?: NgForm) {
-    this.ngZone.run(() => {
-      this.loading = true;
-    });
-    let dialog: MatDialogRef<MultiPostComponent>;
-    this.httpClient
-      .post<{ threadId: string, postId: string}>(this.serverService.baseUrl + '/post', { url: url })
-      .pipe(finalize(() => {
-        this.ngZone.run(() => {
-          this.loading = false;
-        });
-        if(form != null) {
-          form.resetForm();
-          this.input = null;
-        }
-      }))
-      .subscribe(response => {
-        if (response.postId != null) {
-          this.httpClient.post(this.serverService.baseUrl + '/post/add', [response]).subscribe(
-            () => {
-              this._snackBar.open('Adding posts to queue', null, {
-                duration: 5000
-              });
-            },
-            error => {
-              this._snackBar.open(error.error, null, {
-                duration: 5000
-              });
-            }
-          );
           return;
         }
-        dialog = this.dialog.open(MultiPostComponent, {
-          maxHeight: '100vh',
-          maxWidth: '100vw',
-          height: '70%',
-          width: '70%',
-          data: { threadId: response.threadId, threadUrl: url }
-        });
+        this.appService.scan(e);
       });
-  }
-
-  clear() {
-    this.ngZone.run(() => {
-      this.httpClient.post<RemoveAllResponse>(this.serverService.baseUrl + '/post/clear/all', {}).subscribe(
-        data => {
-          this.postsComponent.removeRows(data.postIds);
-          this._snackBar.open(`${data.removed} items cleared`, null, { duration: 5000 });
-        },
-        error => {
-          this._snackBar.open(error.error, null, {
-            duration: 5000
-          });
-        }
-      );
     });
   }
 
-  remove() {
-    this.ngZone.run(() => {
-      this.dialog
-        .open(ConfirmDialogComponent, {
-          maxHeight: '100vh',
-          maxWidth: '100vw',
-          height: '200px',
-          width: '60%',
-          data: { header: 'Confirmation', content: 'Are you sure you want to remove all items ?' }
-        })
-        .afterClosed()
-        .pipe(
-          filter(e => e === 'yes'),
-          flatMap(e => this.httpClient.post<RemoveAllResponse>(this.serverService.baseUrl + '/post/remove/all', {}))
-        )
-        .subscribe(
-          data => {
-            this.postsComponent.removeRows(data.postIds);
-            this._snackBar.open(`${data.removed} items removed`, null, { duration: 5000 });
-          },
-          error => {
-            this._snackBar.open(error.error, null, {
-              duration: 5000
-            });
-          }
-        );
-    });
-  }
-
-  stopAll() {
-    this.ngZone.run(() => {
-      this.httpClient.post(this.serverService.baseUrl + '/post/stop/all', {}).subscribe(
-        () => {
-          this._snackBar.open(`Download stopped`, null, { duration: 5000 });
-        },
-        error => {
-          this._snackBar.open(error.error, null, {
-            duration: 5000
-          });
-        }
-      );
-    });
-  }
-
-  restartAll() {
-    this.ngZone.run(() => {
-      this.httpClient.post(this.serverService.baseUrl + '/post/restart/all', {}).subscribe(
-        () => {
-          this._snackBar.open(`Download started`, null, { duration: 5000 });
-        },
-        error => {
-          this._snackBar.open(error.error, null, {
-            duration: 5000
-          });
-        }
-      );
-    });
+  view(chip) {
+    console.log(chip);
   }
 
   ngOnDestroy() {
-    this.subscriptions.forEach(e => e.unsubscribe());
-    this.websocketHandlerPromise.then((handler: WsHandler) => {
-      handler.send(new WSMessage(CMD.GLOBAL_STATE_UNSUB.toString()));
-    });
   }
 }

vripper-ui/src/app/material.module.ts

@@ -15,7 +15,8 @@ import {
     MatSnackBarModule,
     MatSnackBar,
     MatTabsModule,
-    MatDividerModule
+    MatDividerModule,
+    MatChipsModule
 } from '@angular/material';
 
 @NgModule({
@@ -34,7 +35,8 @@ import {
         MatSlideToggleModule,
         MatSnackBarModule,
         MatTabsModule,
-        MatDividerModule
+        MatDividerModule,
+        MatChipsModule
     ],
     providers: [MatSnackBar]
 })

vripper-ui/src/app/multi-post/multi-post.component.html

@@ -1,23 +1,14 @@
-<div class="dialog-container" fxLayout="column" style="height: 100%;">
+<div fxLayout="column" style="height: 100%;">
   <div fxFlex="nogrow">
-    <h2 class="no-wrap" mat-dialog-title>Select posts to download from {{ data.threadUrl }}</h2>
     <form autocomplete="off" fxLayout="row" fxLayoutAlign="left center" fxLayoutGap="20px">
       <mat-form-field fxFlex="1 1 50%">
         <input (ngModelChange)="search($event)" matInput name="search" ngModel placeholder="Search"/>
       </mat-form-field>
     </form>
   </div>
-  <mat-dialog-content fxFlex="grow">
-    <ag-grid-angular [gridOptions]="gridOptions" class="ag-theme-material" style="width: 100%; height: 100%;">
-    </ag-grid-angular>
-  </mat-dialog-content>
+  <ag-grid-angular [gridOptions]="gridOptions" class="ag-theme-material" style="width: 100%; height: 100%;">
+  </ag-grid-angular>
   <div style="height: 4px; width: 100%; padding: 5px 0 0">
     <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
   </div>
-  <mat-dialog-actions align="end" fxFlex="nogrow">
-    <button (click)="close()" mat-raised-button>Close</button>
-    <button (click)="submit()" color="primary" mat-raised-button type="submit">
-      Download
-    </button>
-  </mat-dialog-actions>
 </div>

vripper-ui/src/app/multi-post/multi-post.component.ts

@@ -1,6 +1,6 @@
 import { VRPostParse, VRThreadParseState } from './../common/vr-post-parse.model';
-import { Component, Inject, OnInit, NgZone, OnDestroy } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
+import { Component, OnInit, NgZone, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { MatSnackBar } from '@angular/material';
 import { GridOptions } from 'ag-grid-community';
 import { UrlRendererComponent } from './url-renderer.component';
 import { WsHandler } from '../ws-handler';
@@ -17,15 +17,19 @@ import { ServerService } from '../server-service';
   styleUrls: ['./multi-post.component.scss']
 })
 export class MultiPostComponent implements OnInit, OnDestroy {
+
+  @Input()
+  threadId: string;
+
+  @Output()
+  done: EventEmitter<boolean> = new EventEmitter();
+
   gridOptions: GridOptions;
   websocketHandlerPromise: Promise<WsHandler>;
   subscription: Subscription;
-  threadId: string;
   loading = true;
 
   constructor(
-    public dialogRef: MatDialogRef<MultiPostComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { threadId: string; threadUrl: string },
     private ngZone: NgZone,
     private _snackBar: MatSnackBar,
     private wsConnectionService: WsConnectionService,
@@ -33,7 +37,6 @@ export class MultiPostComponent implements OnInit, OnDestroy {
     private serverService: ServerService
   ) {
     this.websocketHandlerPromise = this.wsConnectionService.getConnection();
-    this.threadId = data.threadId;
   }
 
   ngOnInit(): void {
@@ -45,6 +48,8 @@ export class MultiPostComponent implements OnInit, OnDestroy {
           cellClass: 'no-padding',
           maxWidth: 100,
           checkboxSelection: true,
+          headerCheckboxSelection: true,
+          headerCheckboxSelectionFilteredOnly: false,
           sort: 'asc'
         },
         {
@@ -109,7 +114,7 @@ export class MultiPostComponent implements OnInit, OnDestroy {
             this.gridOptions.api.updateRowData({ add: data });
           }
 
-          if (states[states.length - 1].state === 'END' && states[0].threadId === this.threadId) {
+          if (states.length > 0 && states[states.length - 1].state === 'END' && states[0].threadId === this.threadId) {
             this.ngZone.run(() => {
               this.loading = false;
               if (this.gridOptions.api.getDisplayedRowCount() === 1) {
@@ -119,25 +124,20 @@ export class MultiPostComponent implements OnInit, OnDestroy {
                     postId: e.postId
                   }))
                 );
+                this.done.emit(true);
               }
             });
           }
         }
       );
-      handler.send(new WSMessage(CMD.THREAD_PARSING_SUB.toString(), this.data.threadId));
-    });
-  }
-
-  close() {
-    this.ngZone.run(() => {
-      this.dialogRef.close();
+      handler.send(new WSMessage(CMD.THREAD_PARSING_SUB.toString(), this.threadId));
     });
   }
 
   submit() {
     const data = (<VRPostParse[]>this.gridOptions.api.getSelectedRows()).map(e => ({
       postId: e.postId,
-      threadId: this.data.threadId
+      threadId: this.threadId
     }));
     this.addPosts(data);
   }
@@ -148,7 +148,7 @@ export class MultiPostComponent implements OnInit, OnDestroy {
         this._snackBar.open('Adding posts to queue', null, {
           duration: 5000
         });
-        this.close();
+        this.done.emit();
       },
       error => {
         this._snackBar.open(error.error, null, {

vripper-ui/src/app/multi-post/url-renderer.component.ts

@@ -28,9 +28,7 @@ export class UrlRendererComponent implements OnInit, OnDestroy, AgRendererCompon
   }
 
   refresh(params: ICellRendererParams): boolean {
-    this.params = params;
-    this.postResult = this.params.data;
-    return true;
+    return false;
   }
 
   goTo() {

vripper-ui/src/app/post-detail/post-detail.component.ts

@@ -1,7 +1,7 @@
 import { PostDetailsProgressRendererComponent } from './post-details-progress.component';
 import { WsConnectionService } from './../ws-connection.service';
-import { Component, OnInit, ViewChild, Inject, OnDestroy, NgZone } from '@angular/core';
-import { MatSort, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { Component, OnInit, Inject, OnDestroy, NgZone } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { PostDetailsDataSource } from './post-details.datasource';
 import { PostState } from '../posts/post-state.model';
 import { GridOptions } from 'ag-grid-community';

vripper-ui/src/app/post-detail/post-details-progress.component.html

@@ -0,0 +1,30 @@
+<div class="container" style="height: 100%; background-color: white">
+  <div
+    [ngClass]="{
+      error: postDetails.status === 'ERROR'
+    }"
+    class="progress-bar-back"
+    style="position: relative; height: 100%;"
+  >
+    <div
+      class="progress-foreground"
+      fxLayout="row"
+      fxLayoutAlign="space-between"
+      style="background-color: transparent; width: 100%; height: 100%;"
+    >
+      <div class="progress-bar" style="position: absolute; width: 100%; top: 37px; padding: 0 20px">
+        <mat-progress-bar [value]="postDetails.progress" class="example-margin" color="primary" mode="determinate">
+        </mat-progress-bar>
+      </div>
+      <span fxLayout="row">
+        <span style="padding-left: 20px"
+        ><a (click)="goTo()" href="javascript:void(0)" style="color: rgba(0, 0, 0, 0.87);">{{
+            postDetails.url
+          }}</a></span
+        >
+        <span class="filler" fxFlex="grow"></span>
+      </span>
+      <span class="progress-percentage" style="padding-right: 20px">{{ trunc(postDetails.progress) + '%' }}</span>
+    </div>
+  </div>
+</div>

vripper-ui/src/app/post-detail/post-details-progress.component.scss-theme.scss

@@ -0,0 +1,24 @@
+@import '~@angular/material/theming';
+
+@mixin post-detail-renderer-component-theme($theme) {
+  $blue: mat-palette($mat-blue);
+  $red: mat-palette($mat-red);
+
+  .progress-bar .mat-progress-bar-fill::after {
+    background-color: mat-color($blue, 300);
+  }
+
+  .progress-bar .mat-progress-bar-buffer {
+    background-color: mat-color($blue, 100);
+  }
+
+  app-details-cell .error {
+    background-color: mat-color($red, 50);
+    & .progress-bar .mat-progress-bar-fill::after {
+      background-color: mat-color($red, 300);
+    }
+    & .progress-bar .mat-progress-bar-buffer {
+      background-color: mat-color($red, 100);
+    }
+  }
+}

vripper-ui/src/app/post-detail/post-details-progress.component.ts

@@ -8,63 +8,9 @@ import { ICellRendererParams } from 'ag-grid-community';
 import { ElectronService } from 'ngx-electron';
 
 @Component({
-  selector: 'app-progress-cell',
-  template: `
-    <div style="height: 100%;">
-      <div
-        class="progress-bar"
-        [ngClass]="{
-          complete: postDetails.status === 'COMPLETE',
-          downloading: postDetails.status === 'DOWNLOADING'
-        }"
-        [style.width]="trunc(postDetails.progress) + '%'"
-      ></div>
-      <div
-        class="progress-bar-back"
-        fxLayout="row"
-        fxLayoutAlign="space-between"
-        [ngClass]="{
-          error: postDetails.status === 'ERROR',
-          stopped: postDetails.status === 'STOPPED',
-          pending: postDetails.status === 'PENDING'
-        }"
-      >
-        <a style="color: rgba(0, 0, 0, 0.87);" href="javascript:void(0)" (click)="goTo()">{{ postDetails.url }}</a>
-        <div>{{ trunc(postDetails.progress) + '%' }}</div>
-      </div>
-    </div>
-  `,
-  styles: [
-    `
-      .progress-bar-back {
-        position: relative;
-        height: 45px;
-        bottom: 45px;
-        padding: 0 8px;
-        transition: background-color 0.5s;
-      }
-      .progress-bar {
-        background-color: #87a2c7;
-        height: 100%;
-        transition: width 0.5s, background-color 0.5s;
-      }
-      .complete {
-        background-color: #3865a3;
-      }
-      .pending {
-        background-color: white;
-      }
-      .error {
-        background-color: #eb6060;
-      }
-      .downloading {
-        background-color: #87a2c7;
-      }
-      .stopped {
-        background-color: grey;
-      }
-    `
-  ]
+  selector: 'app-details-cell',
+  templateUrl: 'post-details-progress.component.html',
+  styleUrls: ['post-details-progress.component.scss']
 })
 export class PostDetailsProgressRendererComponent implements AgRendererComponent, OnInit, OnDestroy {
   constructor(
@@ -107,7 +53,9 @@ export class PostDetailsProgressRendererComponent implements AgRendererComponent
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    if (this.subscription != null) {
+      this.subscription.unsubscribe();
+    }
   }
 
   agInit(params: ICellRendererParams): void {
@@ -116,8 +64,6 @@ export class PostDetailsProgressRendererComponent implements AgRendererComponent
   }
 
   refresh(params: ICellRendererParams): boolean {
-    this.params = params;
-    this.postDetails = params.data;
-    return true;
+    return false;
   }
 }

vripper-ui/src/app/posts/menu.renderer.component.ts

@@ -1,229 +0,0 @@
-import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
-import { AgRendererComponent } from 'ag-grid-angular';
-import { PostState } from './post-state.model';
-import { PostDetailComponent } from '../post-detail/post-detail.component';
-import { MatDialog, MatSnackBar } from '@angular/material';
-import { HttpClient } from '@angular/common/http';
-import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
-import { Observable, Subscription } from 'rxjs';
-import { WsConnectionService } from '../ws-connection.service';
-import { WsHandler } from '../ws-handler';
-import { ServerService } from '../server-service';
-import { ICellRendererParams } from 'ag-grid-community';
-import { RemoveResponse } from '../common/remove-response.model';
-import { ConfirmDialogComponent } from '../common/confirmation-component/confirmation-dialog';
-import { filter, flatMap } from 'rxjs/operators';
-import { ElectronService } from 'ngx-electron';
-import { DownloadPath } from '../common/download-path.model';
-
-@Component({
-  selector: 'app-menu-cell',
-  template: `
-    <div fxLayout="column" fxLayoutAlign="center center" style="height: 48px">
-      <button fxFlex="nogrow" mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>more_vert</mat-icon>
-      </button>
-    </div>
-
-    <mat-menu #menu="matMenu">
-      <button
-        *ngIf="
-          postData.status === 'PENDING' ||
-          (postData.status === 'COMPLETE' && postData.progress !== 100) ||
-          postData.status === 'ERROR' ||
-          postData.status === 'STOPPED'
-        "
-        (click)="restart()"
-        mat-menu-item
-      >
-        <mat-icon>play_arrow</mat-icon>
-        <span>Start</span>
-      </button>
-      <button *ngIf="postData.status === 'DOWNLOADING' || postData.status === 'PARTIAL'" (click)="stop()" mat-menu-item>
-        <ng-container>
-          <mat-icon>stop</mat-icon>
-          <span>Stop</span>
-        </ng-container>
-      </button>
-      <button (click)="seeDetails()" mat-menu-item>
-        <mat-icon>list</mat-icon>
-        <span>Details</span>
-      </button>
-      <button (click)="remove()" mat-menu-item>
-        <mat-icon>delete</mat-icon>
-        <span>Remove</span>
-      </button>
-      <button *ngIf="electronService.isElectronApp" (click)="open()" mat-menu-item>
-        <mat-icon>open_in_new</mat-icon>
-        <span>Download Location</span>
-      </button>
-    </mat-menu>
-  `
-})
-export class MenuRendererComponent implements OnInit, OnDestroy, AgRendererComponent {
-  constructor(
-    public dialog: MatDialog,
-    private httpClient: HttpClient,
-    private breakpointObserver: BreakpointObserver,
-    private wsConnectionService: WsConnectionService,
-    private serverService: ServerService,
-    private zone: NgZone,
-    private _snackBar: MatSnackBar,
-    public electronService: ElectronService
-  ) {
-    this.websocketHandlerPromise = this.wsConnectionService.getConnection();
-    if (this.electronService.isElectronApp) {
-      this.fs = this.electronService.remote.require('fs');
-    }
-  }
-
-  isExtraSmall: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.XSmall);
-
-  params: ICellRendererParams;
-
-  postData: PostState;
-
-  subscription: Subscription;
-
-  websocketHandlerPromise: Promise<WsHandler>;
-
-  fs;
-
-  ngOnInit(): void {
-    this.websocketHandlerPromise.then((handler: WsHandler) => {
-      this.subscription = handler.subscribeForPosts(e => {
-        this.zone.run(() => {
-          e.forEach(v => {
-            if (this.postData.postId === v.postId) {
-              this.postData = v;
-            }
-          });
-        });
-      });
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.subscription.unsubscribe();
-  }
-
-  seeDetails() {
-    const dialogRef = this.dialog.open(PostDetailComponent, {
-      width: '90%',
-      height: '90%',
-      maxWidth: '100vw',
-      maxHeight: '100vh',
-      data: this.postData
-    });
-
-    const smallDialogSubscription = this.isExtraSmall.subscribe(result => {
-      if (result.matches) {
-        dialogRef.updateSize('100%', '100%');
-      } else {
-        dialogRef.updateSize('90%', '90%');
-      }
-    });
-
-    dialogRef.afterClosed().subscribe(() => {
-      smallDialogSubscription.unsubscribe();
-    });
-  }
-
-  restart() {
-    this.httpClient.post(this.serverService.baseUrl + '/post/restart', { postId: this.postData.postId }).subscribe(
-      () => {
-        this._snackBar.open('Download started', null, {
-          duration: 5000
-        });
-      },
-      error => {
-        console.error(error);
-      }
-    );
-  }
-
-  remove() {
-    this.dialog
-      .open(ConfirmDialogComponent, {
-        maxHeight: '100vh',
-        maxWidth: '100vw',
-        height: '200px',
-        width: '60%',
-        data: { header: 'Confirmation', content: 'Are you sure you want to remove this item ?' }
-      })
-      .afterClosed()
-      .pipe(
-        filter(e => e === 'yes'),
-        flatMap(e =>
-          this.httpClient.post<RemoveResponse>(this.serverService.baseUrl + '/post/remove', {
-            postId: this.postData.postId
-          })
-        )
-      )
-      .subscribe(
-        data => {
-          const toRemove = [];
-          const nodeToDelete = this.params.api.getRowNode(data.postId);
-          if (nodeToDelete != null) {
-            toRemove.push(nodeToDelete.data);
-          }
-          this.params.api.updateRowData({ remove: toRemove });
-        },
-        error => {
-          console.error(error);
-        }
-      );
-  }
-
-  open() {
-    if (!this.electronService.isElectronApp) {
-      console.error('Cannot open downloader folder, not electron app');
-      return;
-    }
-    // Request the server to give the correct file location
-    this.httpClient.get<DownloadPath>(this.serverService.baseUrl + '/post/path/' + this.postData.postId).subscribe(
-      path => {
-        if (this.fs.existsSync(path.path)) {
-          this.electronService.shell.openItem(path.path);
-        } else {
-          if(this.postData.done <= 0) {
-            this._snackBar.open('Download has not been started yet for this post', null, {
-              duration: 5000
-            });
-          } else {
-            this._snackBar.open(path.path + ' does not exist, you probably removed it', null, {
-              duration: 5000
-            });
-          }
-        }
-      },
-      error => {
-        console.error(error);
-      }
-    );
-  }
-
-  stop() {
-    this.httpClient.post(this.serverService.baseUrl + '/post/stop', { postId: this.postData.postId }).subscribe(
-      () => {
-        this._snackBar.open('Download stopped', null, {
-          duration: 5000
-        });
-      },
-      error => {
-        console.error(error);
-      }
-    );
-  }
-
-  agInit(params: ICellRendererParams): void {
-    this.params = params;
-    this.postData = params.data;
-  }
-
-  refresh(params: ICellRendererParams): boolean {
-    this.params = params;
-    this.postData = params.data;
-    return true;
-  }
-}

vripper-ui/src/app/posts/post-progress.renderer.component.html

@@ -0,0 +1,104 @@
+<div class="container" style="height: 100%; background-color: white">
+  <div
+    [ngClass]="{
+      'error': postState.status === 'ERROR',
+      'downloading': postState.status === 'DOWNLOADING' || postState.status === 'PARTIAL',
+      'complete': postState.status === 'COMPLETE',
+      'stopped': postState.status === 'STOPPED'
+    }"
+    class="progress-bar-back"
+    style="position: relative; height: 100%; max-height: 48px;"
+  >
+    <div
+      class="progress-foreground"
+      fxLayout="row"
+      fxLayoutAlign="space-between"
+      style="background-color: transparent; width: 100%; height: 100%;"
+    >
+      <div class="progress-bar" color="accent" style="position: absolute; width: 100%; top: 37px; padding: 0 50px">
+        <mat-progress-bar [value]="postState.progress" class="example-margin" color="primary" mode="determinate">
+        </mat-progress-bar>
+      </div>
+      <span fxLayout="row">
+        <span (click)="toggleExpand()" class="chevron">
+          <button *ngIf="expanded; else notExpanded" mat-icon-button>
+            <mat-icon>expand_more</mat-icon>
+          </button>
+          <ng-template #notExpanded>
+            <button mat-icon-button>
+              <mat-icon>chevron_right</mat-icon>
+            </button>
+          </ng-template>
+        </span>
+        <span>{{ postState.title }}</span>
+        <span class="filler" fxFlex="grow"></span>
+      </span>
+      <span>
+        <span class="progress-percentage">{{ postState.done + '/' + postState.total }}</span>
+        <button [matMenuTriggerFor]="menu" mat-icon-button>
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button
+            (click)="restart()"
+            *ngIf="
+              (postState.status === 'COMPLETE' && postState.progress !== 100) ||
+              postState.status === 'ERROR' ||
+              postState.status === 'STOPPED'
+            "
+            mat-menu-item
+          >
+            <mat-icon>play_arrow</mat-icon>
+            <span>Start</span>
+          </button>
+          <button
+            (click)="stop()"
+            *ngIf="postState.status === 'DOWNLOADING' || postState.status === 'PARTIAL' || postState.status === 'PENDING'"
+            mat-menu-item
+          >
+            <ng-container>
+              <mat-icon>stop</mat-icon>
+              <span>Stop</span>
+            </ng-container>
+          </button>
+          <button (click)="seeDetails()" mat-menu-item>
+            <mat-icon>list</mat-icon>
+            <span>Files</span>
+          </button>
+          <button (click)="remove()" mat-menu-item>
+            <mat-icon>delete</mat-icon>
+            <span>Remove</span>
+          </button>
+          <button (click)="open()" *ngIf="electronService.isElectronApp" mat-menu-item>
+            <mat-icon>open_in_new</mat-icon>
+            <span>Download Location</span>
+          </button>
+        </mat-menu>
+      </span>
+    </div>
+  </div>
+  <section *ngIf="expanded">
+    <div class="details table">
+      <div class="row" style="display: table-row">
+        <h4 class="cell attribute">Status:</h4>
+        <p class="cell value">
+          {{ postState.status | titlecase }}
+        </p>
+      </div>
+      <div class="row" style="display: table-row">
+        <h4 class="cell attribute">Post URL:</h4>
+        <p class="cell value">
+          <a (click)="goTo()" [appPreview]="postState.previews" href="javascript:void(0)"
+          >https://vipergirls/threads/?p={{ postState.postId }}</a
+          >
+        </p>
+      </div>
+      <div style="display: table-row">
+        <h4 class="cell attribute">Host:</h4>
+        <p class="cell value">
+          {{ postState.hosts }}
+        </p>
+      </div>
+    </div>
+  </section>
+</div>

vripper-ui/src/app/posts/post-progress.renderer.component.scss

@@ -0,0 +1,28 @@
+.progress-bar-back {
+  transition: background-color 0.5s;
+}
+
+.table {
+  display: table;
+}
+.row {
+  display: table-row;
+}
+.cell {
+  display: table-cell;
+}
+
+section {
+  width: 100%;
+  position: absolute;
+  top: 48px;
+  padding: 10px;
+}
+
+.details {
+  line-height: 24px;
+}
+
+.value {
+  padding-left: 5px;
+}

vripper-ui/src/app/posts/post-progress.renderer.component.scss-theme.scss

@@ -0,0 +1,49 @@
+@import '~@angular/material/theming';
+
+@mixin post-progress-renderer-component-theme($theme) {
+  $red: mat-palette($mat-red);
+  $grey: mat-palette($mat-grey);
+  $green: mat-palette($mat-green);
+
+  app-progress-cell .progress-bar .mat-progress-bar-fill::after {
+    background-color: mat-color($grey, 400);
+  }
+
+  app-progress-cell .progress-bar .mat-progress-bar-buffer {
+    background-color: mat-color($grey, 200);
+  }
+
+  app-progress-cell .error {
+    background-color: mat-color($red, 50);
+    & .progress-bar .mat-progress-bar-fill::after {
+      background-color: mat-color($red, 300);
+    }
+    & .progress-bar .mat-progress-bar-buffer {
+      background-color: mat-color($red, 100);
+    }
+  }
+
+  app-progress-cell .downloading {
+    background-color: mat-color($green, 50);
+    & .progress-bar .mat-progress-bar-fill::after {
+      background-color: mat-color($green, 300);
+    }
+    & .progress-bar .mat-progress-bar-buffer {
+      background-color: mat-color($green, 100);
+    }
+  }
+
+  app-progress-cell .complete {
+    background-color: mat-color($green, 100);
+    & .progress-bar .mat-progress-bar-fill::after {
+      background-color: mat-color($green, 300);
+    }
+    & .progress-bar .mat-progress-bar-buffer {
+      background-color: mat-color($green, 100);
+    }
+  }
+
+  app-progress-cell .stopped {
+    background-color: mat-color($grey, 100);
+  }
+}

vripper-ui/src/app/posts/post-progress.renderer.component.ts

@@ -3,169 +3,41 @@ import { WsConnectionService } from '../ws-connection.service';
 import { PostState } from './post-state.model';
 import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { AgRendererComponent } from 'ag-grid-angular';
-import { Subscription } from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 import { WsHandler } from '../ws-handler';
 import { ICellRendererParams } from 'ag-grid-community';
 import { ElectronService } from 'ngx-electron';
+import { BreakpointState, Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import { MatDialog, MatSnackBar } from '@angular/material';
+import { PostDetailComponent } from '../post-detail/post-detail.component';
+import { HttpClient } from '@angular/common/http';
+import { ServerService } from '../server-service';
+import { ConfirmDialogComponent } from '../common/confirmation-component/confirmation-dialog';
+import { filter, flatMap } from 'rxjs/operators';
+import { RemoveResponse } from '../common/remove-response.model';
+import { DownloadPath } from '../common/download-path.model';
 
 @Component({
   selector: 'app-progress-cell',
-  template: `
-    <div style="height: 100%;">
-      <div class="progress-text" fxLayout="row" fxLayoutAlign="space-between" (click)="toggleExpand()">
-        <div>
-          <div class="chevron" style="display: inline-block;">
-            <mat-icon *ngIf="expanded; else notExpanded" style="vertical-align: middle;">expand_more</mat-icon>
-            <ng-template #notExpanded>
-              <mat-icon style="vertical-align: middle;">chevron_right</mat-icon>
-            </ng-template>
-          </div>
-          {{ postState.title }}
-        </div>
-        <div>{{ postState.done + '/' + postState.total }}</div>
-      </div>
-      <div
-        class="progress-bar"
-        [ngClass]="{
-          complete: postState.status === 'COMPLETE',
-          downloading: postState.status === 'DOWNLOADING',
-          stopped: postState.status === 'STOPPED',
-          partial: postState.status === 'PARTIAL',
-          error: postState.status === 'ERROR',
-          pending: postState.status === 'PENDING'
-        }"
-        [style.width]="trunc(postState.progress) + '%'"
-      ></div>
-      <div
-        class="progress-bar-back"
-        [ngClass]="{
-          'complete-back': postState.status === 'COMPLETE',
-          'downloading-back': postState.status === 'DOWNLOADING',
-          'stopped-back': postState.status === 'STOPPED',
-          'partial-back': postState.status === 'PARTIAL',
-          'error-back': postState.status === 'ERROR',
-          'pending-back': postState.status === 'PENDING'
-        }"
-      ></div>
-      <section *ngIf="expanded">
-        <div class="details table">
-          <div class="row" style="display: table-row">
-            <h4 class="cell attribute">Status:</h4>
-            <p class="cell value">
-              {{ postState.status | titlecase }}
-            </p>
-          </div>
-          <div class="row" style="display: table-row">
-            <h4 class="cell attribute">Post URL:</h4>
-            <p class="cell value">
-              <a href="javascript:void(0)" [appPreview]="postState.previews" (click)="goTo()"
-                >https://vipergirls/threads/?p={{ postState.postId }}</a
-              >
-            </p>
-          </div>
-          <div style="display: table-row">
-            <h4 class="cell attribute">Host:</h4>
-            <p class="cell value">
-              {{ postState.hosts }}
-            </p>
-          </div>
-        </div>
-      </section>
-    </div>
-  `,
-  styles: [
-    `
-      .progress-text {
-        position: relative;
-        padding: 0 8px;
-        z-index: 2;
-        height: 46px;
-      }
-      .progress-bar {
-        position: relative;
-        height: 46px;
-        bottom: 46px;
-        transition: width 0.5s, background-color 0.5s;
-        z-index: 1;
-      }
-      .progress-bar-back {
-        position: relative;
-        height: 46px;
-        bottom: 92px;
-        transition: background-color 0.5s;
-      }
-      .complete {
-        background-color: #3865a3;
-      }
-      .complete-back {
-        background-color: lightgrey;
-      }
-      .pending {
-        background-color: white;
-      }
-      .pending-back {
-        background-color: lightgrey;
-      }
-      .error {
-        background-color: #eb6060;
-      }
-      .error-back {
-        background-color: #eb6060;
-      }
-      .downloading {
-        background-color: #87a2c7;
-      }
-      .downloading-back {
-        background-color: white;
-      }
-      .stopped {
-        background-color: grey;
-      }
-      .stopped-back {
-        background-color: lightgrey;
-      }
-      .partial {
-        background-color: #ffcc00;
-      }
-      .partial-back {
-        background-color: white;
-      }
-
-      .table {
-        display: table;
-      }
-      .row {
-        display: table-row;
-      }
-      .cell {
-        display: table-cell;
-      }
-
-      section {
-        width: 100%;
-        position: absolute;
-        top: 46px;
-        padding: 10px;
-      }
-
-      .details {
-        line-height: 24px;
-      }
-
-      .value {
-        padding-left: 5px;
-      }
-    `
-  ]
+  templateUrl: 'post-progress.renderer.component.html',
+  styleUrls: ['post-progress.renderer.component.scss']
 })
 export class PostProgressRendererComponent implements AgRendererComponent, OnInit, OnDestroy {
   constructor(
     private wsConnectionService: WsConnectionService,
     private zone: NgZone,
     private sharedService: SharedService,
-    public electronService: ElectronService
+    public electronService: ElectronService,
+    private breakpointObserver: BreakpointObserver,
+    public dialog: MatDialog,
+    private httpClient: HttpClient,
+    private serverService: ServerService,
+    private _snackBar: MatSnackBar,
   ) {
     this.websocketHandlerPromise = this.wsConnectionService.getConnection();
+    if (this.electronService.isElectronApp) {
+      this.fs = this.electronService.remote.require('fs');
+    }
   }
 
   websocketHandlerPromise: Promise<WsHandler>;
@@ -174,6 +46,8 @@ export class PostProgressRendererComponent implements AgRendererComponent, OnIni
   updatesSubscription: Subscription;
   expandSubscription: Subscription;
   expanded = false;
+  isExtraSmall: Observable<BreakpointState> = this.breakpointObserver.observe(Breakpoints.XSmall);
+  fs;
 
   trunc(value: number): number {
     return Math.trunc(value);
@@ -193,25 +67,29 @@ export class PostProgressRendererComponent implements AgRendererComponent, OnIni
     });
     this.expandSubscription = this.sharedService.expandedPost.subscribe(postId => {
       if (this.expanded && this.postState.postId !== postId) {
-        setTimeout(this.toggleExpand.bind(this), 100);
+        this.toggleExpand();
       }
     });
   }
 
   ngOnDestroy(): void {
-    this.updatesSubscription.unsubscribe();
-    this.expandSubscription.unsubscribe();
+    if (this.updatesSubscription != null) {
+      this.updatesSubscription.unsubscribe();
+
+    }
+    if (this.expandSubscription != null) {
+      this.expandSubscription.unsubscribe();
+    }
   }
 
   agInit(params: ICellRendererParams): void {
     this.params = params;
     this.postState = params.data;
+    this.params.node.setRowHeight(48);
   }
 
   refresh(params: ICellRendererParams): boolean {
-    this.params = params;
-    this.postState = params.data;
-    return true;
+    return false;
   }
 
   toggleExpand() {
@@ -232,4 +110,115 @@ export class PostProgressRendererComponent implements AgRendererComponent, OnIni
       window.open(this.postState.url, '_blank');
     }
   }
+
+  seeDetails() {
+    const dialogRef = this.dialog.open(PostDetailComponent, {
+      width: '90%',
+      height: '90%',
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      data: this.postState
+    });
+
+    const smallDialogSubscription = this.isExtraSmall.subscribe(result => {
+      if (result.matches) {
+        dialogRef.updateSize('100%', '100%');
+      } else {
+        dialogRef.updateSize('90%', '90%');
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(() => {
+      if (smallDialogSubscription != null) {
+        smallDialogSubscription.unsubscribe();
+      }
+    });
+  }
+
+  restart() {
+    this.httpClient.post(this.serverService.baseUrl + '/post/restart', { postId: this.postState.postId }).subscribe(
+      () => {
+        this._snackBar.open('Download started', null, {
+          duration: 5000
+        });
+      },
+      error => {
+        console.error(error);
+      }
+    );
+  }
+
+  remove() {
+    this.dialog
+      .open(ConfirmDialogComponent, {
+        maxHeight: '100vh',
+        maxWidth: '100vw',
+        height: '200px',
+        width: '60%',
+        data: { header: 'Confirmation', content: 'Are you sure you want to remove this item ?' }
+      })
+      .afterClosed()
+      .pipe(
+        filter(e => e === 'yes'),
+        flatMap(e =>
+          this.httpClient.post<RemoveResponse>(this.serverService.baseUrl + '/post/remove', {
+            postId: this.postState.postId
+          })
+        )
+      )
+      .subscribe(
+        data => {
+          const toRemove = [];
+          const nodeToDelete = this.params.api.getRowNode(data.postId);
+          if (nodeToDelete != null) {
+            toRemove.push(nodeToDelete.data);
+          }
+          this.params.api.updateRowData({ remove: toRemove });
+        },
+        error => {
+          console.error(error);
+        }
+      );
+  }
+
+  open() {
+    if (!this.electronService.isElectronApp) {
+      console.error('Cannot open downloader folder, not electron app');
+      return;
+    }
+    // Request the server to give the correct file location
+    this.httpClient.get<DownloadPath>(this.serverService.baseUrl + '/post/path/' + this.postState.postId).subscribe(
+      path => {
+        if (this.fs.existsSync(path.path)) {
+          this.electronService.shell.openItem(path.path);
+        } else {
+          if(this.postState.done <= 0) {
+            this._snackBar.open('Download has not been started yet for this post', null, {
+              duration: 5000
+            });
+          } else {
+            this._snackBar.open(path.path + ' does not exist, you probably removed it', null, {
+              duration: 5000
+            });
+          }
+        }
+      },
+      error => {
+        console.error(error);
+      }
+    );
+  }
+
+  stop() {
+    this.httpClient.post(this.serverService.baseUrl + '/post/stop', { postId: this.postState.postId }).subscribe(
+      () => {
+        this._snackBar.open('Download stopped', null, {
+          duration: 5000
+        });
+      },
+      error => {
+        console.error(error);
+      }
+    );
+  }
 }

vripper-ui/src/app/posts/posts.component.html

@@ -1,2 +1,12 @@
+<div fxLayout="row" fxLayoutAlign="center center">
+  <!-- <app-filter fxFlex="noshrink"></app-filter> -->
+  <span fxFlex="grow"></span>
+  <form autocomplete="off">
+    <mat-form-field>
+      <input (ngModelChange)="search($event)" matInput name="search" ngModel placeholder="Search"/>
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+  </form>
+</div>
 <ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-material" [gridOptions]="gridOptions">
-</ag-grid-angular>
+</ag-grid-angular>

vripper-ui/src/app/posts/posts.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { PostsDataSource } from './post.datasource';
 import { WsConnectionService } from '../ws-connection.service';
-import { GridOptions } from 'ag-grid-community';
+import { GridOptions, IFilterComp } from 'ag-grid-community';
 import { PostProgressRendererComponent } from './post-progress.renderer.component';
-import { MenuRendererComponent } from './menu.renderer.component';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -12,41 +11,27 @@ import { Subject } from 'rxjs';
   styleUrls: ['./posts.component.scss']
 })
 export class PostsComponent implements OnInit, OnDestroy {
-
-  constructor(
-    private wsConnection: WsConnectionService,
-    private zone: NgZone
-    ) {
-    this.gridOptions = <GridOptions> {
+  constructor(private wsConnection: WsConnectionService, private zone: NgZone) {
+    this.gridOptions = <GridOptions>{
       columnDefs: [
         {
-          headerName: 'Title',
+          headerName: 'Posts',
           field: 'title',
           sortable: true,
           cellRenderer: 'progressCellRenderer',
           cellClass: 'no-padding',
           sort: 'asc'
-        },
-        {
-          headerName: 'Menu',
-          cellRenderer: 'menuCellRenderer',
-          sortable: true,
-          width: 60,
-          minWidth: 60,
-          maxWidth: 60,
-          suppressAutoSize: true
         }
       ],
       rowHeight: 48,
       animateRows: true,
       rowData: [],
       frameworkComponents: {
-        progressCellRenderer: PostProgressRendererComponent,
-        menuCellRenderer: MenuRendererComponent
+        progressCellRenderer: PostProgressRendererComponent
       },
       overlayLoadingTemplate: '<span></span>',
       overlayNoRowsTemplate: '<span></span>',
-      getRowNodeId: (data) => data['postId'],
+      getRowNodeId: data => data['postId'],
       onGridReady: () => {
         this.gridOptions.api.sizeColumnsToFit();
         this.dataSource = new PostsDataSource(this.wsConnection, this.gridOptions, this.zone);
@@ -61,6 +46,10 @@ export class PostsComponent implements OnInit, OnDestroy {
   gridOptions: GridOptions;
   dataSource: PostsDataSource;
 
+  search(event) {
+    this.gridOptions.api.setQuickFilter(event);
+  }
+
   removeRows(postIds: string[]): void {
     if (postIds == null) {
       return;
@@ -77,8 +66,7 @@ export class PostsComponent implements OnInit, OnDestroy {
     this.gridOptions.api.updateRowData({ remove: toRemove });
   }
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ngOnDestroy(): void {
     this.dataSource.disconnect();

vripper-ui/src/app/scan/scan.component.html

@@ -0,0 +1,39 @@
+<div class="dialog-container" fxLayout="column" style="height: 100%;">
+  <div fxFlex="nogrow">
+    <h2 class="no-wrap" mat-dialog-title>Scan</h2>
+  </div>
+  <mat-dialog-content fxFlex="grow" fxLayout="column">
+    <div *ngIf="!hideScan">
+      <form
+        #f="ngForm"
+        (ngSubmit)="submit(f)"
+        autocomplete="off"
+        fxLayout="row"
+        fxLayoutAlign="center center"
+        fxLayoutGap="20px"
+      >
+        <mat-form-field fxFlex="grow">
+          <input
+            [(ngModel)]="input"
+            matInput
+            name="url"
+            placeholder="Put a vipergirls.to link"
+            required
+          />
+        </mat-form-field>
+        <div>
+          <button [disabled]="f.invalid" color="primary" mat-raised-button type="submit">Scan</button>
+        </div>
+      </form>
+    </div>
+    <ng-container *ngIf="threadId != null">
+      <app-multi-post (done)="done($event)" [threadId]="threadId" style="height: 100%"></app-multi-post>
+    </ng-container>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button (click)="close()" mat-raised-button>Close</button>
+    <button (click)="addPosts()" *ngIf="threadId != null" color="primary" mat-raised-button type="submit">
+      Download
+    </button>
+  </mat-dialog-actions>
+</div>

vripper-ui/src/app/scan/scan.component.scss

@@ -0,0 +1,3 @@
+:host ::ng-deep .ag-cell {
+    background-color: snow !important;
+}

vripper-ui/src/app/scan/scan.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScanComponent } from './scan.component';
+
+describe('ScanComponent', () => {
+  let component: ScanComponent;
+  let fixture: ComponentFixture<ScanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

vripper-ui/src/app/scan/scan.component.ts

@@ -0,0 +1,112 @@
+import { Component, OnInit, NgZone, ViewChild, Inject } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { MatSnackBar, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { HttpClient } from '@angular/common/http';
+import { finalize } from 'rxjs/operators';
+import { ServerService } from '../server-service';
+import { MultiPostComponent } from '../multi-post/multi-post.component';
+
+@Component({
+  selector: 'app-scan',
+  templateUrl: './scan.component.html',
+  styleUrls: ['./scan.component.scss']
+})
+export class ScanComponent implements OnInit {
+  constructor(
+    private ngZone: NgZone,
+    private httpClient: HttpClient,
+    private serverService: ServerService,
+    private _snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<ScanComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData
+  ) {}
+
+  @ViewChild(MultiPostComponent)
+  multipost: MultiPostComponent;
+
+  input: string;
+  threadId: string;
+  hideScan = false;
+
+  submit(form: NgForm) {
+    this.ngZone.run(() => {
+      this.hideScan = true;
+      this.threadId = null;
+      this.processUrl(this.input, form);
+    });
+  }
+
+  done(done: boolean) {
+    this.ngZone.run(() => {
+      if (done) {
+        this.dialogRef.close();
+      }
+    });
+  }
+
+  processUrl(url: string, form?: NgForm) {
+    this.httpClient
+      .post<{ threadId: string; postId: string }>(this.serverService.baseUrl + '/post', { url: url })
+      .pipe(
+        finalize(() => {
+          this.ngZone.run(() => {
+            if (form != null) {
+              form.resetForm();
+              this.input = null;
+            }
+          });
+        })
+      )
+      .subscribe(response => {
+        this.ngZone.run(() => {
+          if (response.postId != null) {
+            this.httpClient
+              .post(this.serverService.baseUrl + '/post/add', [response])
+              .pipe(finalize(() => this.dialogRef.close()))
+              .subscribe(
+                () => {
+                  this._snackBar.open('Adding posts to queue', null, {
+                    duration: 5000
+                  });
+                },
+                error => {
+                  this._snackBar.open(error.error, null, {
+                    duration: 5000
+                  });
+                }
+              );
+            return;
+          }
+          this.threadId = response.threadId;
+        });
+      });
+  }
+
+  addPosts() {
+    this.ngZone.run(() => {
+      if (this.multipost != null) {
+        this.multipost.submit();
+      }
+      this.dialogRef.close();
+    });
+  }
+
+  ngOnInit() {
+    this.ngZone.run(() => {
+      if (this.data.url != null) {
+        this.hideScan = true;
+        this.processUrl(this.data.url);
+      }
+    });
+  }
+
+  close() {
+    this.ngZone.run(() => {
+      this.dialogRef.close();
+    });
+  }
+}
+
+export interface DialogData {
+  url: string;
+}

vripper-ui/src/app/settings/settings.component.html

@@ -1,6 +1,9 @@
 <div fxLayout="column" class="dialog-container" style="height: 100%;">
-  <div fxFlex="nogrow">
+  <div fxFlex="nogrow" fxLayout="row" fxLayoutAlign="space-between center">
     <h2 class="no-wrap" mat-dialog-title>Settings</h2>
+    <mat-slide-toggle (change)="updateTheme()" [(ngModel)]="darkTheme"
+    >{{ darkTheme ? 'Dark theme' : 'Light theme' }}
+    </mat-slide-toggle>
   </div>
   <mat-dialog-content fxFlex="grow">
     <div class="container">
@@ -35,15 +38,27 @@
               />
             </mat-form-field>
 
+            <mat-checkbox color="primary" formControlName="subLocation" name="subLocation"
+            >Save posts in sub folders
+            </mat-checkbox>
+
+            <mat-checkbox *ngIf="generalSettingsForm.get('subLocation').value" color="primary"
+                          formControlName="threadSubLocation" name="threadSubLocation" style="margin-left: 15px"
+            >Create a subfolder per thread
+            </mat-checkbox>
+
             <mat-checkbox color="primary" formControlName="forceOrder" name="forceOrder"
             >Force image ordering (prepend incremental numbers)
-            </mat-checkbox
-            >
+            </mat-checkbox>
 
             <mat-checkbox color="primary" formControlName="autoStart" name="autoStart"
               >Auto start downloads</mat-checkbox
             >
 
+            <mat-checkbox color="primary" formControlName="clearCompleted" name="clearCompleted"
+            >Clear Finished
+            </mat-checkbox>
+
             <mat-slide-toggle color="primary" formControlName="vLogin" name="vLogin">
               ViperGirls Authentication
             </mat-slide-toggle>
@@ -86,7 +101,11 @@
       (click)="onSubmit()"
       color="primary"
       type="submit"
-      [disabled]="(generalSettingsForm.pristine && desktopSettingsForm.pristine) || generalSettingsForm.invalid || desktopSettingsForm.invalid"
+      [disabled]="
+        (generalSettingsForm.pristine && desktopSettingsForm.pristine) ||
+        generalSettingsForm.invalid ||
+        desktopSettingsForm.invalid
+      "
     >
       Apply
     </button>

vripper-ui/src/app/settings/settings.component.ts

@@ -1,3 +1,4 @@
+import { AppService } from './../app.service';
 import { ClipboardService } from './../clipboard.service';
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
@@ -6,6 +7,7 @@ import { MatSnackBar } from '@angular/material';
 import { ServerService } from '../server-service';
 import { ElectronService } from 'ngx-electron';
 import { Settings } from '../common/settings.model';
+import { OpenDialogReturnValue } from 'electron';
 
 @Component({
   selector: 'app-settings',
@@ -18,7 +20,8 @@ export class SettingsComponent implements OnInit {
     private _snackBar: MatSnackBar,
     private serverService: ServerService,
     public electronService: ElectronService,
-    private clipboardService: ClipboardService
+    private clipboardService: ClipboardService,
+    private appService: AppService
   ) {}
 
   generalSettingsForm = new FormGroup({
@@ -26,17 +29,27 @@ export class SettingsComponent implements OnInit {
     maxThreads: new FormControl(''),
     autoStart: new FormControl(false),
     forceOrder: new FormControl(false),
+    subLocation: new FormControl(false),
+    threadSubLocation: new FormControl(false),
+    clearCompleted: new FormControl(false),
     vLogin: new FormControl(false),
     vUsername: new FormControl(''),
     vPassword: new FormControl(''),
-    vThanks: new FormControl(false)
+    vThanks: new FormControl(false),
   });
 
   desktopSettingsForm = new FormGroup({
     desktopClipboard: new FormControl(false)
   });
 
+  darkTheme = false;
+
+  updateTheme() {
+    this.appService.updateTheme(this.darkTheme);
+  }
+
   ngOnInit() {
+    this.darkTheme = this.appService.darkTheme;
     this.httpClient.get<Settings>(this.serverService.baseUrl + '/settings').subscribe(
       data => {
         this.generalSettingsForm.reset(data);
@@ -49,18 +62,19 @@ export class SettingsComponent implements OnInit {
   }
 
   browse() {
-    const result: string[] | undefined = this.electronService.remote.dialog.showOpenDialog(
+    this.electronService.remote.dialog.showOpenDialog(
       this.electronService.remote.getCurrentWindow(),
       {
         properties: ['openDirectory']
       }
-    );
+    ).then((value: OpenDialogReturnValue) => {
+      if (value.filePaths !== undefined) {
+        this.generalSettingsForm.get('downloadPath').setValue(value.filePaths[0]);
+        this.generalSettingsForm.get('downloadPath').markAsDirty();
+        this.generalSettingsForm.get('downloadPath').markAsTouched();
+      }
+    });
 
-    if (result !== undefined) {
-      this.generalSettingsForm.get('downloadPath').setValue(result[0]);
-      this.generalSettingsForm.get('downloadPath').markAsDirty();
-      this.generalSettingsForm.get('downloadPath').markAsTouched();
-    }
   }
 
   onSubmit(): void {

vripper-ui/src/app/status-bar/status-bar.component.html

@@ -0,0 +1,7 @@
+<div class="status-bar">
+  <span>{{ downloadSpeed!.speed + '/s' }}</span>
+  <span>Downloading: {{ globalState!.running }}</span>
+  <span>Queued: {{ globalState!.queued }}</span>
+  <span>Remaining: {{ globalState!.remaining }}</span>
+  <span>Error: {{ globalState!.error }}</span>
+</div>

vripper-ui/src/app/status-bar/status-bar.component.scss

@@ -0,0 +1,14 @@
+.status-bar {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    text-align: end;
+    padding: 2px 0;
+}
+
+span {
+    margin: 0 8px;
+    user-select: none;
+    font-size: small;
+}

vripper-ui/src/app/status-bar/status-bar.component.scss.theme.scss

@@ -0,0 +1,11 @@
+@import '~@angular/material/theming';
+
+@mixin status-bar-component-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .status-bar {
+    background-color: mat-color($background, status-bar);
+    color: mat-color($foreground, base);
+  }
+}

vripper-ui/src/app/status-bar/status-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusBarComponent } from './status-bar.component';
+
+describe('StatusBarComponent', () => {
+  let component: StatusBarComponent;
+  let fixture: ComponentFixture<StatusBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatusBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

vripper-ui/src/app/status-bar/status-bar.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit, NgZone, OnDestroy } from '@angular/core';
+import { DownloadSpeed } from '../common/download-speed.model';
+import { WsConnectionService } from '../ws-connection.service';
+import { WsHandler } from '../ws-handler';
+import { Subscription } from 'rxjs';
+import { GlobalState } from '../common/global-state.model';
+import { WSMessage } from '../common/ws-message.model';
+import { CMD } from '../common/cmd.enum';
+
+@Component({
+  selector: 'app-status-bar',
+  templateUrl: './status-bar.component.html',
+  styleUrls: ['./status-bar.component.scss']
+})
+export class StatusBarComponent implements OnInit, OnDestroy {
+
+  constructor(private wsConnectionService: WsConnectionService, private ngZone: NgZone) {
+    this.websocketHandlerPromise = this.wsConnectionService.getConnection();
+  }
+
+  websocketHandlerPromise: Promise<WsHandler>;
+  downloadSpeed: DownloadSpeed = new DownloadSpeed('0 B');
+  subscriptions: Subscription[] = [];
+  globalState: GlobalState = new GlobalState(0, 0, 0, 0);
+
+  ngOnInit() {
+    this.websocketHandlerPromise.then((handler: WsHandler) => {
+      console.log('Connecting to global state and download speed');
+      this.subscriptions.push(
+        handler.subscribeForGlobalState((e: GlobalState[]) => {
+          this.ngZone.run(() => {
+            this.globalState = e[0];
+          });
+        })
+      );
+      this.subscriptions.push(
+        handler.subscribeForSpeed((e: DownloadSpeed[]) => {
+          this.ngZone.run(() => {
+            this.downloadSpeed = e[0];
+          });
+        })
+      );
+      handler.send(new WSMessage(CMD.GLOBAL_STATE_SUB.toString()));
+      handler.send(new WSMessage(CMD.SPEED_SUB.toString()));
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(e => e.unsubscribe());
+    this.websocketHandlerPromise.then((handler: WsHandler) => {
+      handler.send(new WSMessage(CMD.GLOBAL_STATE_UNSUB.toString()));
+      handler.send(new WSMessage(CMD.SPEED_UNSUB.toString()));
+    });
+  }
+}

vripper-ui/src/app/ws-connection.service.ts

@@ -66,11 +66,15 @@ export class WsConnectionService {
         this._state = WSState.ERROR;
         this.state$.next(this._state);
         reject('Failed to connect to server');
-        subscription.unsubscribe();
+        if (subscription !=  null) {
+          subscription.unsubscribe();
+        }
         return;
       } else if (this._state === WSState.OPEN) {
         clearInterval(interval);
-        subscription.unsubscribe();
+        if (subscription !=  null) {
+          subscription.unsubscribe();
+        }
         return;
       }
       this.connect();

vripper-ui/src/dark-theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+$my-dark-theme-primary: mat-palette($mat-grey, 500);
+$my-dark-theme-accent: mat-palette($mat-grey, 500);
+
+$my-dark-theme: mat-dark-theme(
+    $my-dark-theme-primary,
+    $my-dark-theme-accent
+);

vripper-ui/src/grid-theme.scss

@@ -0,0 +1,45 @@
+@import '~@angular/material/theming';
+@import '~ag-grid-community/src/styles/ag-grid.scss';
+@import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material.scss';
+
+@mixin grid-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .ag-header, .ag-header .ag-icon {
+
+    color: mat-color($foreground, secondary-text) !important;
+  }
+
+  .ag-theme-material {
+      background-color: mat-color($background, background) !important;
+  }
+
+  .ag-theme-material .ag-header {
+    background-color: mat-color($background, background) !important;
+  }
+
+  .ag-theme-material .ag-header-cell:hover {
+    background-color: mat-color($background, background) !important;
+  }
+
+  div.ag-cell.no-padding {
+    padding: 0;
+  }
+
+  .ag-body-horizontal-scroll {
+    display: none !important;
+  }
+
+  .ag-center-cols-viewport {
+    overflow: hidden !important;
+  }
+
+  .ag-cell-focus,
+  .ag-cell {
+    border: none !important;
+  }
+}

vripper-ui/src/index.html

@@ -2,15 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>VripperUi</title>
+  <title>V Ripper</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
 </head>
-<body>
+<body class="mat-app-background">
   <app-root></app-root>
 </body>
 </html>

vripper-ui/src/light-theme.scss

@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+
+$my-light-theme-primary: mat-palette($mat-red, 900);
+$my-light-theme-accent: mat-palette($mat-red, 900);
+
+$my-light-theme: mat-light-theme(
+    $my-light-theme-primary,
+    $my-light-theme-accent
+);

vripper-ui/src/mat-theme.scss

@@ -0,0 +1,4 @@
+@import '~@angular/material/theming';
+@include mat-core();
+@import 'light-theme.scss';
+@import 'dark-theme.scss';

vripper-ui/src/styles.scss

@@ -1,11 +1,32 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~@angular/cdk/overlay-prebuilt.css';
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-@import "~ag-grid-community/dist/styles/ag-grid.css";
-@import "~ag-grid-community/dist/styles/ag-theme-material.css";
+@import 'mat-theme.scss';
+@import 'app/status-bar/status-bar.component.scss.theme.scss';
+@import 'app/app.component.scss-theme.scss';
+@import 'app/posts/post-progress.renderer.component.scss-theme.scss';
+@import 'app/post-detail/post-details-progress.component.scss-theme.scss';
+@import 'grid-theme.scss';
+
+@mixin custom-components-theme($theme) {
+    @include status-bar-component-theme($theme);
+    @include app-component-theme($theme);
+    @include post-progress-renderer-component-theme($theme);
+    @include post-detail-renderer-component-theme($theme);
+}
+
+.dark-theme {
+    @include custom-components-theme($my-dark-theme);
+    @include angular-material-theme($my-dark-theme);
+    @include grid-theme($my-dark-theme);
+}
+
+.light-theme {
+    @include custom-components-theme($my-light-theme);
+    @include angular-material-theme($my-light-theme);
+    @include grid-theme($my-light-theme);
+}
 
 html {
-    border: 3px solid rgb(63, 81, 181);
     box-sizing: border-box;
     height: 100vh;
     width: 100vw;
@@ -39,11 +60,11 @@ app-root {
 }
 
 .loading {
-    background-color: rgba(0,0,0,0.8);
+    background-color: whitesmoke;
 }
 
 .no-connection {
-    background-color: white !important;
+    background-color: whitesmoke !important;
 }
 
 #app-container {
@@ -57,34 +78,18 @@ app-root {
     bottom: 0;
 }
 
-div.ag-cell.no-padding {
-    padding: 0;
-}
-
 .no-wrap {
     overflow: hidden;
     text-overflow:ellipsis;
     white-space: nowrap;
 }
 
-.ag-body-horizontal-scroll {
-    display: none !important;
-}
-
-.ag-center-cols-viewport {
-    overflow: hidden !important;
-}
-
-.ag-cell-focus, .ag-cell {
-    border: none !important;
-}
-
 body a {
     &:hover {
         text-decoration: underline;
     }
     font-family: Tahoma;
-    color: #731d1d;
+    color: rgba(0, 0, 0, 0.87);
     text-decoration: none;
     font-weight: bold;
 }