Première version de vCarousel

1 year ago · 01c3750ba0
12 changed files with 5669 additions and 0 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "vCarousel",
+  "version": "0.1.0",
+  "description": "Video carousel, a new video appears when the previous one finishes playing.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "webpack-dev-server"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://forge.chapril.org/Fab_Blab/vCarousel"
+  },
+  "keywords": [
+    "carousel",
+    "video"
+  ],
+  "author": "Fabrice PENHOËT",
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "ts-loader": "^8.1.0",
+    "typescript": "^4.2.3",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
--- a/public/JS/example.app.js
+++ b/public/JS/example.app.js
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>vCarrousel (démo)</title>
+    <script src="JS/example.app.js" defer></script>
+</head>
+<body>
+	<h1 id="title">vCarrousel</h1>
+    <p>Les vidéos qui défilent</p>
+	<figure id="vFunanbule">
+		<video poster="" controls="controls" width="500">
+            <source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
+        </video>
+		<figcaption>Un clown funanbule !</figcaption>
+	</figure>
+	<figure id="vForgeron">
+		<video poster="" controls="controls" width="500">
+            <source src="videos/Lizio-Poete-Ferrailleur-forgeron.m4v" type="video/mp4"></source>
+        </video>
+		<figcaption>Il faut forger pour devenir forgeron !</figcaption>
+	</figure>
+	<figure id="vCircuit">
+		<video poster="" controls="controls" width="500">
+            <source src="videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v" type="video/mp4"></source>
+        </video>
+		<figcaption>Drôle de circuit !</figcaption>
+	</figure>
+</body>
+</html>
--- a/public/videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v
+++ b/public/videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v
--- a/public/videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v
+++ b/public/videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v
--- a/public/videos/Lizio-Poete-Ferrailleur-forgeron.m4v
+++ b/public/videos/Lizio-Poete-Ferrailleur-forgeron.m4v
--- a/src/example.ts
+++ b/src/example.ts
@ -0,0 +1,16 @@
+/// Exemple d'utilisation de vCarousel avec 3 vidéos
+import { vCarousel } from "./vCarousel.ts";
+
+// Fournir ici la liste de contenants (div, figure...) des vidéos à faire défiler
+// L'ordre est celui de défilement et peut être différent de celui de la page HTML
+// La même vidéo peut même être listé plusieurs fois...
+// La première entrée correspondant à la vidéo affichée au premier chargement de la page
+const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
+try
+{
+    vCarousel(videosContainers);
+}
+catch(e)
+{
+    console.error(e);
+}
--- a/src/vCarousel.js
+++ b/src/vCarousel.js
@ -0,0 +1,45 @@
+"use strict";
+/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
+/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel
+exports.__esModule = true;
+exports.vCarousel = void 0;
+exports.vCarousel = function (vContainers) {
+    // On commence par vérifier que les ids de conteneurs fournis sont correctes
+    var realVContainers = [];
+    for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) {
+        var container = vContainers_1[_i];
+        var checkContainerExist = document.getElementById(container);
+        if (checkContainerExist === null) // utiliser fonctionner empty() de wikilerni ?
+            console.error("Aucun élément HTML trouvé dans la page pour l'id " + container);
+        else {
+            var checkVideoExist = document.querySelector("#" + container + " video"); // tester avec + plusieurs vidéos dans le conteneur
+            if (checkVideoExist === null)
+                console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + container);
+            else
+                realVContainers.push({ idContainer: container, containerElt: checkContainerExist, videoElt: checkVideoExist });
+        }
+    }
+    var nbContainers = realVContainers.length;
+    if (nbContainers < 2)
+        console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
+    else {
+        var _loop_1 = function (i) {
+            var container = realVContainers[i].containerElt;
+            var video = realVContainers[i].videoElt;
+            if (i !== 0)
+                container.style.display = "none";
+            video.addEventListener("ended", function () {
+                container.style.display = "none";
+                var nextContainer;
+                if (i < (nbContainers - 1))
+                    nextContainer = realVContainers[i + 1].containerElt;
+                else
+                    nextContainer = realVContainers[0].containerElt;
+                nextContainer.style.display = "block";
+            });
+        };
+        for (var i = 0; i < nbContainers; i++) {
+            _loop_1(i);
+        }
+    }
+};
--- a/src/vCarousel.ts
+++ b/src/vCarousel.ts
@ -0,0 +1,51 @@
+/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
+/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel
+
+export const vCarousel = (vContainers:string[]) : void =>
+{
+    interface videoDOM
+    {
+        containerElt: HTMLElement;
+        videoElt: HTMLMediaElement;
+    }
+
+    // On commence par vérifier que les ids de conteneurs fournis sont correctes
+    const realVContainers : videoDOM[] = [];
+    for(let container of vContainers)
+    {
+        let checkContainerExist=document.getElementById(container);
+        if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ?
+            console.error("Aucun élément HTML trouvé dans la page pour l'id "+container);
+        else
+        {
+            let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+container+" video");// tester avec + plusieurs vidéos dans le conteneur
+            if(checkVideoExist===null)
+                console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+container);
+            else
+                realVContainers.push({containerElt:checkContainerExist, videoElt: checkVideoExist});
+        }
+    }
+    let nbContainers=realVContainers.length;
+    if(nbContainers < 2)
+        console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
+    else
+    {
+        for (let i = 0; i < nbContainers; i++)
+        {
+            let container=realVContainers[i].containerElt;
+            let video=realVContainers[i].videoElt;
+            if(i!==0)
+                container.style.display = "none";
+            video.addEventListener("ended", function()
+            {
+                container.style.display = "none";
+                let nextContainer: HTMLElement;
+                if(i < (nbContainers-1))
+                    nextContainer=realVContainers[i+1].containerElt;
+                else
+                    nextContainer=realVContainers[0].containerElt;
+                nextContainer.style.display = "block";
+            });
+        }
+    }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "outDir": "./public/JS",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5", // compilation en JS compatible ES5
+    "jsx": "react",
+    "allowJs": true
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports =
+{
+  mode: "development",
+  devtool: "inline-source-map",
+  entry:
+  {
+    example: "./src/example.ts"
+  },
+  output:
+  {
+    filename: "./JS/[name].app.js",
+    path: path.resolve(__dirname, "public")
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },  
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devServer: {
+    contentBase: path.join(__dirname, "public")
+  },  
+};