Merge pull request #4 from ayozehd/minor-improvements

Minor improvements and fixes

CHANGELOG.md

@@ -1,3 +1,14 @@
+# v2.0.1
+##  08-08-2020
+
+1. [](#improved)
+  * Improved error exceptions and display message
+  * Added scroll to slide info when text is so large
+2. [](#bugfix)
+  * Fixed font sizes rescale. Now depends on container width (`vh`)
+  * Fixed reload button color when background is transparent
+  * Updated lodash and elliptic packages for security 
+
 # v2.0.0
 ##  10-06-2020
 

README.md

@@ -1,6 +1,6 @@
 # Last.fm Plugin
 
-Plugin for [Grav](http://github.com/getgrav/grav) that adds a cover scrobbler of your latest played songs thanks to [Last.fm](https://last.fm) API.
+Plugin for [Grav](http://github.com/getgrav/grav) that adds scrobbler of your latest played songs using the [Last.fm](https://last.fm) API.
 
 ![](screenshot.png)
 
@@ -32,7 +32,7 @@ Include this line in your template.html.twig file:
 {% include 'partials/lastfm.html.twig' %}
 ```
 
-Otherwise you can use a function which returns same results:
+Or you can use a Twig function:
 ```
 {{ lastfm() }}
 ```
@@ -42,16 +42,16 @@ Otherwise you can use a function which returns same results:
 | Variable | Default | Options | Note |
 |----------|---------|-------------------------------------------------|-------------------------------------------|
 | enabled | true | `true` or `false` | Enables or disables the plugin. |
-| lastfm_user | null | `username` | Your Last.fm username (*) |
+| lastfm_username | null | `your_username` | Last.fm username (*) |
 | api_key | null | `xxx` | Create an [API Account](https://www.last.fm/api/account/create) and get your API Key (*) |
 | limit | 10 | `int` < 50 | Total slides fetched. Last.fm limitation up to 50.|
-| width | 280 | `int` | Width of slides image |
-| height | 280 | `int` | Height of slides image |
-| image_size | `medium` | `small`, `medium`, `large`  or `extralarge` | Set an image size for latest song album |
+| display | 5 | `int` <= 25 | Number of slides to display |
+| width | 280 | `int` | Main slide width |
+| height | 280 | `int` | Main slide height |
+| image_size | `medium` | `small`, `medium`, `large`  or `extralarge` | Set an image size for albums |
 | background_color | `'transparent'` | `rgba` or `hex` color | Widget background color |
-| display | 7 | `int` <= 25 | Number of slides to display |
 | path | `/_lastfm` | `/route` | Define the route for Vue app. Useful in case of collision |
-| cache_enabled | `true` | `bool` | Store API response in cache. Disable it during development. |
+| cache_enabled | `true` | `bool` | Enable or disable cache storage |
 | cache_lifetime | 300 | `int` (seconds) | How much long should keep data stored in cache |
 
 (*) Required

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Last.fm
-version: 2.0.0
+version: 2.0.1
 description: A simple Last.fm scrobbler
 icon: headphones
 author:
@@ -31,7 +31,7 @@ form:
       title: Security
       info: API Key
       markdown: true
-      text: 'Signup or login Last.fm and then [create an API account](https://www.last.fm/api/account/create) to get your API Key:'
+      text: 'Signup or login at [Last.fm](https://www.last.fm/) and then [create an API account](https://www.last.fm/api/account/create) to get your API Key:'
       icon: lock
       collapsible: true
       fields:
@@ -54,40 +54,40 @@ form:
         limit:
           type: number
           size: small
-          label: Total
-          help: 'Number of slides fetched from API. Last.fm limitation up to 50'
+          label: Slides
+          help: 'Total list of slides from Last.fm. Max: 50'
           validate:
             max: 50
             min: 1
+        display:
+          type: number
+          size: small
+          label: Display
+          help: 'Number of visible slides. Max: 25'
+          validate:
+            max: 25
+            min: 1
         width:
           type: number
           size: small
           label: Width
-          help: Main cover width
+          help: Width of main slide
         height:
           type: number
           size: small
           label: Height
-          help: Main cover height
+          help: Height of main slide
         image_size:
           type: select
           size: small
           label: Image size
-          help: Choose a image size for album image
+          help: Choose a size for the album image
           default: medium
           options:
             small: Small
             medium: Medium
             large: Large
             extralarge: Extralarge
-        display:
-          type: number
-          size: small
-          label: Display tracks
-          help: 'Number of covers in slide. Max: 25'
-          validate:
-            max: 25
-            min: 1
         background_color:
           type: colorpicker
           label: Background color
@@ -100,11 +100,12 @@ form:
         path:
           type: text
           label: Route
-          placeholder: '/_lastfm/'
-          help: You might want change this value only in case of collision with your pages. Otherwise set it as default.
+          placeholder: '/_lastfm'
+          help: Change this value only in case of collision with your other pages. `/_lastfm` by default.
         cache_enabled:
           type: toggle
           label: Cache enabled
+          help: Enable or disable the cache storage
           highlight: 1
           default: 1
           options:

lastfm.php

@@ -53,6 +53,7 @@ public function pluginVueAppEndpoint()
         ];
 
         $data = null;
+        $error = null;
 
         $cache_enabled = $this->config->get('plugins.lastfm.cache_enabled');
 
@@ -73,7 +74,7 @@ public function pluginVueAppEndpoint()
             $api_key = $this->config->get('plugins.lastfm.api_key');
 
             if (!$username || !$api_key) {
-                $output['error'] = 'Your Last.fm username or API Key is not configured. Please review your plugin settings.';
+                $error = 'Last.fm username or API Key is empty. Review your plugin settings.';
             } else {
                 try {
                     $data = $this->lastfmApiRequest(
@@ -84,6 +85,7 @@ public function pluginVueAppEndpoint()
 
                 } catch(Exception $e) {
                     $this->grav['log']->error('plugin.lastfm: '. $e->getMessage());
+                    $error = $e->getMessage();
                 }
 
                 if ($cache_enabled)
@@ -92,6 +94,7 @@ public function pluginVueAppEndpoint()
         }
 
         $output['slides'] = $data;
+        $output['error'] = $error;
 
         header('Content-Type: application/json');
         echo json_encode($output);
@@ -108,7 +111,7 @@ public function onTwigTemplatePaths()
 
     public function onAssetsInitialized()
     {
-        $this->grav['assets']->addCss('plugin://lastfm/dist/style.css');
+        $this->grav['assets']->addCss('plugin://lastfm/dist/style.min.css');
         $this->grav['assets']->addInlineJs(sprintf("window.lastfm_path = '%s';", $this->config->get('plugins.lastfm.path')));
         $this->grav['assets']->addJs('plugin://lastfm/dist/main.js', [
             'loading' => 'defer'

lastfm.yaml

@@ -2,11 +2,11 @@ enabled: true
 api_key: null
 lastfm_username: username
 limit: 10
+display: 5
 width: 280
 height: 280
 image_size: medium
 background_color: 'transparent'
-display: 7
 path: /_lastfm
 cache_enabled: true
 cache_lifetime: 300

package.json

@@ -1,6 +1,6 @@
 {
   "name": "grav-plugin-lastfm",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A simple Last.fm scrobbler",
   "main": "src/app.js",
   "scripts": {
@@ -33,7 +33,9 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack-cli": "^3.3.11",
+    "lodash": "^4.17.19",
+    "elliptic": "^6.5.3"
   },
   "sideEffects": false
 }