Add a page to update all thumbnails through AJAX requests in both tem…

…plates

application/PageBuilder.php

@@ -21,26 +21,39 @@ class PageBuilder
      */
     protected $conf;
 
+    /**
+     * @var array $_SESSION
+     */
+    protected $session;
+
     /**
      * @var LinkDB $linkDB instance.
      */
     protected $linkDB;
-
+
+    /**
+     * @var null|string XSRF token
+     */
+    protected $token;
+
     /** @var bool $isLoggedIn Whether the user is logged in **/
     protected $isLoggedIn = false;
 
     /**
      * PageBuilder constructor.
      * $tpl is initialized at false for lazy loading.
      *
-     * @param ConfigManager $conf   Configuration Manager instance (reference).
-     * @param LinkDB        $linkDB instance.
-     * @param string        $token  Session token
+     * @param ConfigManager $conf       Configuration Manager instance (reference).
+     * @param array         $session    $_SESSION array
+     * @param LinkDB        $linkDB     instance.
+     * @param string        $token      Session token
+     * @param bool          $isLoggedIn
      */
-    public function __construct(&$conf, $linkDB = null, $token = null, $isLoggedIn = false)
+    public function __construct(&$conf, $session, $linkDB = null, $token = null, $isLoggedIn = false)
     {
         $this->tpl = false;
         $this->conf = $conf;
+        $this->session = $session;
         $this->linkDB = $linkDB;
         $this->token = $token;
         $this->isLoggedIn = $isLoggedIn;
@@ -110,6 +123,11 @@ private function initialize()
         $this->tpl->assign('thumbnails_width', $this->conf->get('thumbnails.width'));
         $this->tpl->assign('thumbnails_height', $this->conf->get('thumbnails.height'));
 
+        if (! empty($_SESSION['warnings'])) {
+            $this->tpl->assign('global_warnings', $_SESSION['warnings']);
+            unset($_SESSION['warnings']);
+        }
+
         // To be removed with a proper theme configuration.
         $this->tpl->assign('conf', $this->conf);
     }

application/Router.php

