Display images and videos in the lightbox

The lightbox only appears when the pointer is on a image or a video. When is on a thumbnail of a PDF or some other file the lightbox doesn't  show.

Author: 4k1k0

README.md

@@ -16,5 +16,4 @@ Because I didn't want to install all the dependencies just to test a few lines o
 I know but I'm not sure if I'm able to use the Lainchan's favicon for this, ~~but I use that icon on my computer and it looks cute.~~
 
 ## TODO
-- Fix the lightbox, when you load an image for the first time it doesn't use the margin.
-- When you use the *Expand everything* button it also loads the videos.
+- When you use the *Expand everything* button it also loads the videos.

js/script.js

@@ -1,12 +1,11 @@
 function lightbox(){
     let img = document.getElementsByClassName('post-image');
-    let link;
 
     /*
      * Load all the big images in the thread
     */
     for (let i = 0; i < img.length; i++) {
-      link = img[i].parentElement.href;
+      let link = img[i].parentElement.href;
       document.getElementById('thread').insertAdjacentHTML('afterbegin', '<img class="lightbox-img-hide" src="' + link + '">');
     }
 
@@ -16,13 +15,33 @@ function lightbox(){
          *  the image appears in the lightbox
         */
         img[i].addEventListener('mouseover', function(){
-            link = this.parentElement.href;
-            document.getElementById('thread').insertAdjacentHTML('afterbegin', '<div id="lightbox"><img id="lightbox-img" src="' + link + '"></div>');
+            let link = this.parentElement.href;
+            let ext = link.slice(-4, link.length);
+            switch (ext) {
+              case '.png':
+              case '.jpg':
+              case 'jpeg':
+              case '.gif':
+                document.getElementById('thread').insertAdjacentHTML(
+                  'afterbegin',
+                  '<div id="lightbox"><img id="lightbox-img" src="' + link + '"></div>'
+                );
+                break;
+              default:
+                let file = link.indexOf('&');
+                link = link.slice(0, file);
+                document.getElementById('thread').insertAdjacentHTML(
+                  'afterbegin',
+                  '<div id="lightbox"><video id="lightbox-video" src="' + link + '" autoplay="true" loop="true"></video></div>'
+                );
+                console.log(link);
+                break;
+            }
         }, false);
 
         /*
-         *  When pointer is out: Remove the lightbox from the DOM
-         */
+         * When pointer is out: Remove the lightbox from the DOM
+        */
         img[i].addEventListener('mouseout', function(){
             document.getElementById('lightbox').parentNode.removeChild(document.getElementById('lightbox'));
         }, false);
@@ -33,9 +52,9 @@ function lightbox(){
 
 function expandIMG(){
     /*
-     *  It creates a button
-     *  in the bottom bar which can be used
-     *  to load all the original images in the thread
+     * It creates a button
+     * in the bottom bar which can be used
+     * to load all the original images in the thread
     */
 
     let bottomBar = document.getElementsByClassName('threadlinks');

manifest.json

@@ -2,14 +2,13 @@
   "manifest_version": 2,
 
   "name": "Lain++",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "This extension gives Lainchan.org new functions",
-  "version": "1.0",
   "author": "Akko",
   "homepage_url": "https://github.com/4k1k0/lainpp",
 
   "browser_action": {
-    "default_icon": "img/icon16.png",
+    "default_icon": "img/icon48.png",
     "default_title": "Lain++"
   },
   "icons": { "16": "img/icon16.png",
@@ -35,4 +34,3 @@
     "https://ajax.googleapis.com/"
   ]
 }
-