Feedback

.gitignore

@@ -8,16 +8,23 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.DS_Store
 dist
 dist-ssr
+coverage
 *.local
 
+/cypress/videos/
+/cypress/screenshots/
+
 # Editor directories and files
 .vscode/*
+!.vscode/extensions.json
 .idea
-.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

Consignes.md

@@ -0,0 +1,119 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/Czpw_ePo)
+# Boîte musicale
+
+Dans cet exercice, vous devez créer une application web pour gérer une liste de lecture des titres musicaux (playlist).
+
+## Modalité
+* Vous devez réaliser l'exercice en binôme.
+* Cet exercice est noté, le rendu doit être envoyé sur GitHub Classroom.
+* Le compte rendu est obligatoire, et doit impérativement indiquer les noms et prénoms de binôme.
+
+## Consignes
+Vous devrez créer une application de gestion de liste de lecture musicale à l’exemple de l'application présent sur [ce lien](https://polytechlyon.github.io/3a-isi1-24-25-tp-jukebox-example/).
+
+Vous devez utiliser le framework Vue 3 pour réaliser cet exercice, sans aucune libraire tierce.
+
+## Fonctionnalités
+Il s'agit d'une application mono-page.
+L'interface utilisateur comporte trois parties :
+* Un contrôleur pour arrêter et reprendre le lecteur audio.
+* Une liste de lecture.
+* Un formulaire pour ajouter un titre à la liste.
+
+Par simplicité, la liste ne sera pas sauvegardée entre les rechargements de la page.
+
+### Interface utilisateur
+#### Contrôleur
+Lorsqu'il y a un titre en cours de lecture, le contrôleur affiche l'intitulé de ce titre, ainis qu'une barre indiquant le progrès de la lecture.
+Un bouton permet de mettre en pause ou de reprendre le titre, selon l'état de lecture.
+
+L'utilisateur peut choisir le mode de répétition grâce à un contrôle adequate.
+Les modes de répétition disponibles sont Liste, Titre, ou Aucun.
+
+#### Liste de lecture
+La liste de lecture affiche les intitulés des titres ajoutés par l'utilisateur.
+Chaque item est accompagné de deux boutons : un pour jouer le titre, et un pour le supprimer.
+
+L'intitulé du titre en cours de lecture est mis en évidence, par exemple avec un texte en gras.
+
+Les titres qui ne fonctionnent pas, par exemple, à cause d'un lien défectueux, auront le bouton de lecture grisé.
+Leurs items seront marqués, par exemple par un texte barré. 
+
+#### Formulaire d'ajout
+Ce formulaire permet d'ajouter un titre à la liste de lecture.
+Deux types d'ajout sont possibles : soit par lien, soit par fichier.
+
+L'utilisateur précise le mode d'ajout souhaité grâce à un contrôle adéquat.
+
+Pour un ajout par lien, l'utilisateur doit saisir l'URL d'un fichier audio accessible en ligne.
+Le formulaire d'ajout ne vérifie pas la validité du lien.
+L'intitulé du titre est être déduit automatiquement du lien.
+
+Pour un ajout par fichier, l'utilisateur doit sélectionner un fichier audio depuis son système de fichiers.
+Le formulaire d'ajout ne vérifie pas le format de fichier.
+L'intitulé du titre est déduit automatiquement du nom de fichier.
+
+Au lieu de la déduction automatique de l'intitulé, vous pouvez, selon votre choix, fournir un champ de saisi dédié à cette fin.
+
+### Lecture
+Lorsque le mode de répétition Liste est choisi (le mode par défaut), le lecteur joue les titres de la liste dans l'ordre.
+Quand la liste est terminée, la lecture reprend de début de la liste.
+Si le mode de répétition Aucun est choisi, le lecteur joue les titres dans l'ordre aussi.
+Par contre, quand la liste est terminée, la lecture s'arrête.
+Si le mode de répétition Titre est choisi, le lecteur joue le titre en cours de lecture en boucle.
+
+Lorsque l'utilisateur clique sur la barre du progrès, la lecture saute à la position correspondante.
+
+Lorsqu'un titre défectueux est détecté, il est marqué comme tel.
+Le lecteur passe automatiquement au titre suivant à chaque fois qu'un titre défectueux est rencontré.
+Un titre peut être défectueux pour plusieurs raisons, par exemple, un lien invalide ou un fichier audio corrompu.
+
+## Contraintes
+* Vous devez utiliser Vue 3 pour réaliser cet exercice.
+* Vous ne pouvez pas utiliser de librairie tierce.
+* Évitez d'utiliser l'attribut `controls` de l'élément `audio`.
+
+# Compte rendu
+Le compte rendu doit être fourni en complétant le fichier [`Rapport.md`](Rapport.md) et doit indiquer les noms et prénoms des membres du binôme.
+Il doit, d'une manière brève, décrire et justifier les choix de conception et de réalisation.
+Il doit aussi décrire les difficultés rencontrées et les solutions apportées. 
+
+Les extensions réalisées doivent être mentionnées, d'une manière claire, dans le compte rendu.
+
+## Extensions
+Une fois que toutes les fonctionnalités ci-dessus sont réalisées avec succès, les fonctionnalités supplémentaires suivantes peuvent être réalisées afin d'obtenir des points de bonus.
+L'application présente sur [ce lien](https://polytechlyon.github.io/3a-isi1-24-25-tp-jukebox-extensions-example/) donne un exemple de la réalisation de ces extensions. 
+
+Les points de bonus peuvent être rapportés à la note finale du module ISI 1. 
+Cependant, la note finale ne peut pas dépasser 20/20. 
+
+### Sauvegarde des titres publics
+Les titres ajoutés par lien public sont sauvegardés entre rafraichissements de page. 
+Les titres ajoutés par fichier ne sont pas sauvegardés.
+
+### Organisation de plusieurs listes de lecture
+L'utilisateur peut créer plusieurs listes de lecture.
+Chaque liste aura son propre nom.
+Pour visualiser et organiser les listes de lecture, l'utilisateur doit naviguer vers la vue de gestion des listes, accessible par un lien dédié.
+Cette vue affiche la liste des noms des listes de lecture, ainis que le nombre de titres dans chaque liste.
+Chaque item, correspondant à une liste de lecture, est accompagné d'un bouton de suppression, et d'un bouton de sélection.
+La liste actuellement sélectionnée ne peut pas être supprimée.
+
+En sélectionnant une liste, l'utilisateur est redirigé vers la vue principale de l'application, mais avec la liste sélectionnée chargée.
+
+Un formulaire permet de créer une nouvelle liste de lecture.
+
+Cette extension nécessite l'utilisation de l'API de navigation de Vue Router.
+
+## Références
+* [Vue 3](https://vuejs.org/)
+* [Méthode statique `createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static)
+* [Élément d'audio embarqué](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
+* [Vue Router](https://router.vuejs.org/) (pour l'extension de plusieurs listes de lecture)
+
+
+
+
+
+
+

README.md

@@ -1,118 +1,29 @@
-# Boîte musicale
+# playlist
 
-Dans cet exercice, vous devez créer une application web pour gérer une liste de lecture des titres musicaux (playlist).
+This template should help get you started developing with Vue 3 in Vite.
 
-## Modalité
-* Vous devez réaliser l'exercice en binôme.
-* Cet exercice est noté, le rendu doit être envoyé sur GitHub Classroom.
-* Le compte rendu est obligatoire, et doit impérativement indiquer les noms et prénoms de binôme.
+## Recommended IDE Setup
 
-## Consignes
-Vous devrez créer une application de gestion de liste de lecture musicale à l’exemple de l'application présent sur [ce lien](https://polytechlyon.github.io/3a-isi1-24-25-tp-jukebox-example/).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-Vous devez utiliser le framework Vue 3 pour réaliser cet exercice, sans aucune libraire tierce.
-
-## Fonctionnalités
-Il s'agit d'une application mono-page.
-L'interface utilisateur comporte trois parties :
-* Un contrôleur pour arrêter et reprendre le lecteur audio.
-* Une liste de lecture.
-* Un formulaire pour ajouter un titre à la liste.
-
-Par simplicité, la liste ne sera pas sauvegardée entre les rechargements de la page.
-
-### Interface utilisateur
-#### Contrôleur
-Lorsqu'il y a un titre en cours de lecture, le contrôleur affiche l'intitulé de ce titre, ainis qu'une barre indiquant le progrès de la lecture.
-Un bouton permet de mettre en pause ou de reprendre le titre, selon l'état de lecture.
-
-L'utilisateur peut choisir le mode de répétition grâce à un contrôle adequate.
-Les modes de répétition disponibles sont Liste, Titre, ou Aucun.
-
-#### Liste de lecture
-La liste de lecture affiche les intitulés des titres ajoutés par l'utilisateur.
-Chaque item est accompagné de deux boutons : un pour jouer le titre, et un pour le supprimer.
-
-L'intitulé du titre en cours de lecture est mis en évidence, par exemple avec un texte en gras.
-
-Les titres qui ne fonctionnent pas, par exemple, à cause d'un lien défectueux, auront le bouton de lecture grisé.
-Leurs items seront marqués, par exemple par un texte barré. 
-
-#### Formulaire d'ajout
-Ce formulaire permet d'ajouter un titre à la liste de lecture.
-Deux types d'ajout sont possibles : soit par lien, soit par fichier.
-
-L'utilisateur précise le mode d'ajout souhaité grâce à un contrôle adéquat.
-
-Pour un ajout par lien, l'utilisateur doit saisir l'URL d'un fichier audio accessible en ligne.
-Le formulaire d'ajout ne vérifie pas la validité du lien.
-L'intitulé du titre est être déduit automatiquement du lien.
-
-Pour un ajout par fichier, l'utilisateur doit sélectionner un fichier audio depuis son système de fichiers.
-Le formulaire d'ajout ne vérifie pas le format de fichier.
-L'intitulé du titre est déduit automatiquement du nom de fichier.
-
-Au lieu de la déduction automatique de l'intitulé, vous pouvez, selon votre choix, fournir un champ de saisi dédié à cette fin.
-
-### Lecture
-Lorsque le mode de répétition Liste est choisi (le mode par défaut), le lecteur joue les titres de la liste dans l'ordre.
-Quand la liste est terminée, la lecture reprend de début de la liste.
-Si le mode de répétition Aucun est choisi, le lecteur joue les titres dans l'ordre aussi.
-Par contre, quand la liste est terminée, la lecture s'arrête.
-Si le mode de répétition Titre est choisi, le lecteur joue le titre en cours de lecture en boucle.
-
-Lorsque l'utilisateur clique sur la barre du progrès, la lecture saute à la position correspondante.
-
-Lorsqu'un titre défectueux est détecté, il est marqué comme tel.
-Le lecteur passe automatiquement au titre suivant à chaque fois qu'un titre défectueux est rencontré.
-Un titre peut être défectueux pour plusieurs raisons, par exemple, un lien invalide ou un fichier audio corrompu.
-
-## Contraintes
-* Vous devez utiliser Vue 3 pour réaliser cet exercice.
-* Vous ne pouvez pas utiliser de librairie tierce.
-* Évitez d'utiliser l'attribut `controls` de l'élément `audio`.
-
-# Compte rendu
-Le compte rendu doit être fourni en complétant le fichier [`Rapport.md`](Rapport.md) et doit indiquer les noms et prénoms des membres du binôme.
-Il doit, d'une manière brève, décrire et justifier les choix de conception et de réalisation.
-Il doit aussi décrire les difficultés rencontrées et les solutions apportées. 
-
-Les extensions réalisées doivent être mentionnées, d'une manière claire, dans le compte rendu.
-
-## Extensions
-Une fois que toutes les fonctionnalités ci-dessus sont réalisées avec succès, les fonctionnalités supplémentaires suivantes peuvent être réalisées afin d'obtenir des points de bonus.
-L'application présente sur [ce lien](https://polytechlyon.github.io/3a-isi1-24-25-tp-jukebox-extensions-example/) donne un exemple de la réalisation de ces extensions. 
-
-Les points de bonus peuvent être rapportés à la note finale du module ISI 1. 
-Cependant, la note finale ne peut pas dépasser 20/20. 
-
-### Sauvegarde des titres publics
-Les titres ajoutés par lien public sont sauvegardés entre rafraichissements de page. 
-Les titres ajoutés par fichier ne sont pas sauvegardés.
-
-### Organisation de plusieurs listes de lecture
-L'utilisateur peut créer plusieurs listes de lecture.
-Chaque liste aura son propre nom.
-Pour visualiser et organiser les listes de lecture, l'utilisateur doit naviguer vers la vue de gestion des listes, accessible par un lien dédié.
-Cette vue affiche la liste des noms des listes de lecture, ainis que le nombre de titres dans chaque liste.
-Chaque item, correspondant à une liste de lecture, est accompagné d'un bouton de suppression, et d'un bouton de sélection.
-La liste actuellement sélectionnée ne peut pas être supprimée.
-
-En sélectionnant une liste, l'utilisateur est redirigé vers la vue principale de l'application, mais avec la liste sélectionnée chargée.
-
-Un formulaire permet de créer une nouvelle liste de lecture.
-
-Cette extension nécessite l'utilisation de l'API de navigation de Vue Router.
-
-## Références
-* [Vue 3](https://vuejs.org/)
-* [Méthode statique `createObjectURL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static)
-* [Élément d'audio embarqué](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio)
-* [Vue Router](https://router.vuejs.org/) (pour l'extension de plusieurs listes de lecture)
+## Customize configuration
 
+See [Vite Configuration Reference](https://vite.dev/config/).
 
+## Project Setup
 
+```sh
+npm install
+```
 
+### Compile and Hot-Reload for Development
 
+```sh
+npm run dev
+```
 
+### Compile and Minify for Production
 
+```sh
+npm run build
+```

Rapport.md

@@ -1,11 +1,20 @@
 # Compte Rendu TP Jukebox
 
 ## Binôme
-- Nom Prénom
-- Nom Prénom
+- Coutant Luka
+- Grenier Lilas
 
 ## Choix de conception et de réalisation
+Les consignes du projet sont dans le fichier [Consignes](Consignes.md).  
+
+[index.html](index.html) se trouve à la racine, et le code source du projet se trouve dans le dossier dossier [src](src). A la racine de [src](src) se trouvent les fichiers [App.vue](src/App.vue) et [main.js](src/main.js), et les sous-dossiers [composables](src/composables) (contenant [gestionPlaylist.js](src/composables/gestionPlaylist.js) modèles des fonctions communes aux components) et [components](src/components). Ce dernier contient [Player.vue](src/components/Player.vue), [Playlist.vue](src/components/Playlist.vue) et [AddTrack.vue](src/components/AddTrack.vue), créées selon le modèle script-template-style de Vue, correspondant aux différents éléments de la page.  
+
+La documentation des fichiers se trouvent dans tous les fichiers .js et les balises script.
 
 ## Difficultés rencontrées (optionnel)
+L'avantage de Vue et de centraliser le code en fonction de son utilisation - ainsi, une seule page contient le modèle (entre les bornes script), la contenu de la page (entre les bornes template) et le style (entre les bornes style) - mais cela devient plus compliqué de travailler à plusieurs sur une petite application : merge conflicts, empiètement sur le travail l'un de l'autre...  
+
+Une autre difficulté a été la vérification de l'état des fichiers. Plusieurs tentatives n'ont pas donné de résultats et ont dues être reprises de zéro avant la version actuelle.
 
-## Extensions réalisées (optionnel)
+## Extensions réalisées (optionnel)
+La playlist est enregistrée dans le local storage, et est donc conservée entre les chargements de la page.

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="https://img.icons8.com/?size=100&id=tDBw8g7GJ85x&format=png">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JukeBox</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}