Merge pull request #2 from KristjanESPERANTO/main

Thank you @KristjanESPERANTO

.eslintrc.json

@@ -6,13 +6,11 @@
     "plugin:jsdoc/recommended-typescript-flavor"
   ],
   "plugins": [
-    "jsdoc",
-    "jest"
+    "jsdoc"
   ],
   "env": {
     "browser": true,
-    "es6": true,
-    "jest/globals": true,
+    "es2023": true,
     "node": true
   },
   "globals": {
@@ -24,7 +22,7 @@
   },
   "parserOptions": {
     "sourceType": "module",
-    "ecmaVersion": 13,
+    "ecmaVersion": "latest",
     "ecmaFeatures": {
       "globalReturn": true
     }

CHANGELOG.md

@@ -1,4 +1,4 @@
 # MMM-OneDrive Change Log
 
 **`[1.0.0] - 2023/07/17`**
-First version
+First version

INSTALL.md

@@ -1,15 +1,19 @@
-## Installation
+# Installation
+
 1. Install Module
+
    ```sh
-   cd ~/magic_mirror/modules
-   git clone https://github.com/hermanho/MMM-OneDrive.git
+   cd ~/MagicMirror/modules
+   git clone https://github.com/hermanho/MMM-OneDrive
    cd MMM-OneDrive
    npm install
    ```
+
    If you are using Docker
+
    ```sh
    cd ~/MagicMirror/modules
-   git clone https://github.com/hermanho/MMM-OneDrive.git
+   git clone https://github.com/hermanho/MMM-OneDrive
    docker exec -it -w /opt/magic_mirror/module MMM-OneDrive magic_mirror npm install
    ```
 
@@ -18,23 +22,29 @@
 ## Authorise OAuth Token
 
 ### On-device (Just do it on Raspberry PI with Desktop UI)
+
    1. Start MagicMirror as usual
-      ```
+
+      ```sh
       cd ~/MagicMirror
       npm start
       ```
+
    1. At first execution, It will open a browser and will ask you to login Microsoft account.
    1. Authorize it and close the browser when done
       <img src="images/authorize.png" width="300">
       <img src="images/signed-in.png" width="300">
-   
+
 ### Sperated machine (When the device does not have Desktop UI)
+
    1. Install a copy in your local machine (Win / Mac)
    1. Start MagicMirror as usual
-      ```
+
+      ```sh
       cd ~/MagicMirror
       npm start
       ```
+
    1. At first execution, It will open a browser and will ask you to login Microsoft account.
    1. Authorize it and close the browser when done
       <img src="images/authorize.png" width="300">

README.md

@@ -1,57 +1,68 @@
 # MMM-OneDrive
-Display your photos from album of OneDrive on MagicMirror. Inspired by [MMM-GooglePhotos](https://github.com/hermanho/MMM-GooglePhotos)
+
+Display your photos from album of OneDrive on [MagicMirror²](https://github.com/MagicMirrorOrg/MagicMirror). Inspired by [MMM-GooglePhotos](https://github.com/hermanho/MMM-GooglePhotos).
 
 ## Screenshot
-![](images/sc.png)
 
-![](images/sc2.png)
+![screenshot](images/screenshot.png)
+
+![screenshot](images/screenshot2.png)
 
 ## Installation
+
 [INSTALL.md](INSTALL.md)
 
 ## Configuration
+
 ```javascript
 {
   module: "MMM-OneDrive",
   position: "top_right",
   config: {
-		albums: [], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
-		updateInterval: 1000 * 60, // minimum 10 seconds.
-		sort: "new", // "old", "random"
-		condition: {
-			fromDate: null, // Or "2018-03", RFC ... format available
-			toDate: null, // Or "2019-12-25",
-			minWidth: null, // Or 400
-			maxWidth: null, // Or 8000
-			minHeight: null, // Or 400
-			maxHeight: null, // Or 8000
-			minWHRatio: null,
-			maxWHRatio: null,
-			// WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
-		},
-		showWidth: 1080, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
-		showHeight: 1920,
-		timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
+  albums: [], // Set your album name. like ["My wedding", "family share", "Travle to Paris"]
+  updateInterval: 1000 * 60, // minimum 10 seconds.
+  sort: "new", // "old", "random"
+  condition: {
+   fromDate: null, // Or "2018-03", RFC ... format available
+   toDate: null, // Or "2019-12-25",
+   minWidth: null, // Or 400
+   maxWidth: null, // Or 8000
+   minHeight: null, // Or 400
+   maxHeight: null, // Or 8000
+   minWHRatio: null,
+   maxWHRatio: null,
+   // WHRatio = Width/Height ratio ( ==1 : Squared Photo,   < 1 : Portraited Photo, > 1 : Landscaped Photo)
+  },
+  showWidth: 1080, // These values will be used for quality of downloaded photos to show. real size to show in your MagicMirror region is recommended.
+  showHeight: 1920,
+  timeFormat: "YYYY/MM/DD HH:mm", // Or `relative` can be used.
   }
 },
 ```
 
 ## Usage
-#### **`albums`**
+
+### `albums`
+
 Now this module can access not only your owns but also shared. You can specify album title like this.
+
 ```js
 albums: ["My wedding", "family share", "Travle to Paris", "from Tom"],
 ```
+
 - Caution. Too many albums and photos could make long bootup delay.
 - Remember this. You can only show max 8640 photos in a day. Manage your album what to show, it will make better performance.
 
-#### **`updateInterval`**
+### `updateInterval`
+
 - Minimum `updateInterval` is 10 seconds. Too often update could makes API quota drains or network burden.
 
-#### **`sort`**
+### `sort`
+
 - `new`, `old`, `random` are supported.
 
-#### **`condition`**
+### `condition`
+
 - You can filter photos by this object.
 - `fromDate` : If set, The photos which was created after this value will be loaded. (e.g: `fromDate:"2015-12-25"` or `fromDate:"6 Mar 17 21:22 UT"`)
 - `toDate` : If set, The photos which was created before this value will be loaded. (e.g: `toDate:"Mon 06 Mar 2017 21:22:23 z"` or `toDate:"20130208"`)
@@ -60,28 +71,34 @@ albums: ["My wedding", "family share", "Travle to Paris", "from Tom"],
 - `minWHRatio`, `maxWHRatio` : With these values, you can get only portrait photos(or landscaped, or squared)
 - **WHRatio** is `width / height`. So `=1` will be squared dimension. `>1` will be landscaped. `<1` will be portrait.
 - Example:
+
 ```js
 condition: {
-	fromDate: "2018-01-01", // I don't want older photos than this.
-	minWidth: 600, // I don't want to display some icons or meme-pictures from my garbage collecting albums.
-	maxWHRatio: 1, // I want to display photos which are portrait.
+ fromDate: "2018-01-01", // I don't want older photos than this.
+ minWidth: 600, // I don't want to display some icons or meme-pictures from my garbage collecting albums.
+ maxWHRatio: 1, // I want to display photos which are portrait.
 }
 ```
 
-#### **`showWidth`, `showHeight`**
+### `showWidth`, `showHeight`
+
 - Specify your real resolution to show.
 
-#### **`timeFormat`**
+### `timeFormat`
+
 - Specify time format for photo info. You can also use `relative` to show more humanized.
 
-#### **`debug`**
+### `debug`
+
 - If set, more detailed info will be logged.
 
-#### **`autoInfoPosition`**
+### `autoInfoPosition`
+
 - For preventing LCD burning, Photo info can be relocated by condition.
-  	- `true` : automatically change position to each corner per 15 minutes.
-		- `false` : not using.
-		- callbackfunction (album, photo) : User can make his own position. It should return `[top, left, bottom, right]`
+  - `true` : automatically change position to each corner per 15 minutes.
+    - `false` : not using.
+    - callbackfunction (album, photo) : User can make his own position. It should return `[top, left, bottom, right]`
+
 ```js
 autoInfoPosition: true, // or false
 
@@ -92,17 +109,18 @@ autoInfoPosition: (album, photo)=> {
 
 ```
 
+## Tip
 
-
-## Tip.
 - Not to show photo info : Add this into your `css/custom.css`.
+
 ```css
 #ONEDRIVE_PHOTO_INFO {
-	display:none;
+ display:none;
 }
 ```
 
 - To move photo info to other position (e.g: top-left corner): Add this into your `css/custom.css`.
+
 ```css
 #ONEDRIVE_PHOTO_INFO {
   top: 10px;
@@ -113,35 +131,40 @@ autoInfoPosition: (album, photo)=> {
 ```
 
 - Not to show blurred Background : Add this into your `css/custom.css`.
+
 ```css
 #ONEDRIVE_PHOTO_BACK {
-	display:none;
+ display:none;
 }
 ```
 
 - To cover whole region with image : Add this into your `css/custom.css`.
+
 ```css
 #ONEDRIVE_PHOTO_CURRENT {
-	background-size:cover;
+ background-size:cover;
 }
 ```
 
 - To shrink image and be fully visible on smaller screens : Add this into your `css/custom.css`.
+
 ```css
 #ONEDRIVE_PHOTO_CURRENT {
-	background-size:contain;
+ background-size:contain;
 }
 ```
 
 - To display `clock` more clearly on showing in `fullscreen_below` : Add this into your `css/custom.css`.
+
 ```css
 .clock {
   padding: 10px;
-	background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgba(0, 0, 0, 0.5);
 }
 ```
 
 - To give opacity to photos:
+
 ```CSS
 @keyframes trans {
   from {opacity: 0}
@@ -154,11 +177,12 @@ autoInfoPosition: (album, photo)=> {
 ```
 
 ## Notice
+
 - First scanning will take a few (~dozens) seconds. Don't panic.
 - If there are 1000s of photos, this scan could take minutes(over 10). longer scans increase the probablity of an error happening. If a single error happens in the scan, it will retry after 1 hour. After first successful scan, subsequent startups should go very quickly(seconds).
-- 
+-
 
+## Last Tested
 
-## Last Tested;
 - MagicMirror : v2.24.0
 - node.js : required over v16.

msal/AuthProvider.js

@@ -35,7 +35,7 @@ class AuthProvider {
 
 
   async login() {
-    this.debug('Request token')
+    this.debug('Request token');
     const authResponse = await this.getToken({
       // If there are scopes that you would like users to consent up front, add them below
       // by default, MSAL will add the OIDC scopes to every token request, so we omit those here