x

Author: jamiepine

src/renderer/components/FileView.vue

@@ -2,15 +2,15 @@
   <div v-if="viewing" class="file-view">
     <div class="image-view" v-if="viewing.type == 'mp4'">
       <div class="video-big">
-        <video class="player" height="100px" playsinline loop controls>
-          <source :src='`${dumpDirectory.replace(/[ ]/g, "\\ ")}/${viewing.dumpKey.replace(/[ ]/g, "\ ")}`' type="video/mp4">
+        <video class="player" height="440px"  width="370px" playsinline loop controls>
+          <source :src='`${dumpDirectory.replace(ws1, ws2)}/${viewing.dumpKey.replace(ws1, ws3)}`' type="video/mp4">
         </video>
       </div>
     </div>
     <div class="image-view" v-else>
       <div
         class="image-big"
-        :style='{ "background-image": `url("file://${dumpDirectory.replace(/[ ]/g, "\\ ")}/${viewing.dumpKey.replace(/[ ]/g, "\ ")}")` }'
+        :style='{ "background-image": `url("file://${dumpDirectory.replace(ws1, ws2)}/${viewing.dumpKey.replace(ws1, ws3)}")` }'
       />
     </div>
     <div class="info-area">
@@ -22,12 +22,16 @@
         style="flex-grow:1;margin-right:10px;"
         @click="$root.$emit('previousItem')"
         v-shortkey="['arrowleft']" @shortkey="$root.$emit('previousItem')"
+        v-tippy="$store.state.tooltipDefault"
+        title="Arrow keys work too..."
       >Previous</button>
       <button
         class="coolbtn margin-vertical"
         style="flex-grow:1"
         @click="$root.$emit('nextItem')"
         v-shortkey="['arrowright']" @shortkey="$root.$emit('nextItem')"
+        v-tippy="$store.state.tooltipDefault"
+        title="You can use your left and right arrow keys btw"
       >Next</button>
       </div>
 
@@ -114,7 +118,10 @@ export default {
   data() {
     return {
       saved: false,
-      savedAs: false
+      savedAs: false,
+      ws1: /[ ]/g,
+      ws2: "\\ ",
+      ws3: "\ "
     };
   },
   computed: {
@@ -215,8 +222,7 @@ export default {
   right: 0;
   margin: auto;
   min-height: 200px;
-  margin-top: 100px;
-  float: left;
+
 }
 .image-big {
   height: 70vh;

src/renderer/components/Info.vue

@@ -23,7 +23,9 @@
     </div>
     <!-- <icon :icon="['fab', 'twitter']"/> -->
     <h4>🤔 What is a cache?</h4>
-    <p>Caching is common practice by apps to help decreace server bandwidth costs and improve loadtimes. If an app can save media to your device, it need not request it from the server again.</p>
+    <p>Caching is common practice by apps to help decreace server bandwidth costs and improve loadtimes. If an app can save media to your device, it need not request it from the server again. These apps usually store the files without any metadata or even filetype. CacheMonkey takes care of discovering the original filetype and processing the cache files for preview.</p>
+    <h4>🌚 What stuff gets cached?</h4>
+    <p>Most apps will store all media that is loaded from their servers. For example, entering Discord channel will load not only the images you see with your eyes, but approximatly 6 times your screen height, even if you don't scroll up. Images that are deleted immediately after posting are still saved in your cache if they loaded to your client- which could remain there for months. In Electron's case it is limited by size.</p>
     <h4>🔑 What apps does CacheMonkey support?</h4>
     <p>In theory, anything with a "Cache" folder, if you can locate it, we should be able to convert it to the original filetype and allow you to view it with this app.</p>
     <h4>🛠 Developers, you can help!</h4>