diff --git a/package-lock.json b/package-lock.json
index 5336349..9cb965e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@mdi/font": "^7.1.96",
         "@mdi/js": "^7.2.96",
         "@tweenjs/tween.js": "^19.0.0",
+        "@videojs-player/vue": "^1.0.0",
         "fabric": "^6.0.0-beta7",
         "granim": "^2.0.0",
         "matter-attractors": "^0.1.6",
@@ -21,8 +22,10 @@
         "paper": "^0.12.17",
         "pinia": "^2.0.21",
         "poly-decomp": "^0.3.0",
+        "videojs-youtube": "^3.0.1",
         "vue": "^3.2.38",
-        "vue-router": "^4.1.5"
+        "vue-router": "^4.1.5",
+        "vue-slider-component": "^4.1.0-beta.7"
       },
       "devDependencies": {
         "@rollup/plugin-graphql": "^2.0.0",
@@ -53,6 +56,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -338,6 +352,68 @@
       "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
       "dev": true
     },
+    "node_modules/@types/video.js": {
+      "version": "7.3.52",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.52.tgz",
+      "integrity": "sha512-WFj/HkNVCfkchXDeDU0QbimC356FB5vva3g5mgsjk8n3UMKqP9S522rQAmu9LGPiCmShZRPuAlkXmbp5WId6ow==",
+      "peer": true
+    },
+    "node_modules/@videojs-player/vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/vue/-/vue-1.0.0.tgz",
+      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==",
+      "peerDependencies": {
+        "@types/video.js": "7.x",
+        "video.js": "7.x",
+        "vue": "3.x"
+      }
+    },
+    "node_modules/@videojs/http-streaming": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.2.tgz",
+      "integrity": "sha512-etPTUdCFu7gUWc+1XcbiPr+lrhOcBu3rV5OL1M+3PDW89zskScAkkcdqYzP4pFodBPye/ydamQoTDScOnElw5A==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.5",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "^0.22.1",
+        "mux.js": "6.0.1",
+        "video.js": "^6 || ^7"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^6 || ^7"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -472,6 +548,14 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.8.tgz",
+      "integrity": "sha512-0LNz4EY8B/8xXY86wMrQ4tz6zEHZv9ehFMJPm8u2gq5lQ71cfRKdaKyxfJAx5aUoyzx0qzgURblTisPGgz3d+Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -524,6 +608,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -1056,6 +1151,11 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -2058,6 +2158,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -2226,6 +2335,11 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2284,6 +2398,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -2395,6 +2514,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2447,6 +2571,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
+      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
@@ -2553,6 +2687,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2611,12 +2753,42 @@
         "node": ">=10"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
+      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "devOptional": true
     },
+    "node_modules/mux.js": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/nan": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
@@ -2939,6 +3111,17 @@
         }
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/poly-decomp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -3023,6 +3206,14 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3105,6 +3296,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -3200,6 +3396,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3220,6 +3424,14 @@
       ],
       "optional": true
     },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -3572,12 +3784,61 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "devOptional": true
     },
+    "node_modules/video.js": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.4.tgz",
+      "integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.16.2",
+        "@videojs/vhs-utils": "^3.0.4",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "0.22.1",
+        "mux.js": "6.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.4"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
+      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
+    "node_modules/videojs-youtube": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/videojs-youtube/-/videojs-youtube-3.0.1.tgz",
+      "integrity": "sha512-0gKgag7Zno/dDwIdk+h48ODKDulR4IW62RxGE81PrMwi0OX/wUcKO6m1j+DFYI+7qjtWMZTKnbtQoHGxvUrFQg==",
+      "dependencies": {
+        "video.js": "5.x || 6.x || 7.x || 8.x"
+      },
+      "peerDependencies": {
+        "video.js": "5.x || 6.x || 7.x || 8.x"
+      }
+    },
     "node_modules/vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -3708,6 +3969,11 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-slider-component": {
+      "version": "4.1.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -3863,6 +4129,14 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
       "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q=="
     },
+    "@babel/runtime": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
     "@csstools/normalize.css": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.0.0.tgz",