@@ -7,6 +7,8 @@
  */
 class Router
 {
+    public static $AJAX_THUMB_UPDATE = 'ajax_thumb_update';
+
     public static $PAGE_LOGIN = 'login';
 
     public static $PAGE_PICWALL = 'picwall';
@@ -47,6 +49,8 @@ class Router
 
     public static $PAGE_SAVE_PLUGINSADMIN = 'save_pluginadmin';
 
+    public static $PAGE_THUMBS_UPDATE = 'thumbs_update';
+
     public static $GET_TOKEN = 'token';
 
     /**
@@ -101,6 +105,14 @@ public static function findPage($query, $get, $loggedIn)
             return self::$PAGE_FEED_RSS;
         }
 
+        if (startsWith($query, 'do='. self::$PAGE_THUMBS_UPDATE)) {
+            return self::$PAGE_THUMBS_UPDATE;
+        }
+
+        if (startsWith($query, 'do='. self::$AJAX_THUMB_UPDATE)) {
+            return self::$AJAX_THUMB_UPDATE;
+        }
+
         // At this point, only loggedin pages.
         if (!$loggedIn) {
             return self::$PAGE_LINKLIST;

application/Updater.php

@@ -30,6 +30,11 @@ class Updater
      */
     protected $isLoggedIn;
 
+    /**
+     * @var array $_SESSION
+     */
+    protected $session;
+
     /**
      * @var ReflectionMethod[] List of current class methods.
      */
@@ -42,13 +47,17 @@ class Updater
      * @param LinkDB        $linkDB      LinkDB instance.
      * @param ConfigManager $conf        Configuration Manager instance.
      * @param boolean       $isLoggedIn  True if the user is logged in.
+     * @param array         $session     $_SESSION (by reference)
+     *
+     * @throws ReflectionException
      */
-    public function __construct($doneUpdates, $linkDB, $conf, $isLoggedIn)
+    public function __construct($doneUpdates, $linkDB, $conf, $isLoggedIn, &$session = [])
     {
         $this->doneUpdates = $doneUpdates;
         $this->linkDB = $linkDB;
         $this->conf = $conf;
         $this->isLoggedIn = $isLoggedIn;
+        $this->session = &$session;
 
         // Retrieve all update methods.
         $class = new ReflectionClass($this);
@@ -488,11 +497,23 @@ public function updateMethodDownloadSizeAndTimeoutConf()
      */
     public function updateMethodWebThumbnailer()
     {
-        $this->conf->set('thumbnails.enabled', $this->conf->get('thumbnail.enable_thumbnails', true));
+        if ($this->conf->exists('thumbnails.enabled')) {
+            return true;
+        }
+
+        $thumbnailsEnabled = $this->conf->get('thumbnail.enable_thumbnails', true);
+        $this->conf->set('thumbnails.enabled', $thumbnailsEnabled);
         $this->conf->set('thumbnails.width', 125);
         $this->conf->set('thumbnails.height', 90);
         $this->conf->remove('thumbnail');
         $this->conf->write(true);
+
+        if ($thumbnailsEnabled) {
+            $this->session['warnings'][] = t(
+                'You have enabled thumbnails. <a href="?do=thumbs_update">Please synchonize them</a>.'
+            );
+        }
+
         return true;
     }
 }

application/config/ConfigManager.php

@@ -367,10 +367,6 @@ protected function setDefaultValues()
         $this->setEmpty('general.enabled_plugins', self::$DEFAULT_PLUGINS);
         $this->setEmpty('general.default_note_title', 'Note: ');
 
-        $this->setEmpty('thumbnails.enabled', true);
-        $this->setEmpty('thumbnails.width', 120);
-        $this->setEmpty('thumbnails.height', 120);
-
         $this->setEmpty('updates.check_updates', false);
         $this->setEmpty('updates.check_updates_branch', 'stable');
         $this->setEmpty('updates.check_updates_interval', 86400);
@@ -385,9 +381,6 @@ protected function setDefaultValues()
         // default state of the 'remember me' checkbox of the login form
         $this->setEmpty('privacy.remember_user_default', true);
 
-        $this->setEmpty('thumbnail.enable_thumbnails', true);
-        $this->setEmpty('thumbnail.enable_localcache', true);
-
         $this->setEmpty('redirector.url', '');
         $this->setEmpty('redirector.encode_url', true);
 

assets/common/js/thumbnails-update.js

@@ -0,0 +1,51 @@
+/**
+ * Script used in the thumbnails update page.
+ *
+ * It retrieves the list of link IDs to update, and execute AJAX requests
+ * to update their thumbnails, while updating the progress bar.
+ */
+
+/**
+ * Update the thumbnail of the link with the current i index in ids.
+ * It contains a recursive call to retrieve the thumb of the next link when it succeed.
+ * It also update the progress bar and other visual feedback elements.
+ *
+ * @param {array}  ids      List of LinkID to update
+ * @param {int}    i        Current index in ids
+ * @param {object} elements List of DOM element to avoid retrieving them at each iteration
+ */
+function updateThumb(ids, i, elements) {
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', '?do=ajax_thumb_update');
+  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+  xhr.responseType = 'json';
+  xhr.onload = () => {
+    if (xhr.status !== 200) {
+      alert(`An error occurred. Return code: ${xhr.status}`);
+    } else {
+      const { response } = xhr;
+      i += 1;
+      elements.progressBar.style.width = `${(i * 100) / ids.length}%`;
+      elements.current.innerHTML = i;
+      elements.title.innerHTML = response.title;
+      if (response.thumbnail !== false) {
+        elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
+      }
+      if (i < ids.length) {
+        updateThumb(ids, i, elements);
+      }
+    }
+  };
+  xhr.send(`id=${ids[i]}`);
+}
+
+(() => {
+  const ids = document.getElementsByName('ids')[0].value.split(',');
+  const elements = {
+    progressBar: document.querySelector('.progressbar > div'),
+    current: document.querySelector('.progress-current'),
+    thumbnail: document.querySelector('.thumbnail-placeholder'),
+    title: document.querySelector('.thumbnail-link-title'),
+  };
+  updateThumb(ids, 0, elements);
+})();

assets/default/scss/shaarli.scss

@@ -146,6 +146,13 @@ body,
   background-color: $main-green;
 }
 
+.pure-alert-warning {
+  a {
+    color: $warning-text;
+    font-weight: bold;
+  }
+}
+
 .page-single-alert {
   margin-top: 100px;
 }
@@ -1547,3 +1554,40 @@ form {
 .pure-button-shaarli {
   background-color: $main-green;
 }
+
+.progressbar {
+  border-radius: 6px;
+  background-color: $main-green;
+  padding: 1px;
+
+  > div {
+    border-radius: 10px;
+    background: repeating-linear-gradient(
+      -45deg,
+      $almost-white,
+      $almost-white 6px,
+      $background-color 6px,
+      $background-color 12px
+    );
+    width: 0%;
+    height: 10px;
+  }
+}
+
+.thumbnails-page-container {
+  .progress-counter {
+    padding: 10px 0 20px;
+  }
+
+  .thumbnail-placeholder {
+    margin: 10px auto;
+    background-color: $light-grey;
+  }
+
+  .thumbnail-link-title {
+    padding-bottom: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

assets/vintage/css/shaarli.css

@@ -1210,3 +1210,43 @@ ul.errors {
     width: 13px;
     height: 13px;
 }
+
+.thumbnails-update-container {
+    padding: 20px 0;
+    width: 50%;
+    margin: auto;
+}
+
+.thumbnails-update-container .thumbnail-placeholder {
+    background: grey;
+    margin: auto;
+}
+
+.thumbnails-update-container .thumbnail-link-title {
+    width: 75%;
+    margin: auto;
+
+    padding-bottom: 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.progressbar {
+    border-radius: 6px;
+    background-color: #111;
+    padding: 1px;
+}
+
+.progressbar > div {
+    border-radius: 10px;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f5f5f5,
+        #f5f5f5 6px,
+        #d0d0d0 6px,
+        #d0d0d0 12px
+    );
+    width: 0%;
+    height: 10px;
+}