@latest-thinking/lt-player 1.2.0-d → 2.0.0-a

package/package.json

@@ -1,69 +1,33 @@
 {
-  "name": "@latest-thinking/lt-player",
-  "version": "1.2.0-d",
-  "description": "LT player.",
-  "main": "dist/js/lt-player-main.js",
-  "module": "dist/js/lt-player-main.js",
-  "sass": "src/assets/sass/app.scss",
-  "style": "dist/css/lt-player-main.css",
-  "scripts": {
-    "lint": "npm run lint:styles; npm run lint:scripts",
-    "lint:styles": "stylelint src",
-    "lint:scripts": "eslint src",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "start": "webpack watch --config webpack.config.dev.js"
-  },
-  "dependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-typescript": "^7.18.6",
-    "@types/hammerjs": "^2.0.41",
-    "@types/mustache": "^4.2.2",
-    "babel-loader": "^8.2.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "container-query-polyfill": "^1.0.2",
-    "copy-webpack-plugin": "^10.2.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.7.2",
-    "eslint": "^8.7.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "fixed": "^0.3.1",
-    "hammerjs": "^2.0.8",
-    "handlebars": "^4.7.7",
-    "hls.js": "^1.4.1-0.canary.9078",
-    "html-loader": "^3.1.0",
-    "json-schema-library": "^7.4.4",
-    "mini-css-extract-plugin": "^2.5.1",
-    "mustache": "^4.2.0",
-    "plyr": "^3.7.3",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.2.3",
-    "rangetouch": "^2.0.1",
-    "raw-loader": "^4.0.2",
-    "resolve-url-loader": "^5.0.0",
-    "stylelint": "^14.2.0",
-    "stylelint-config-standard": "^24.0.0",
-    "stylelint-webpack-plugin": "^3.1.1",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.9.3",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3",
-    "webpack-merge": "^5.8.0"
-  },
-  "devDependencies": {
-    "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.31.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "plyr": "^3.7.3",
-    "sass": "^1.60.0",
-    "sass-loader": "^13.2.2",
-    "webpack": "^5.76.3"
-  }
+    "name": "@latest-thinking/lt-player",
+    "version": "2.0.0-a",
+    "description": "Latest Thinking Player",
+    "main": "dist/main.js",
+    "module": "dist/main.js",
+    "scripts": {
+        "dev": "vite dev --host",
+        "build": "vite -c vite.config.mts build",
+        "preview": "vite -c vite-dev.config.mts build",
+        "test": "test"
+    },
+    "directories": {
+        "test": "tests"
+    },
+    "author": "Welink",
+    "license": "ISC",
+    "devDependencies": {
+        "eslint": "^8.56.0",
+        "jest": "^29.7.0",
+        "lil-gui": "^0.19.1",
+        "sass": "^1.70.0",
+        "vite": "^5.0.11",
+        "vite-plugin-handlebars": "^2.0.0"
+    },
+    "dependencies": {
+        "ajv": "^8.12.0",
+        "handlebars": "^4.7.8",
+        "media-icons": "^1.0.0",
+        "tslog": "^4.9.2",
+        "vidstack": "^1.10.9"
+    }
 }

package/tsconfig.json

@@ -10,13 +10,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "esModuleInterop": true,
+    "strictNullChecks": true,
     "lib": [
       "dom",
       "es5",
       "scripthost",
       "webworker"
     ],
