Feature/noid/imagecaching

.gitignore

@@ -1 +1,2 @@
 build
+node_modules

appinfo/info.xml

@@ -7,7 +7,7 @@
     <summary lang="de">📸🔀☁️ Zufällige Hintergrundbilder von Unsplash</summary>
     <description>Show a new random featured nature photo in your nextcloud. Now with choosable motives!</description>
     <description lang="de">Zeigt ein zufällig ausgewähltes Naturfoto in ihrer Nextcloud. Jetzt auch mit selbstwählbaren Motiven!</description>
-    <version>2.2.2</version>
+    <version>3.0.0</version>
     <licence>agpl</licence>
     <author mail="[email protected]" homepage="https://jancborchardt.net">Jan-Christoph Borchardt</author>
     <author homepage="https://github.com/marius-wieschollek">Marius Wieschollek</author>
@@ -22,12 +22,15 @@
     <screenshot>https://raw.githubusercontent.com/nextcloud/unsplash/master/unsplash.jpg</screenshot>
     <screenshot>https://raw.githubusercontent.com/nextcloud/unsplash/master/unsplash-header.jpg</screenshot>
     <dependencies>
-        <php min-version="7.4" />
-        <nextcloud min-version="25" max-version="27"/>
+        <php min-version="8.0" max-version="8.3" />
+        <nextcloud min-version="26" max-version="28" />
     </dependencies>
     <settings>
         <admin>OCA\Unsplash\Settings\AdminSettings</admin>
         <personal>OCA\Unsplash\Settings\PersonalSettings</personal>
     </settings>
+    <background-jobs>
+        <job>OCA\Unsplash\Cron\ImageProviderBackgroundFetch</job>
+    </background-jobs>
 </info>
 

appinfo/routes.php

@@ -14,6 +14,8 @@
         ['name' => 'admin_settings#getCustomization', 'url' => '/settings/admin/getCustomization/{providername}', 'verb' => 'GET'],
         ['name' => 'personal_settings#set', 'url' => '/settings/personal/set', 'verb' => 'POST'],
         ['name' => 'css#login', 'url' => '/api/login.css', 'verb' => 'GET'],
-        ['name' => 'css#dashboard', 'url' => '/api/dashboard.css', 'verb' => 'GET']
+        ['name' => 'css#dashboard', 'url' => '/api/dashboard.css', 'verb' => 'GET'],
+        ['name' => 'image#get', 'url' => '/api/image', 'verb' => 'GET'],
+        ['name' => 'image#getMetadata', 'url' => '/api/metadata', 'verb' => 'GET']
     ]
 ]);

css/metadata.css

@@ -0,0 +1,59 @@
+.unsplash-floating-bottom-right {
+    position: fixed;
+    margin: 15px;
+    bottom: 0px;
+    bottom: 0px;
+    right: 0px;
+    display: flex !important;
+    justify-content: left;
+}
+
+.unsplash-icon-info {
+    background-image: url(../img/mdi_info.svg);
+    filter: var(--background-invert-if-dark);
+    width: 1.5em;
+    height: 1.5em;
+}
+
+
+.unsplash-metadata-text {
+    flex: 1;
+    margin-left: 10px;
+    max-width: 200px;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+
+    /* Align text next to icon */
+    justify-content: left;
+    display: flex;
+
+    /* Fix Font*/
+    font-weight: initial;
+}
+
+
+.unsplash-metadata-text :hover {
+    text-decoration: underline;
+}
+
+.unsplash-metadata-title {
+    font-weight: bold;
+}
+
+.unsplash-metadata-hidden {
+    display: none;
+}
+
+/* Generally taken from guest-box style t*/
+.dash-panel {
+    color: var(--color-main-text);
+    background-color: var(--color-main-background-blur);
+    padding: 16px;
+    border-radius: var(--border-radius-rounded);
+    display: inline-block;
+    -webkit-backdrop-filter: var(--filter-background-blur);
+    backdrop-filter: var(--filter-background-blur);
+}

js/metadata.js

