init

.gitignore

@@ -1,130 +1,23 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
+.DS_Store
+node_modules
+/dist
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
 
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
+# local env files
 .env.local
+.env.*.local
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sébastien Corbière
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1 +1,69 @@
-# YTClipPlaylist
+# YTClipPlaylist
+
+YTClipPlaylist is a Vue.js-based web application designed to enhance the experience of watching long YouTube videos by allowing users to create and view playlists of selected video segments. This tool is particularly useful for viewers interested in specific parts of lengthy videos, such as highlights from sports events, key moments in conferences or tutorials, and much more.
+
+## Features
+
+Users can expect to achieve the following with YTClipPlaylist:
+
+- **Segment Selection**: Easily select segments from any YouTube video by specifying start and end times. Users can mark segments while watching the video, ensuring precision and convenience.
+- **Playlist Creation**: Compile the selected segments into a personalized playlist. Each segment can be labeled for easy identification.
+- **Seamless Viewing Experience**: Navigate through selected segments without having to manually search for them in the full video. Enjoy an uninterrupted viewing experience focusing on the content that matters most to you.
+
+## Services
+
+YTClipPlaylist offers two main services:
+
+1. **Video Segment Selector**: A tool that loads a YouTube video into a player where users can set start and end times for multiple segments. This service outputs a JSON file containing the list of video segments, including URLs, start/end times, and optional labels.
+
+2. **Video Segment Player**: Utilizes the JSON file generated by the Segment Selector to display a custom YouTube player. Users can navigate through their curated list of video segments, play them individually or consecutively, and filter by labels for efficient access to desired content.
+
+## Technical Information
+
+### Project Setup
+
+To get started with YTClipPlaylist, clone the repository and install dependencies:
+
+```
+npm install
+```
+
+### Development
+
+For development purposes, compile and hot-reload with:
+
+```
+npm run serve
+```
+
+This command serves the app locally for development, with live reloading on changes.
+
+### Production Build
+
+To compile and minify the project for production:
+
+```
+npm run build
+```
+
+This step optimizes the application for the best performance. The build is minified, and filenames include the hashes.
+
+### Linting
+
+Ensure code consistency and catch errors with:
+
+```
+npm run lint
+```
+
+### Configuration
+
+For further customization and advanced configuration options, see the Vue CLI [Configuration Reference](https://cli.vuejs.org/config/).
+
+## Contribution
+
+Contributions to YTClipPlaylist are welcome! Whether it's feature requests, bug fixes, or code contributions, please feel free to reach out or submit a pull request.
+
+## License
+
+YTClipPlaylist is released under [MIT License](LICENSE.md).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}