Add Notyf Notifications on Successes and Failures

bundle.js

@@ -34590,7 +34590,7 @@ const MP4Remuxer = require('./mp4-remuxer')
 
 function VideoStream (file, mediaElem, opts = {}) {
   if (!(this instanceof VideoStream)) {
-    console.warn("don't invoked VideoStream without 'new'")
+    console.warn("Don't invoke VideoStream without the 'new' keyword.")
     return new VideoStream(file, mediaElem, opts)
   }
 
@@ -37909,6 +37909,27 @@ var copyMagnetTooltip = tippy(copyMagnet, {"theme": "torrent-parts", "animation"
 var downloadTorrentTooltip = tippy(downloadTorrent, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Download Torrent file"});
 var parsed;
 var client = new WebTorrent();
+var notyf = new Notyf({
+  "duration": 12000,
+  "dismissible": true,
+  "ripple": false,
+  "position": {
+    "x": "right",
+    "y": "top",
+  },
+  "types": [
+    {
+      "type": "success",
+      "background": "#46835C",
+      "icon": false
+    },
+    {
+      "type": "error",
+      "background": "#A60A0A",
+      "icon": false
+    }
+  ]
+});
 
 function placeDownloadTooltips(e) {
   if (window.innerWidth > 1080) {
@@ -37941,41 +37962,38 @@ function start() {
 
   document.getElementById('torrent').addEventListener('change', function(event) {
     event.preventDefault();
-    try {
+    event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
-      event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
+      source = "torrent-file";
-        source = "torrent-file";
+      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
-        originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
+      sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
-        sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
+      parse(Buffer.from(arrayBuffer));
-        parse(Buffer.from(arrayBuffer));
+    });
-      });
-    }
-    catch(e) {
-      console.error(e); // TODO: Alert user to error
-    }
   });
 
   let copyurl = new clipboard('#copyURL');
   copyurl.on('success', function(e) {
-    console.info(e); // TODO: Alert user to success
+    notyf.success('Copied site URL to clipboard!');
+    console.info(e);
     gtag('event', 'share', {
       "method": "Copy URL",
       "content_id": e.text,
     });
   });
   copyurl.on('failure', function(e) {
-    console.error(e); // TODO: Alert user to error
+    notyf.error('Problem copying to clipboard');
   });
 
   let copymagnet = new clipboard('#copyMagnet');
   copymagnet.on('success', function(e) {
-    console.info(e); // TODO: Alert user to success
+    notyf.success('Copied Magnet URL to clipboard!');
     gtag('event', 'share', {
       "method": "Copy Magnet",
       "content_id": e.text,
     });
   });
   copymagnet.on('failure', function(e) {
-    console.error(e); // TODO: Alert user to error
+    notyf.error('Problem copying to clipboard');
+    console.warn(e);
   });
 
   name.addEventListener('input', propertyChange);
@@ -38017,17 +38035,23 @@ function parse(toLoad) {
       parseRemote(parsed.xs);
     }
   }
-  catch(e) {
+  catch(e) { // maybe they put a URL to a torrent file in the magnet box?
     console.warn(e);
-    console.info("Attempting remote parse");
+    if (source == "magnet") {
-    parseRemote(toLoad);
+      console.info("Attempting remote parse");
+      parseRemote(toLoad);
+    } else { // probably not. Just a bad file.
+      notyf.error('Problem parsing input. Is this a .torrent file?');
+      console.error('Problem parsing input');
+    }
   }
 }
 
 function parseRemote(toLoad) {
   parser.remote(toLoad, function(err, result) {
-    if (err) { // TODO: Display error to user
+    if (err) {
-      console.error(err);
+      notyf.error('Problem remotely fetching or parsing Torrent file');
+      console.warn(err);
       resetProperties();
       return;
     }
@@ -38249,10 +38273,11 @@ async function addCurrentTrackers() {
     parsed.announce.push("http://bt1.archive.org:6969/announce");
     parsed.announce.push("http://bt2.archive.org:6969/announce");
     parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
+    notyf.success('Added known working trackers from newTrackon');
     updateModified();
   }
   catch(e) {
-    console.error(e); // TODO: Alert user to error
+    console.warn(e); // TODO: Alert user to error
   }
   addTrackers.className = '';
   addTrackers.innerHTML = 'Add Known Working Trackers';
@@ -38304,6 +38329,7 @@ function getFilesFromPeers() {
     parsed.lastPieceLength = torrent.lastPieceLength;
     updateModified();
     display();
+    notyf.success('Fetched file details from Webtorrent peers');
     torrent.destroy();
   });
   display();

index.html

@@ -36,8 +36,10 @@
 
   <link href="style.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet" />
+  <link href="notyf.min.css" rel="stylesheet" />
   <script async src="https://kit.fontawesome.com/9ca49f101f.js"></script>
   <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <script src="notyf.min.js"></script>
 
   <script async defer src="https://www.googletagmanager.com/gtag/js?id=G-VT4953Z89H"></script>
   <script>

package.json

@@ -15,6 +15,7 @@
     "webtorrent": "latest"
   },
   "devDependencies": {
+    "notyf": "latest",
     "terser": "latest",
     "watchify": "latest"
   },

parse.js

@@ -33,6 +33,27 @@ var copyMagnetTooltip = tippy(copyMagnet, {"theme": "torrent-parts", "animation"
 var downloadTorrentTooltip = tippy(downloadTorrent, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Download Torrent file"});
 var parsed;
 var client = new WebTorrent();
+var notyf = new Notyf({
+  "duration": 12000,
+  "dismissible": true,
+  "ripple": false,
+  "position": {
+    "x": "right",
+    "y": "top",
+  },
+  "types": [
+    {
+      "type": "success",
+      "background": "#46835C",
+      "icon": false
+    },
+    {
+      "type": "error",
+      "background": "#A60A0A",
+      "icon": false
+    }
+  ]
+});
 
 function placeDownloadTooltips(e) {
   if (window.innerWidth > 1080) {
@@ -65,41 +86,38 @@ function start() {
 
   document.getElementById('torrent').addEventListener('change', function(event) {
     event.preventDefault();
-    try {
+    event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
-      event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
+      source = "torrent-file";
-        source = "torrent-file";
+      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
-        originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
+      sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
-        sourceTooltip.setContent("Currently loaded information sourced from Torrent file");
+      parse(Buffer.from(arrayBuffer));
-        parse(Buffer.from(arrayBuffer));
+    });
-      });
-    }
-    catch(e) {
-      console.error(e); // TODO: Alert user to error
-    }
   });
 
   let copyurl = new clipboard('#copyURL');
   copyurl.on('success', function(e) {
-    console.info(e); // TODO: Alert user to success
+    notyf.success('Copied site URL to clipboard!');
+    console.info(e);
     gtag('event', 'share', {
       "method": "Copy URL",
       "content_id": e.text,
     });
   });
   copyurl.on('failure', function(e) {
-    console.error(e); // TODO: Alert user to error
+    notyf.error('Problem copying to clipboard');
   });
 
   let copymagnet = new clipboard('#copyMagnet');
   copymagnet.on('success', function(e) {
-    console.info(e); // TODO: Alert user to success
+    notyf.success('Copied Magnet URL to clipboard!');
     gtag('event', 'share', {
       "method": "Copy Magnet",
       "content_id": e.text,
     });
   });
   copymagnet.on('failure', function(e) {
-    console.error(e); // TODO: Alert user to error
+    notyf.error('Problem copying to clipboard');
+    console.warn(e);
   });
 
   name.addEventListener('input', propertyChange);
@@ -141,17 +159,23 @@ function parse(toLoad) {
       parseRemote(parsed.xs);
     }
   }
-  catch(e) {
+  catch(e) { // maybe they put a URL to a torrent file in the magnet box?
     console.warn(e);
-    console.info("Attempting remote parse");
+    if (source == "magnet") {
-    parseRemote(toLoad);
+      console.info("Attempting remote parse");
+      parseRemote(toLoad);
+    } else { // probably not. Just a bad file.
+      notyf.error('Problem parsing input. Is this a .torrent file?');
+      console.error('Problem parsing input');
+    }
   }
 }
 
 function parseRemote(toLoad) {
   parser.remote(toLoad, function(err, result) {
-    if (err) { // TODO: Display error to user
+    if (err) {
-      console.error(err);
+      notyf.error('Problem remotely fetching or parsing Torrent file');
+      console.warn(err);
       resetProperties();
       return;
     }
@@ -373,10 +397,11 @@ async function addCurrentTrackers() {
     parsed.announce.push("http://bt1.archive.org:6969/announce");
     parsed.announce.push("http://bt2.archive.org:6969/announce");
     parsed.announce = parsed.announce.filter((v,i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
+    notyf.success('Added known working trackers from newTrackon');
     updateModified();
   }
   catch(e) {
-    console.error(e); // TODO: Alert user to error
+    console.warn(e); // TODO: Alert user to error
   }
   addTrackers.className = '';
   addTrackers.innerHTML = 'Add Known Working Trackers';
@@ -428,6 +453,7 @@ function getFilesFromPeers() {
     parsed.lastPieceLength = torrent.lastPieceLength;
     updateModified();
     display();
+    notyf.success('Fetched file details from Webtorrent peers');
     torrent.destroy();
   });
   display();

style.css

@@ -17,6 +17,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
   --dark-blue: #102030;
   --light-blue: #495563;
   --accent: #46835C;
+  --accent-alt: #A60A0A;
   --grey: #BDBDBD;
   --white: #FFF;
   background: #24384D;
@@ -344,8 +345,10 @@ input {
 /*! Tippy 6.2.7 | MIT License | github.com/atomiks/tippyjs */
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
 
+/* Tippy shift-away-subtle theme */
 .tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}
 
+/* Custom Tippy Theme */
 .tippy-box[data-theme~="torrent-parts"] {
   background-color: var(--accent);
   font-weight: 600;
@@ -369,3 +372,6 @@ input {
 .tippy-box[data-theme~="torrent-parts"] > .tippy-svg-arrow {
   fill: var(--accent);
 }
+
+/*! Fix Notyf dismiss button */
+.notyf__dismiss-btn{border-radius: 0;}