@@ -4061,6 +4335,53 @@
       "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
       "dev": true
     },
+    "@types/video.js": {
+      "version": "7.3.52",
+      "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.52.tgz",
+      "integrity": "sha512-WFj/HkNVCfkchXDeDU0QbimC356FB5vva3g5mgsjk8n3UMKqP9S522rQAmu9LGPiCmShZRPuAlkXmbp5WId6ow==",
+      "peer": true
+    },
+    "@videojs-player/vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs-player/vue/-/vue-1.0.0.tgz",
+      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==",
+      "requires": {}
+    },
+    "@videojs/http-streaming": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.2.tgz",
+      "integrity": "sha512-etPTUdCFu7gUWc+1XcbiPr+lrhOcBu3rV5OL1M+3PDW89zskScAkkcdqYzP4pFodBPye/ydamQoTDScOnElw5A==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "3.0.5",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "^0.22.1",
+        "mux.js": "6.0.1",
+        "video.js": "^6 || ^7"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "@vitejs/plugin-vue": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
@@ -4182,6 +4503,11 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
       "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.8.tgz",
+      "integrity": "sha512-0LNz4EY8B/8xXY86wMrQ4tz6zEHZv9ehFMJPm8u2gq5lQ71cfRKdaKyxfJAx5aUoyzx0qzgURblTisPGgz3d+Q=="
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -4223,6 +4549,17 @@
       "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
       "optional": true
     },
+    "aes-decrypter": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
+      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -4633,6 +4970,11 @@
         "entities": "^4.2.0"
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -5268,6 +5610,15 @@
         "is-glob": "^4.0.3"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "globals": {
       "version": "13.20.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -5391,6 +5742,11 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5437,6 +5793,11 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "optional": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5525,6 +5886,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5565,6 +5931,16 @@
         "yallist": "^4.0.0"
       }
     },
+    "m3u8-parser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
+      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
     "magic-string": {
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
@@ -5643,6 +6019,14 @@
       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
       "optional": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5685,12 +6069,32 @@
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "optional": true
     },
+    "mpd-parser": {
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
+      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "devOptional": true
     },
+    "mux.js": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
+      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      }
+    },
     "nan": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
@@ -5905,6 +6309,14 @@
         }
       }
     },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "poly-decomp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/poly-decomp/-/poly-decomp-0.3.0.tgz",
@@ -5951,6 +6363,11 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6007,6 +6424,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -6063,12 +6485,28 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "optional": true
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -6325,12 +6763,58 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "devOptional": true
     },
+    "video.js": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.4.tgz",
+      "integrity": "sha512-R5e57M/5uqxQMQpFpybNbd8GtiRwFJPqkHjrhv0QTJ2tqnesbjETbck5kU5dhFr1FevsJRFhjBG4hAnvRGnXbw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "2.16.2",
+        "@videojs/vhs-utils": "^3.0.4",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "3.1.3",
+        "global": "^4.4.0",
+        "keycode": "^2.2.0",
+        "m3u8-parser": "4.8.0",
+        "mpd-parser": "0.22.1",
+        "mux.js": "6.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.4"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.4",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
+      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
+    "videojs-youtube": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/videojs-youtube/-/videojs-youtube-3.0.1.tgz",
+      "integrity": "sha512-0gKgag7Zno/dDwIdk+h48ODKDulR4IW62RxGE81PrMwi0OX/wUcKO6m1j+DFYI+7qjtWMZTKnbtQoHGxvUrFQg==",
+      "requires": {
+        "video.js": "5.x || 6.x || 7.x || 8.x"
+      }
+    },
     "vite": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
@@ -6410,6 +6894,11 @@
         "@vue/devtools-api": "^6.5.0"
       }
     },
+    "vue-slider-component": {
+      "version": "4.1.0-beta.7",
+      "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz",
+      "integrity": "sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA=="
+    },
     "w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
diff --git a/package.json b/package.json
index 1c3d7da..e035357 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@mdi/font": "^7.1.96",
     "@mdi/js": "^7.2.96",
     "@tweenjs/tween.js": "^19.0.0",
