Fix Popup Timeout (#30)

smashedr · web-flow · commit f82dcd7c0929 · 2023-12-22T00:11:40.000-08:00
* Fix Popup Timeout

* Fix Media Width

* Revert Media Outer

* Add mediaOuter d-none to Auth

* Add Error Alert

* Add view=gallery for the future
diff --git a/README.md b/README.md
@@ -23,7 +23,8 @@ and upload any Image, Video or Audio files with right click.
 *   [Install](#install)
 *   [Features](#features)
 *   [Configure](#configure)
-*   [Known Building](#building)
+*   [Setup](#setup)
+*   [Building](#building)
 *   [Development](#development)
 
 # Install
@@ -45,15 +46,20 @@ All Chromium Based Browsers can install the extension from the
 ## Features
 
 *   View Recent Uploads on Popup
-*   Right Click to Upload any Image, Video, or Audio
-*   Right Click to Shorten any URL
+*   Preview Popup Images on Hover.
+*   Right Click any Image, Video, or Audio to Upload.
+*   Right Click any URL to Shorten.
+*   Automatically Auth with Django Files.
+*   Automatic Dark/Light Mode based on Browser Settings.
 
 ## Configure
 
 You can pin the Addon by clicking the `Puzzle Piece`, find the `Django Files icon`, then;  
 **Firefox**, click the `Settings Wheel` and `Pin to Toolbar`.  
 **Chrome**, click the `Pin` icon.
 
+## Setup
+
 To automatically configure the web extension to work with your Django Files instance do the following:
 
 -   Log in to your Django Files Instance
@@ -62,8 +68,8 @@ To automatically configure the web extension to work with your Django Files inst
 
 The addon should now be configured to work with your Django Files instance.
 
-You can now click the Django Files icon to view your recent uploads.  
-Right-click on any Image, Video, Audio, or URL upload to Django Files or Shorten URL.
+You can now click the Django Files icon to view your recent uploads or open Options.  
+Right-click on any Image, Video, Audio, or URL upload to Django Files or Shorten URL.  
 
 # Development
 
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.3.4",
+  "version": "0.3.5",
   "name": "Django Files",
   "description": "Django Files Web Extension designed to work with github.com/django-files/django-files.",
   "homepage_url": "https://github.com/django-files/web-extension",
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -11,6 +11,5 @@ body {
 
 #media-image {
     max-height: 44vh;
-    max-width: 100%;
     background-color: #303030;
 }
diff --git a/src/html/popup.html b/src/html/popup.html
@@ -12,10 +12,17 @@
 </head>
 <body>
 
-<div class="container-fluid p-2">
-    <div id="media-outer" class="d-none position-fixed top-0 p-1 w-100">
-        <img id="media-image" src="../media/loading.gif" alt="" class="d-block img-thumbnail rounded border-white mx-auto mw-100">
+<div id="media-outer" class="d-none position-fixed top-0 p-1 w-100">
+    <img id="media-image" src="../media/loading.gif" alt="" class="d-block img-thumbnail rounded border-white mx-auto mw-100">
+    <div id="media-error" class="d-flex align-items-center justify-content-center d-none">
+        <div class="alert alert-danger text-center d-inline-block" role="alert">
+            <i class="fa-solid fa-triangle-exclamation me-2"></i> Error Loading Image!<br>
+            Inspect Popup for More Details...
+        </div>
     </div>
+</div>
+
+<div class="container-fluid p-2">
 
     <div class=" mb-1">
         <div class="form-check form-switch float-start form-select-lg me-2" style="padding-top: 1px; padding-bottom: 0;"
diff --git a/src/js/options.js b/src/js/options.js
@@ -1,7 +1,7 @@
 // JS for options.html
 
-document.addEventListener('DOMContentLoaded', initOptions)
 chrome.storage.onChanged.addListener(onChanged)
+document.addEventListener('DOMContentLoaded', initOptions)
 document
     .querySelectorAll('input')
     .forEach((el) => el.addEventListener('change', saveOptions))
diff --git a/src/js/popup.js b/src/js/popup.js
@@ -1,7 +1,7 @@
 // JS for popup.html
 
-document.addEventListener('DOMContentLoaded', initPopup)
 chrome.runtime.onMessage.addListener(onMessage)
+document.addEventListener('DOMContentLoaded', initPopup)
 document
     .querySelectorAll('a[href]')
     .forEach((el) => el.addEventListener('click', popupLinks))
@@ -21,6 +21,7 @@ const authButton = document.getElementById('auth-button')
 const mediaImage = document.getElementById('media-image')
 const mediaOuter = document.getElementById('media-outer')
 const alwaysAuth = document.getElementById('always-auth')
+const mediaError = document.getElementById('media-error')
 
 const loadingImage = '../media/loading.gif'
 let authError = false
@@ -117,9 +118,9 @@ async function initPopup() {
         .forEach((el) => el.addEventListener('click', popupLinks))
 
     // Enable Popup Mouseover Preview if popupPreview
+    timeout = options.popupTimeout * 1000
     if (options.popupPreview) {
         console.log('Enabling Mouseover Preview')
-        timeout = options.popupTimeout * 1000
         initPopupMouseover()
     }
 }
@@ -219,6 +220,7 @@ async function authCredentials(event) {
         authButton.classList.add('d-none')
         errorAlert.classList.add('d-none')
         alwaysAuth.classList.add('d-none')
+        mediaOuter.classList.add('d-none')
         await initPopup()
     } else {
         displayAlert({ message: 'Error Getting or Setting Credentials.' })
@@ -311,7 +313,10 @@ function updateTable(data) {
             'link-underline-opacity-75-hover'
         )
         link.target = '_blank'
-        link.dataset.raw = url.origin + url.pathname.replace(/^\/u\//, '/raw/')
+        link.dataset.raw =
+            url.origin +
+            url.pathname.replace(/^\/u\//, '/raw/') +
+            '?view=gallery'
         const cell1 = row.cells[1]
         cell1.classList.add('text-break')
         cell1.innerHTML = ''
@@ -380,7 +385,9 @@ function initPopupMouseover() {
     })
     mediaImage.addEventListener('error', (event) => {
         console.log('mediaError:', event)
-        mediaImage.src = '../media/error.png'
+        mediaImage.classList.add('d-none')
+        mediaError.classList.remove('d-none')
+        mediaImage.src = '../media/loading.gif'
     })
     document.querySelectorAll('.link-underline').forEach((el) => {
         el.addEventListener('mouseover', onMouseOver)
@@ -390,6 +397,8 @@ function initPopupMouseover() {
 
 function onMouseOver(event) {
     // console.log('onMouseOver:', event)
+    mediaError.classList.add('d-none')
+    mediaImage.classList.remove('d-none')
     if (event.pageY < window.innerHeight / 2) {
         mediaOuter.classList.remove('top-0')
         mediaOuter.classList.add('bottom-0')

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"manifest_version": 3,`
`3`		`- "version": "0.3.4",`
	`3`	`+ "version": "0.3.5",`
`4`	`4`	`"name": "Django Files",`
`5`	`5`	`"description": "Django Files Web Extension designed to work with github.com/django-files/django-files.",`
`6`	`6`	`"homepage_url": "https://github.com/django-files/web-extension",`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,5 @@ body {`
`11`	`11`
`12`	`12`	`#media-image {`
`13`	`13`	`max-height: 44vh;`
`14`		`- max-width: 100%;`
`15`	`14`	`background-color: #303030;`
`16`	`15`	`}`