@@ -0,0 +1,95 @@
+(function() {
+    function initialize() {
+        loadMetadata()
+    }
+
+    /**
+     * @private
+     */
+    function loadMetadata() {
+
+        var metadata = OC.generateUrl('/apps/unsplash/api/metadata');
+        let headers= {
+            method: 'GET',
+            headers: {
+                'requesttoken': OC.requestToken,
+                'Accept': 'application/json'
+            }
+        }
+
+        let request = new Request(metadata);
+
+        fetch(request, headers)
+            .then( response => response.json())
+            .then( data => {
+                console.log(data)
+                addMetadataToDOM(data)
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+    }
+
+
+    function addMetadataToDOM(data) {
+        let div = document.createElement("div");
+        let info = document.createElement("div");
+        let source = document.createElement("p");
+        let description = document.createElement("p");
+        let author = document.createElement("p");
+        let goto = document.createElement("a");
+
+
+        // First, prepare all styles
+        source.classList = "unsplash-metadata-text unsplash-metadata-hidden unsplash-metadata-title"
+        author.classList = "unsplash-metadata-text unsplash-metadata-hidden"
+        description.classList = "unsplash-metadata-text unsplash-metadata-hidden"
+        info.classList = "unsplash-icon-info"
+        //dash-panel for dashboard, guest-box for login
+        div.classList = "dash-panel guest-box unsplash-floating-bottom-right"
+
+        // Second, prepare functions
+        info.onclick = function() {
+            author.classList.remove('unsplash-metadata-hidden')
+            description.classList.remove('unsplash-metadata-hidden')
+            source.classList.remove('unsplash-metadata-hidden')
+        };
+
+
+        // Third, add links
+        div.href = data.attribution
+
+
+        // Last: Add content to main div and body
+
+        source.textContent = data.source+":"
+        if(!data.description) {
+            if(!data.author) {
+                source.textContent = data.source
+            }
+        }
+        goto.appendChild(source)
+
+        if(data.description) {
+            description.textContent = data.description.substring(0, 25)+"..." // optimally this would be done by css.
+            goto.appendChild(description)
+        }
+
+        if(data.author) {
+            author.textContent = "- "+data.author
+            goto.appendChild(author)
+        }
+
+        goto.href = data.attribution
+
+
+        // Now append both to main div
+        div.appendChild(info)
+        div.appendChild(goto)
+
+        document.getElementsByTagName("body")[0].appendChild(div)
+    }
+
+
+    initialize();
+})();

js/settings.js

@@ -55,16 +55,21 @@
      * @private
      */
     function _setValue(key, value, type) {
-        let headers = new Headers();
-        headers.append('requesttoken', OC.requestToken);
-        headers.append('Accept', 'application/json');
-        headers.append('Content-Type', 'application/json');
 
-        let body    = JSON.stringify({key, value}),
-            options = {headers, body, method: 'POST', redirect: 'error'},
-            request = new Request(this.saveUrl, options);
+        let headers= {
+            method: 'POST',
+            headers: {
+                'requesttoken': OC.requestToken,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            }
+        }
+
+        let body    = JSON.stringify({key, value})
+        let options = {headers, body, method: 'POST', redirect: 'error'}
+        let request = new Request(this.saveUrl, options);
 
-        fetch(request)
+        fetch(request, headers)
             .then(() => {
                 _showMessage('success');
                 if(type === 'select') {
@@ -85,19 +90,23 @@
      * @private
      */
     function getCustomization(providername) {
-        let headers = new Headers();
-        headers.append('requesttoken', OC.requestToken);
-        headers.append('Accept', 'application/json');
-        headers.append('Content-Type', 'application/json');
+        let headers= {
+            method: 'GET',
+            headers: {
+                'requesttoken': OC.requestToken,
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            }
+        }
 
         let updateCustomizationUrl = document.getElementById('unsplash-settings').dataset.requestupdate
 
         //todo: build this url better.
-        var apiUrl = updateCustomizationUrl.substr(0,updateCustomizationUrl.lastIndexOf("/")+1);
-        let options = {headers, method: 'GET', redirect: 'error'},
-            request = new Request(apiUrl+providername, options);
+        let apiUrl = updateCustomizationUrl.substr(0,updateCustomizationUrl.lastIndexOf("/")+1);
+        let options = {headers, method: 'GET', redirect: 'error'}
+        let request = new Request(apiUrl+providername, options);
 
-        fetch(request)
+        fetch(request, headers)
             .then(res =>
                 res.json())
             .then(data => {

lib/AppInfo/Application.php

@@ -10,6 +10,7 @@
 use OCA\Unsplash\EventListener\BeforeTemplateRenderedEventListener;
 use OCA\Unsplash\Services\LegacyInitialisationService;
 use OCP\AppFramework\App;
+use OCP\AppFramework\Http\Events\BeforeLoginTemplateRenderedEvent;
 use OCP\AppFramework\Http\Events\BeforeTemplateRenderedEvent;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\Security\CSP\AddContentSecurityPolicyEvent;
@@ -42,7 +43,7 @@ protected function registerSystemEvents() {
         /* @var IEventDispatcher $eventDispatcher */
         $dispatcher = $this->getContainer()->get(IEventDispatcher::class);
         $dispatcher->addServiceListener(BeforeTemplateRenderedEvent::class, BeforeTemplateRenderedEventListener::class);
+        $dispatcher->addServiceListener(BeforeLoginTemplateRenderedEvent::class, BeforeTemplateRenderedEventListener::class);
         $dispatcher->addServiceListener(AddContentSecurityPolicyEvent::class, AddContentSecurityPolicyEventListener::class);
-
     }
 }

lib/Controller/AdminSettingsController.php

@@ -6,7 +6,6 @@
 
 namespace OCA\Unsplash\Controller;
 
-use OCA\Unsplash\ProviderHandler\ProviderDefinitions;
 use OCA\Unsplash\Services\SettingsService;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
@@ -46,11 +45,10 @@ public function __construct($appName, IRequest $request, SettingsService $settin
      * @return JSONResponse
      */
     public function set(string $key, $value): JSONResponse {
-
         if(strtolower($value) === 'true') $value = true;
         if(strtolower($value) === 'false') $value = false;
 
-       if($key === 'style/login') {
+        if($key === 'style/login') {
             $this->settings->setServerStyleLoginEnabled($value);
         } else if($key === 'style/dashboard') {
             $this->settings->setServerStyleDashboardEnabled($value);
@@ -69,18 +67,21 @@ public function set(string $key, $value): JSONResponse {
 			$this->settings->setColorStrength(filter_var($value, FILTER_SANITIZE_NUMBER_INT));
 		} else if($key === 'style/strength/blur') {
 			$this->settings->setBlurStrength(filter_var($value, FILTER_SANITIZE_NUMBER_INT));
-       } else if($key === 'style/login/highvisibility') {
+        } else if($key === 'style/login/highvisibility') {
            if($value) {
                $this->settings->setHighVisibilityLogin(1);
            } else {
                $this->settings->setHighVisibilityLogin(0);
            }
-		} else {
+        } else if($key === 'provider/token') {
+            $this->settings->setCurrentProviderToken($value);
+        } else {
             return new JSONResponse(['status' => 'error'], Http::STATUS_BAD_REQUEST);
         }
 
         return new JSONResponse(['status' => $value]);
     }
+
     /**
      * Get the customizationstring for the requested providername
      *