v1.6.3

Better multithread management
Fix partial state UI
2026-08-19 08:35:41 +02:00 · 2019-09-18 19:44:45 +01:00 · 2019-09-18 19:41:48 +01:00 · 2019-09-17 23:00:55 +01:00 · 2019-09-17 22:59:04 +01:00 · 2019-09-16 22:56:57 +01:00
59 changed files with 1309 additions and 880 deletions
@@ -1,5 +1,31 @@
 # Changelog

+## [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
@@ -4,7 +4,7 @@
    <modelVersion>4.0.0</modelVersion>
    <groupId>tn.mnlr</groupId>
    <artifactId>vripper</artifactId>
-    <version>1.5.1</version>
+    <version>1.6.3</version>
    <packaging>pom</packaging>
    <parent>
        <groupId>org.springframework.boot</groupId>
@@ -1,6 +1,6 @@
 {
  "name": "vripper-electron",
-  "version": "1.5.1",
+  "version": "1.6.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1,6 +1,6 @@
 {
  "name": "vripper-electron",
-  "version": "1.5.1",
+  "version": "1.6.3",
  "description": "",
  "main": "main.js",
  "author": "",
@@ -5,7 +5,7 @@
  <parent>
    <groupId>tn.mnlr</groupId>
    <artifactId>vripper</artifactId>
-      <version>1.5.1</version>
+    <version>1.6.3</version>
  </parent>
  <artifactId>vripper-electron</artifactId>
  <name>vripper-electron</name>
@@ -6,7 +6,10 @@ const contextMenu = require("electron-context-menu");
 contextMenu({});
 const menu = new electron.Menu();
 const titlebar = new customTitlebar.Titlebar({
-  backgroundColor: customTitlebar.Color.fromHex("#3f51b5"),
+  backgroundColor: customTitlebar.Color.fromHex("#000000"),
+  titleHorizontalAlignment: 'left',
+  icon: 'favicon.ico',
+  shadow: true,
  menu: menu
 });
 titlebar.updateTitle("Viper Ripper");
@@ -5,7 +5,7 @@
    <parent>
        <groupId>tn.mnlr</groupId>
        <artifactId>vripper</artifactId>
-        <version>1.5.1</version>
+        <version>1.6.3</version>
    </parent>
    <artifactId>vripper-server</artifactId>
    <name>vripper-server</name>
@@ -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
@@ -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);
+            }
        }
    }
 }
@@ -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,7 @@ 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 DARK_THEME = "DARK_THEME";

    private String downloadPath;
    private int maxThreads;
@@ -45,6 +47,7 @@ public class AppSettingsService {
    private boolean vThanks;
    private boolean desktopClipboard;
    private boolean forceOrder;
+    private boolean darkTheme;

    public void setVPassword(String vPassword) {
        if(vPassword.isEmpty()) {
@@ -65,6 +68,7 @@ public class AppSettingsService {
        vThanks = prefs.getBoolean(V_THANKS, false);
        desktopClipboard = prefs.getBoolean(DESKTOP_CLIPBOARD, false);
        forceOrder = prefs.getBoolean(FORCE_ORDER, false);
+        darkTheme = prefs.getBoolean(DARK_THEME, false);
    }

    @PreDestroy
@@ -79,6 +83,7 @@ public class AppSettingsService {
        prefs.putBoolean(V_THANKS, vThanks);
        prefs.putBoolean(DESKTOP_CLIPBOARD, desktopClipboard);
        prefs.putBoolean(FORCE_ORDER, forceOrder);
+        prefs.putBoolean(DARK_THEME, darkTheme);

        try {
            prefs.sync();
@@ -106,6 +111,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 {

@@ -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;
@@ -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();

@@ -300,6 +304,7 @@ public class PostParser {
        private String threadTitle;

        private int previewCounter = 0;
+        private int index = 0;

        private String postTitle;
        private int imageCount;
@@ -330,6 +335,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 +348,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));
                        }
@@ -367,6 +373,7 @@ public class PostParser {
                                threadId
                        );
                    }
+                    index = 0;
                    previewCounter = 0;
                    previews = new ArrayList<>();
                    images = new ArrayList<>();
@@ -31,37 +31,54 @@ 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.save();
+
+            vipergirlsAuthService.authenticate();
        }
-        this.settings.setDesktopClipboard(settings.isDesktopClipboard());
-        this.settings.setForceOrder(settings.isForceOrder());
-
-        this.settings.save();
-
-        vipergirlsAuthService.authenticate();
        return ResponseEntity.ok(getSettings());
    }

@@ -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
@@ -1,6 +1,6 @@
 {
  "name": "vripper-ui",
-  "version": "1.5.1",
+  "version": "1.6.3",
  "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",
@@ -1,6 +1,6 @@
 {
  "name": "vripper-ui",
-  "version": "1.5.1",
+  "version": "1.6.3",
  "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",
@@ -5,7 +5,7 @@
  <parent>
    <groupId>tn.mnlr</groupId>
    <artifactId>vripper</artifactId>
-    <version>1.5.1</version>
+    <version>1.6.3</version>
  </parent>
  <artifactId>vripper-ui</artifactId>
  <name>vripper-ui</name>
@@ -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>
@@ -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);
+  }
+}
@@ -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();
@@ -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
    ]),