+    "@videojs-player/vue": "^1.0.0",
     "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",
     "matter-attractors": "^0.1.6",
@@ -21,8 +22,10 @@
     "paper": "^0.12.17",
     "pinia": "^2.0.21",
     "poly-decomp": "^0.3.0",
+    "videojs-youtube": "^3.0.1",
     "vue": "^3.2.38",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.5",
+    "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
     "@rollup/plugin-graphql": "^2.0.0",
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 20e715c..2a1dbda 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -96,19 +96,23 @@ body{
       padding: 1rem 1rem 1rem;
       overflow-y: auto;
       overflow-x: hidden;
-      header, section{
-        padding:0 0 2em 0;
+      //
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      >header{
+        flex: 0 0 auto;
       }
-      label{
-        display: block;
-        font-weight: 100;
-        font-size: 0.882em;
-        padding: 0 0 1em 0;
+      >main{
+        // flex: 1 0 auto;
+        padding: 1em 0;
       }
-
-      ul, li{
-        padding:0; margin:0;
-        list-style: none;
+      >footer{
+        flex: 0 0 auto;
+      }
+      
+      >header{
+        flex: 0 0 auto;
       }
 
       >header{
@@ -138,7 +142,7 @@ body{
             padding: 1em 0 1em 0;
           }
         }
-        div.concernement-cartouche{
+        div.concernement-cartouche-icons{
           h2{
             font-weight: 400;
             font-size: 1.323em;
@@ -169,6 +173,37 @@ body{
         }
         
       }
+      
+      >main{
+        overflow-y: auto;
+        
+        >section:not(:last-of-type),
+        .multiple >section:not(:last-of-type){
+          padding-bottom: 1em;
+        }
+        figure{
+          margin:0.5em 0;
+          img{
+            max-width: 100%;
+          }
+        }
+
+      }
+      >footer{
+        section.infos{
+          >p{
+            font-size: 0.882em;
+            font-weight: 100;
+              
+            >span{
+              >span{
+                font-weight: 100;
+              }
+            }
+          }
+        }
+      }
+      
       h3{
         font-weight: 400;
         font-size: 1.2em;
@@ -185,46 +220,15 @@ body{
         font-size: 1em;
         font-weight: 300;
       }
-
-      section.content-concernement{
-        section.infos{
-          >p{
-            font-size: 0.882em;
-            font-weight: 100;
-              
-            >span{
-              >span{
-                font-weight: 100;
-              }
-            }
-            span.author{
-              span{
-              
-              }
-            }
-            span.structure{
-              span{
-  
-              }
-            }
-            span.lieu{
-              span{
-  
-              }
-            }
-            span.created{
-              span{
-  
-              }
-            }
-            span.changed{
-              span{
-  
-              }
-            }
-
-          }
-        }
+      label{
+        display: block;
+        font-weight: 100;
+        font-size: 0.882em;
+        padding: 0 0 1em 0;
+      }
+      ul, li{
+        padding:0; margin:0;
+        list-style: none;
       }
 
       // PUISSANCE D'AGIR
diff --git a/src/components/contents/TerrainDeVie.vue b/src/components/contents/TerrainDeVie.vue
index 7d6dacc..ad3b9b6 100644
--- a/src/components/contents/TerrainDeVie.vue
+++ b/src/components/contents/TerrainDeVie.vue
@@ -3,13 +3,27 @@
 import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
-import { CommonStore } from '@/stores/common'
+// import { CommonStore } from '@/stores/common'
+
+import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
+
+import { VideoPlayer } from '@videojs-player/vue'
+import 'videojs-youtube'
+import 'video.js/dist/video-js.css'
+
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/antd.css'
 
 export default {
   props: ['id', 'eid', 'entite'],
   data(){
     return {
-
+      history_value: 0,
+      history_slider_ops: {
+        dotSize:10,
+        min: 0,
+        max: 100,
+      }
     }
   },
   computed: {
@@ -26,49 +40,119 @@ export default {
       let d = new Date(this.opened_concernement.changed); 
       console.log('d', d);
       return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
+    },
+    display_concernement(){
+      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
     }
   },
   created () {
     console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
+  },
+  components: {
+    CartoucheLayout,
+    VideoPlayer,
+    VueSlider
   }
 }
 
 </script>
 
 <template>
-  <!-- concernement -->
-  <section
-    v-if="!entite"
-    class="content-concernement">
-    <section class="description">
-        <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
-        <div v-html="opened_concernement.description"/>
-    </section>
-    <section class="caillou">
-        <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
-        <div v-html="opened_concernement.caillou "/>
-    </section>
-    <section class="infos">
-      <p>
-        <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}</span><br/>
-        <span class="structure" v-if="opened_concernement.author.structure"><span>avec</span> {{ opened_concernement.author.structure[0].name }}</span><br/>
-        <span class="lieu" v-if="opened_concernement.lieu"><span>à</span> {{ opened_concernement.lieu[0].name }}</span><br/>
-        <span class="created"><span>démarrée le</span> {{ created }}</span><br/>
-        <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
-      </p>
-    </section>
-  </section>
-  <!-- entite -->
-  <section
-    v-if="entite"
-    class="content-entite">
-    <section class="action">
-        <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
-        <div v-html="entite.action"/>
-    </section>
-    <section class="menace-maintien">
-        <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
-        <div v-html="entite.menacemaintien"/>
-    </section>
-  </section>
+  <CartoucheLayout>
+    <template v-slot:header>
+      <div class="pre-header">
+        <!-- concernement -->
+        <label v-if="display_concernement">{{ ct_concernement.title.description }}</label>
+        <!-- entite -->
+        <h3 v-if="entite">{{ entite.title }}</h3>
+        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
+        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
+      </div>
+      
+    </template>
+    
+    <template v-slot:main>
+      <!-- concernement -->
+      <template v-if="!entite">
+        <section v-if="opened_concernement.description" class="description">
+            <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
+            <div v-html="opened_concernement.description"/>
+        </section>
+        <section v-if="opened_concernement.caillou" class="caillou">
+            <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
+            <div v-html="opened_concernement.caillou"/>
+        </section>
+      </template>
+
+      <!-- entite -->
+      <template v-if="entite">
+        <section class="action">
+            <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
+            <div v-html="entite.action"/>
+        </section>
+        <section class="menace-maintien">
+            <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
+            <div v-html="entite.menacemaintien"/>
+        </section>
+        <section
+          v-if="entite.sources.length" 
+          class="sources multiple">
+          <section 
+            v-for="(source, index) in entite.sources"
+            :key="index"
+            class="source">
+            <section class="description">
+                <label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</label>
+                <div v-html="source.description"/>
+              </section>
+              <section
+                v-if="source.images.length" 
+                class="images">
+                <figure
+                  v-for="(image, j) in source.images"
+                  :key="j">
+                  <img :src="image.url" :alt="image.alt"/>
+                </figure>
+              </section>
+              <section
+                v-if="source.videos.length"
+                class="video multiple">
+                <!-- <a 
+                  v-for="(video,v) in source.videos"
+                  :key="v"
+                  :href="video.url">{{ video.url }}</a> -->
+                  <VideoPlayer
+                    v-for="(video,v) in source.videos"
+                    :key="v"
+                    type="video/youtube"
+                    :src="video.url"
+                    controls/>
+              </section>
+          </section>
+        </section>
+      </template>
+    </template>
+
+    <template v-slot:footer>
+      <section class="infos">
+        <p>
+          <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}<br/></span>
+          <span class="structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></span>
+          <span class="lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></span>
+          <span class="created"><span>démarrée le</span> {{ created }}<br/></span>
+          <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
+        </p>
+      </section>
+        
+      <!-- <section class="historique">
+        <label>Historique</label>
+        <vue-slider
+          ref="slider"
+          v-model="history_value"
+          v-bind="history_slider_ops"
+        ></vue-slider>
+      </section> -->
+    </template>
+  </CartoucheLayout> 
+  
 </template>
\ No newline at end of file
diff --git a/src/components/layout/CartoucheLayout.vue b/src/components/layout/CartoucheLayout.vue
new file mode 100644
index 0000000..7d6f935
--- /dev/null
+++ b/src/components/layout/CartoucheLayout.vue
@@ -0,0 +1,67 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiHeadphones } from '@mdi/js';
+
+export default {
+  props: ['id', 'eid', 'entite'],
+  data(){
+    return {
+      headphones_path: mdiHeadphones
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+  },
+  methods: {
+    ...mapActions(ConcernementsStore,['setMapMode'])
+  },
+  components: {
+    SvgIcon
+  }
+}
+</script>
+
+<template>
+  <header>
+    <slot name="header"></slot>
+    <div class="concernement-cartouche-icons">
+        <h2>{{ opened_concernement.title }}</h2>
+        <nav class="icons">
+          <ul>
+            <li v-if="opened_concernement.has_recit" >
+              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+            </li>
+            <li>
+              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_puissancedagir" >
+              <a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_proximite" >
+              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_superposition" >
+              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_agissantes" >
+              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_doleance" >
+              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
+            </li>
+          </ul>
+        </nav>
+
+      </div>
+  </header>
+  <main>
+    <slot name="main"></slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</template>
\ No newline at end of file
diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue
index 519329e..0502bf8 100644
--- a/src/views/Concernement.vue
+++ b/src/views/Concernement.vue
@@ -10,8 +10,8 @@ import gql from 'graphql-tag'
 import GQL from '@api/graphql-axios'
 import EntiteFields from '@api/gql/entite.fragment.gql'
 
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiHeadphones } from '@mdi/js';
+// import SvgIcon from '@jamescoyle/vue-icon';
+// import { mdiHeadphones } from '@mdi/js';
 
 import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
 import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
@@ -22,8 +22,7 @@ export default {
   data(){
     return {
       entite: null,
-      opened_besoin_id: null,
-      headphones_path: mdiHeadphones
+      opened_besoin_id: null
     }
   },
   computed: {
@@ -39,10 +38,7 @@ export default {
     ...mapState(ConcernementsStore,['p_reception_et_traitement']),
     ...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
     ...mapState(ConcernementsStore,['p_reception_application_decision']),
-    ...mapState(CommonStore,['hover_elmt']),
-    display_concernement(){
-      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir'&& this.map_mode !== 'doleancer';
-    }
+    ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
     console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
@@ -112,7 +108,6 @@ export default {
     }
   },
   components: {
-    SvgIcon,
     TerrainDeVie,
     PuissanceAgir,
     Doleancer
@@ -123,50 +118,6 @@ export default {
 
 <template>
   <section v-if="opened_concernement" class="concernement">
-    <header v-if="concernements_loaded">
-      <div class="pre-header">
-        <!-- concernement -->
-        <label 
-        v-if="display_concernement"
-        >
-          {{ ct_concernement.title.description }}
-        </label>
-        <!-- entite -->
-        <h3 v-if="entite">{{ entite.title }}</h3>
-        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
-        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
-      </div>
-      <div class="concernement-cartouche">
-        <h2 :class='{ faded: !display_concernement}'>{{ opened_concernement.title }}</h2>
-        <nav class="icons">
-          <ul>
-            <li v-if="opened_concernement.has_recit" >
-              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
-            </li>
-            <li>
-              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
-            </li>
-            <li v-if="opened_concernement.has_puissancedagir" >
-              <a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
-            </li>
-            <li v-if="opened_concernement.has_proximite" >
-              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
-            </li>
-            <li v-if="opened_concernement.has_superposition" >
-              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
-            </li>
-            <li v-if="opened_concernement.has_agissantes" >
-              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
-            </li>
-            <li v-if="opened_concernement.has_doleance" >
-              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
-            </li>
-          </ul>
-        </nav>
-
-      </div>
-    </header>
-    <!-- body -->
     <TerrainDeVie v-if="map_mode === 'terraindevie'" :id="id" :eid="eid" :entite="entite"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
     <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>