-    "typeRoots": ["./node_modules/@types", "./src/global/types"],
+    "typeRoots": ["./node_modules/@types", "./src/types"],
     "allowSyntheticDefaultImports": true
   },
   "include": [

package/vite-dev.config.mts

@@ -0,0 +1,35 @@
+import {defineConfig} from 'vite'
+import {resolve} from 'path';
+// @ts-ignore
+import handlebars from 'vite-plugin-handlebars';
+
+export default defineConfig({
+    plugins: [handlebars({
+        partialDirectory: resolve(__dirname, 'templates'),
+    })],
+    publicDir: "public/",
+    css: {},
+    build: {
+        manifest: true,
+        minify: true,
+        reportCompressedSize: true,
+        lib: {
+            entry: resolve(__dirname, 'src/main.ts'),
+            name: "LT Player",
+            fileName: "main",
+            formats: ["es"]
+        },
+        rollupOptions: {
+            output: {
+                inlineDynamicImports: false,
+                entryFileNames: 'main.js',
+                manualChunks: () => 'main.mjs',
+                // Specify the file format to be .mjs
+                format: 'es',
+                // Since we're combining everything into one file,
+                // we don't need separate asset files.
+                assetFileNames: '[name].[ext]'
+            }
+        }
+    }
+})

package/vite.config.mts

@@ -0,0 +1,40 @@
+import {defineConfig} from 'vite'
+import {resolve} from 'path';
+// @ts-ignore
+import handlebars from 'vite-plugin-handlebars';
+
+export default defineConfig({
+    plugins: [handlebars({
+        partialDirectory: resolve(__dirname, 'templates'),
+    })],
+    publicDir: false,
+    css: {},
+    build: {
+        manifest: false,
+        minify: true,
+        reportCompressedSize: true,
+        lib: {
+            entry: resolve(__dirname, 'src/main.ts'),
+            name: "LT Player",
+            fileName: "main",
+            formats: ["es"]
+        },
+        rollupOptions: {
+            external: ['vidstack', 'handlebars'],
+            output: {
+                globals: {
+                    "vidstack": "vidstack",
+                    "handlebars": "Handlebars"
+                },
+                inlineDynamicImports: false,
+                entryFileNames: 'main.js',
+                manualChunks: () => 'main.mjs',
+                // Specify the file format to be .mjs
+                format: 'es',
+                // Since we're combining everything into one file,
+                // we don't need separate asset files.
+                assetFileNames: '[name].[ext]'
+            }
+        }
+    }
+})

package/ README.md

@@ -1,270 +0,0 @@
-# Title
-____
-# Features
-
-# Quick setup
-
-## HTML
-
-Player extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
-
-### HTML5 Video
-
-```html
-<div class="lt-player"
-    data-lt-player-config='{config}'>
-</div>
-```
-
-**Note**: It is mandatory to add the class with the name "lt-player", to be instantiated by the Player Manager and data-lt-player-config = {config object}
-
-## JavaScript
-
-```html
-<div class="lt-player"
-    data-lt-player-config='{config}'>
-</div>
-<script>
-    window.addEventListener('load', () => {
-        const player = Player.initByClassOrID('lt-player').then(player => {
-            return player;
-        });
-    })
-</script>
-```
-
-You can use initByClassOrID method, to instantiate player by string name. Mandatory data-lt-player-config={config object}
-
-...OR...
-
-You can use initBySelector method, to instantiate player by HTMLElement. Mandatory data-lt-player-config={config object}
-
-```html
-<div class="lt-player">
-</div>
-<script>
-    window.addEventListener('load', () => {
-        let selector = document.querySelector('lt-player');
-      
-        const player = Player.initBySelector(selector).then(player => {
-            return player;
-        });
-    })
-</script>
-```
-
-You can instantiate multiple player by HTMLElement. Mandatory data-lt-player-config={config object}
-
-```html
-<div class="lt-player">
-</div>
-<div class="lt-player">
-</div>
-<div class="lt-player">
-</div>
-<div class="lt-player">
-</div>
-<script>
-    window.addEventListener('load', () => {
-        let selectors = document.querySelectorAll('lt-player');
-        
-        selectors.forEach(item => {
-            Player.initBySelector(item).then(player => {
-                console.log(player)
-            });
-        })
-    })
-</script>
-```
-
-You can instantiate by javascript object config. See examples:
-```html
-<div class="lt-player">
-</div>
-<script>
-    window.addEventListener('load', () => {
-      
-        const objectConfig =
-            {
-                version: "2",
-                body: {
-                    playerContainer: 'lt-player' //mandatory 
-                }
-            }
-        
-        const player = Player.initPlayer(objectConfig).then(player => {
-            return player;
-        });
-    })
-</script>
-```
-
-```html
-<div class="lt-player">
-</div>
-<script>
-    window.addEventListener('load', () => {
-      
-        const objectConfig =
-            {
-                version: "2",
-                body: {
-                    playerContainer: 'lt-player' //mandatory 
-                }
-            }
-        const selector = document.querySelector('lt-player');
-        
-        const player = Player.initBySelector(selector, objectConfig).then(player => {
-            return player;
-        });
-    })
-</script>
-```
-
-```html
-<div class="lt-player">
-</div>
-<script>
-    window.addEventListener('load', () => {
-      
-        const objectConfig =
-            {
-                version: "2",
-                body: {
-                    playerContainer: 'lt-player' //mandatory 
-                }
-            }
-        
-        const player = Player.initByClassOrID('lt-player', objectConfig).then(player => {
-            return player;
-        });
-    })
-</script>
-```
-# Multiple captions - support for multiple caption tracks
-
-### HTML5 Video config
-
-| Option               | Type                       | Default                                                                                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| -------------------- | -------------------------- |----------------------------------------------------------------------------------------------------------------------| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `captions`           | Object                     | `{ active: true, language: 'auto', update: true, label="", url="" srclang="" default=boolean }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in non-selectable language options).                                                                                                                      |
-
-HTML5 only
-
-### The `.source` setter
-
-This allows changing the player source and type on the fly.
-
-Video example:
-
-```js
-player.source = {
-  tracks: [
-    {
-      kind: 'captions',
-      label: 'English',
-      srclang: 'en',
-      src: '/path/to/captions.en.vtt',
-      default: true,
-    },
-    {
-      kind: 'captions',
-      label: 'French',
-      srclang: 'fr',
-      src: '/path/to/captions.fr.vtt',
-    },
-  ],
-};
-```
-## Methods
-
-Example method use:
-
-```js
-player.toggleCaptions(toggle); 
-```
-
-
-## Example player config
-```json
- {
-  "version": 2,
-  "body": {
-    "pinText" : true,
-    "pinSeekBar" : false,
-    "pinControls" : false,
-    "embed": false,
-    "playerType": "portrait",
-    "chapters": [
-      {
-        "name": "Capitol 1",
-        "timestamp": "10"
-      },
-      {
-        "name": "Capitol 2",
-        "timestamp": "15"
-      },
-      {
-        "name": "Capitol 3",
-        "timestamp": "17"
-      }
-    ],
-    "defaultConfig": {
-      "captions": {
-        "active": false,
-        "language": "en",
-        "update": true,
-        "label": "asdfasdfasdf",
-        "url": "/lt-player/examples/samples/vtt/Pahl-Kerstin-Maria-MAIN-20230320.vtt",
-        "srclang": "en"
-       }
-    },
-    "captionsEnabled": false,
-    "videoTitle": "Maja Adena",
-    "posterImage": "https://web.lt.dev.welink.sh/sites/default/files/2023-09/Video%201.00_00_00_00.Standbild001.jpg",
-    "videoParagraph": "What Are Some Unintended Consequences of Pension Reform?",
-    "videoUrl": "https://player.vimeo.com/external/837554695.m3u8?s=0c690ee7961cdfabf925774a536d2376e155d7fe",
-    "tracks": "https://web.lt.dev.welink.sh/sites/default/files/video-short/subtitles/Pahl-Kerstin-Maria-MAIN-20230320.vtt",
-    "fullscreenDisabled": true,
-    "share": {
-        "canonicalUrl": "http://stg.lt.org/publication/what-are-economic-consequences-international-migration",
-        "embedUrl": "https://stg.lt.org/embed/2892",
-        "title": "What Are the Economic Consequences of International Migration?"
-      },
-    "additionalInfo": {
-      "bio": {
-        "title": "Bio",
-        "description": "Maja Adena is a Postdoctoral Researcher in economics. She received her PhD from the Free University Berlin, where she worked as a research fellow until 2012. Ever since, Adena worked with the Social Science Research Centre Berlin (WZB), where she acts not only as a researcher, but also as a member of the academic council. \n\nAdena’s research interests reach from applied microeconomics to political economy and behavioural economics with a more specific interest in the economy of non-profit and charitable organisations."
-      },
-      "institution": {
-        "title": "Institution",
-        "institutionName": "Florida State University",
-        "image": "https://web.lt.dev.welink.sh/sites/default/files/institution/florida-state-university_cover.jpg",
-        "description": "Florida State University preserves, expands, and disseminates knowledge in the sciences, technology, arts, humanities, and professions, while embracing a philosophy of learning strongly rooted in the traditions of the liberal arts. The university is dedicated to excellence in teaching, research, creative endeavors, and service. The university strives to instill the strength, skill, and character essential for lifelong learning, personal responsibility, and sustained achievement within a community that fosters free inquiry and embraces diversity."
-      }
-    },
-    "playerContainer": "PLAYER1",
-    "preload": {
-    "start": 5,
-    "stop": 10,
-    "autoType": true,
-    "isActive": true
-    },
-    "autoPlay": true,
-    "fullscreenDisabled": true,
-    "vimeo": {
-      "controls": false,
-      "active": false,
-      "gesture": "media",
-      "transparent": true,
-      "speed": true,
-      "portrait": true,
-      "keyboard": false,
-      "title": false,
-      "byline": false,
-      "playsinline": true,
-      "background": true
-    }
-  }
-}
-```

package/.babelrc

@@ -1,11 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-runtime"
-  ]
-}

package/.eslintrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint'],
-  root: true,
-};