@@ -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;
+}
@@ -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>
@@ -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();
+  });
+});
@@ -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() {
+  }
+}
@@ -2,45 +2,10 @@
  <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]="electronService.isElectronApp ? '0 0 calc(100% - 117px)' : '0 0 calc(100% - 90px)'">
+    <app-posts
+      [ngStyle]="{ height: electronService.isElectronApp ? 'calc(100% - 37px)' : '100%' }"
+      style="width: 100%;"
+    ></app-posts>
  </div>
 </div>
@@ -1,4 +0,0 @@
-div#controls {
-    margin-left: 10px;
-    margin-right: 10px;
-}
@@ -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()));
-    });
  }
 }
@@ -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]
 })
@@ -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>
@@ -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 {
@@ -121,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);
  }
@@ -150,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, {
@@ -0,0 +1,27 @@
+<div class="container" style="height: 100%; background-color: white">
+  <div
+    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>
@@ -0,0 +1,13 @@
+@import '~@angular/material/theming';
+
+@mixin post-detail-renderer-component-theme($theme) {
+  $blue: mat-palette($mat-blue);
+
+  .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);
+  }
+}
@@ -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(
@@ -1,231 +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 {
-    if (this.subscription != null) {
-      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(() => {
-      if (smallDialogSubscription != null) {
-        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 {
-    return false;
-  }
-}
@@ -0,0 +1,104 @@
+<div class="container" style="height: 100%; background-color: white">
+  <div
+    [ngClass]="{
+      'error-back': postState.status === 'ERROR',
+      'downloading-back': postState.status === 'DOWNLOADING' || postState.status === 'PARTIAL',
+      'complete-back': postState.status === 'COMPLETE'
+    }"
+    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 === 'PENDING' ||
+              (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'"
+            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 (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>
@@ -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;
+}
@@ -0,0 +1,45 @@
+@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, 300);
+  }
+
+  app-progress-cell .progress-bar .mat-progress-bar-buffer {
+    background-color: mat-color($grey, 100);
+  }
+
+  app-progress-cell .error-back {
+    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-back {
+    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-back {
+    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);
+    }
+  }
+}
@@ -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,7 +67,7 @@ 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();
      }
    });
  }
@@ -236,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);
+      }
+    );
+  }
 }
@@ -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>
@@ -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();
@@ -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>
@@ -0,0 +1,3 @@
+:host ::ng-deep .ag-cell {
+    background-color: snow !important;
+}
@@ -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();
+  });
+});
@@ -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;
+}
@@ -1,6 +1,8 @@
 <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">
@@ -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';
@@ -19,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({
@@ -37,7 +39,14 @@ export class SettingsComponent implements OnInit {
    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);
@@ -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>
@@ -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;
+}
@@ -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);
+  }
+}
@@ -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();
+  });
+});
@@ -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()));
+    });
+  }
+}
@@ -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
+);
@@ -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;
+  }
+}
@@ -8,9 +8,10 @@
  <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>
@@ -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
+);
@@ -0,0 +1,4 @@
+@import '~@angular/material/theming';
+@include mat-core();
+@import 'light-theme.scss';
+@import 'dark-theme.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;
 }
Author	SHA1	Message	Date
death-claw	5fd70a821b	v1.6.3	2019-09-18 19:44:45 +01:00
death-claw	6e9c912118	Better multithread management Fix partial state UI	2019-09-18 19:41:48 +01:00
death-claw	19a98ea056	v1.6.2	2019-09-17 23:00:55 +01:00
death-claw	229bc46227	Rework UI colors Fix scan input bug	2019-09-17 22:59:04 +01:00
death-claw	374946c6f2	v1.6.1	2019-09-16 22:56:57 +01:00
death-claw	f8eccfb4ad	Rework UI Fix clipboard monitoring	2019-09-16 22:54:18 +01:00
death-claw	4223bce5f3	v1.6.0	2019-09-15 22:19:53 +01:00
death-claw	ea9a98bb3e	Rework the UI Add a dark theme Fix the force ordering bug Other bug fixes	2019-09-15 22:14:17 +01:00
death-claw	a416a7e7d7	v1.5.2	2019-09-01 15:46:41 +01:00
death-claw	24dd46ab2c	Fix imx host	2019-09-01 15:40:34 +01:00