[#398] Use TypeScript (#400)

* [#398] Use TypeScript

* rmv .tool-versions

* update version

* type Find view

* run eslint

* more types

* updates

* more types

* add path to providers

* more types

* update node version

* OneDrive indexing

* refactor

* refactor OneDrive drive

* fetching

* add i18n

* update icons, refactor views and components

* fixes

* update nav

* convert more components to typescript

* cleanup

* player

* fixes

* redirect from player if there are no sources

* notification viewer

* add provider

* reset add provider modal

* fix

* provider already registered error

* update provider modal

* remove provider

* fixes

* fix markup in translations

* fixes

* indexing / fetching metadata

* fix stylelint errors

* update config

* add warnings for console

* update fallback images

* refactor episode entries

* fixes

* fix person view

* fix find view

* update files when opening player

* review

* scroll to top

* player view

* fixes

* fix plyr styling

* fix swiper styles

* update readme

.env

@@ -1,2 +1,2 @@
 REACT_APP_MICROSOFT_CLIENT_ID=c06abdd7-3e36-4e51-9ecf-8e304a3fe37f
-REACT_APP_TMDB_API_KEY=7a10886d19bdc8b264b9d570eaf54e68
+REACT_APP_TMDB_API_READ_ACCESS_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3YTEwODg2ZDE5YmRjOGIyNjRiOWQ1NzBlYWY1NGU2OCIsInN1YiI6IjVjODUxMjNjYzNhMzY4NGU4ZmRjZDBjNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.oKPj2ZU90QLq-q5-QucujCX0FMq_dmT_5nk28TogaR8

.eslintrc.js

@@ -0,0 +1,67 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 11,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
+  rules: {
+    'no-case-declarations': 'off',
+    'no-console': 'warn',
+    'sort-imports': 'error',
+    'react/prop-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+        },
+        singleline: {
+          delimiter: 'semi',
+        },
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        ignoreRestSiblings: true,
+      },
+    ],
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+  overrides: [
+    {
+      files: ['src/components/icons/Nucleo/*.tsx'],
+      rules: {
+        'react/display-name': 'off',
+      },
+    },
+    {
+      files: ['src/serviceWorker.ts'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
     - uses: actions/checkout@master
     - uses: actions/[email protected]
       with:
-        node-version: '14.3.0'
+        node-version: '14.13.0'
     - name: Install dependencies
       run: yarn install
     - name: Build
@@ -20,3 +20,5 @@ jobs:
       run: yarn eslint
     - name: Run stylelint
       run: yarn stylelint
+    - name: TypeScript
+      run: yarn tsc

.github/workflows/deploy.yml

@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@master
     - uses: actions/[email protected]
       with:
-        node-version: '14.3.0'
+        node-version: '14.13.0'
     - name: Install dependencies
       run: yarn install
     - name: Build

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local
+.tool-versions

.prettierignore

@@ -0,0 +1,9 @@
+*.html
+*.json
+*.md
+*.scss
+*.svg
+*.yml
+
+build
+node_modules

CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [email protected]. All
+reported by contacting the project team at [email protected]. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The project team is
 obligated to maintain confidentiality with regard to the reporter of an incident.

README.md

@@ -2,43 +2,69 @@
 
 Stream your media from anywhere. No server. No fee. Plaain works by connecting your device directly to the cloud where your media is hosted. It then stores metadata to all your movies & TV shows on your device.
 
-#### Supported cloud providers
+### Getting started
 
-* OneDrive
-* Dropbox (on the roadmap)
-* Google Drive (on the roadmap)
+Plaain works by connecting media files you are hosting in a cloud, enriching them with metadata and making them available from everywhere.
 
-### Getting started
+To get started, you first have to connect your preferred cloud.
+
+### Organize files
+
+Plaain expects your files to be organized in a certain way. Irrespectively of the folder you keep your movies/shows in these folders have to be structured as follows:
+
+#### Movies
 
-In your cloud you have to organize your files a certain way so that they are found by Plaain.
-1. Create a root folder called `Plaain`.
-2. Create the subfolders `Movies` and `Shows`
-3. Within `Movies`, create a folder for every movie you want to add to Plaain with the movies title as its name.
-4. Within `Shows`, create a folder for each TV show you intend to add to Plaain with the shows title as its name. Then create a subfolder for each season (use the season number as name, e.g. `1`). Yet one level deeper, create a subfolder for each episode (use the episode number as name).
-5. Within every folder for a watchable item (movie/episode), add your source files. Allowed file types for videos are `mp4`, `m4v`, `kmv` and `webm`. The only allowed file type for subtitles is `vtt`. You'll later be able to switch between the uploaded video sources and subtitles by filename.
+The movies folder must only contain other folders that each house the files for a movie.
 
-A file structure could look like this:
+```
+Movies
+|--Argo
+|--|--1080.mp4
+|--|--720.mp4
+|--|--English.vtt
+```
+
+#### Shows
+
+The shows is structured similarly to the movies folder only that there is an additional folder for each show and season respectively.
 
 ```
-Plaain
-|--Movies
-|--|--Argo
-|--|--|--1080.mp4
-|--|--|--720.mp4
-|--|--|--English.vtt
-|--Shows
-|--|--Game of Thrones
+Shows
+|--Dark
+|--|--1
 |--|--|--1
-|--|--|--|--1
-|--|--|--|--|--1080.mp4
-|--|--|--|--2
-|--|--|--|--|--1080.mp4
+|--|--|--|--1080.mp4
+|--|--|--2
+|--|--|--|--1080.mp4
 ```
 
-To get started, launch [Plaain](https://jonhue.github.io/plaain) and authenticate with your cloud provider.
-Now enjoy your favorite movies & TV shows!
+#### Source files
+
+Plaain uses all video files with one of the following extensions
+
+* `mp4`
+* `m4v`
+* `kmv`
+* `webm`
 
-**Note:** In the case that one of your movies/shows isn't added to Plaain even though it is located in your cloud, ensure that you can find the title on https://www.themoviedb.org/ by the name of the directory.
+and captions with the `vtt` extension.
+
+**Note:** Plaain uses your folder names to fetch metadata on your movies and TV shows from TMDb. In the case that one of your movies/shows isn't added to Plaain even though it is located in your cloud, ensure that you can find the title on https://www.themoviedb.org/ by the name of the directory.
+
+### Connect with cloud provider
+
+When your files are setup, [open Plaain](https://jonhue.github.io/plaain) and connect to your preferred cloud.
+
+Currently this list of cloud providers is supported:
+
+* OneDrive
+
+To wrap up setting up your cloud provider, Plaain will ask you where you stored your movies and TV shows.
+More specifically, Plaain will ask you for a path to your movies and a path to your TV shows. The paths should be relative to the root directory of your linked cloud.
+
+You don't have to setup everything at this stage. You will be able to go back and change these settings.
+
+When you finish setting up your provider, Plaain will index your files and enrich them with metadata. Then you're ready to enjoy your favorite movies & TV shows.
 
 ### Features
 
@@ -60,18 +86,15 @@ Plaain is built as a Progressive Web App with [React](https://reactjs.org/) & [R
 
 ### Development
 
-This project uses [asdf](https://github.com/asdf-vm/asdf) as version manager and [Yarn](https://github.com/yarnpkg/yarn) as JavaScript package manager.
-
-Dependencies are listed in the [.tool-versions](.tool-versions) file.
+This project uses [Yarn](https://github.com/yarnpkg/yarn) as package manager.
 
 1. Clone this repository
 
     `$ git clone ssh://[email protected]/jonhue/plaain.git`
 
-2. Install dependencies
+2. Install [Node.js](https://nodejs.org) and then fetch dependencies
 
     ```
-    $ asdf install
     $ yarn install
     ```
 
@@ -81,12 +104,10 @@ Dependencies are listed in the [.tool-versions](.tool-versions) file.
 
 ### Testing
 
-This project uses a react-scripts for testing and ESLint and StyleLint for linting:
-
 ```
+yarn prettierlint
 yarn eslint
 yarn stylelint
-yarn test
 ```
 
 ### Deployment