diff --git a/.lighthouserc.json b/.lighthouserc.json index 7667c961ca..ea0511037f 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -4,8 +4,13 @@ "staticDistDir": "./public", "url": [ "http://localhost/", + "http://localhost/design-system/", + "http://localhost/design-system/componenti/accordion/", + "http://localhost/design-system/fondamenti/colori/", "http://localhost/community/", - "http://localhost/normativa/linee-guida-di-design/" + "http://localhost/community/media/", + "http://localhost/community/media/20241217-community-lab/", + "http://localhost/progetto/piano-attivita/" ] } } diff --git a/package-lock.json b/package-lock.json index 89fdf65e59..2041a637c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "BSD-3-Clause", "dependencies": { "@colliercz/gatsby-transformer-gitinfo": "github:CollierCZ/gatsby-transformer-gitinfo", - "@loadable/component": "^5.15.2", + "@loadable/component": "^5.16.4", "adm-zip": "^0.5.10", "babel-preset-gatsby": "^3.9.0", "bootstrap-italia": "^2.13.2", @@ -3426,11 +3426,11 @@ ] }, "node_modules/@loadable/component": { - "version": "5.16.3", - "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.16.3.tgz", - "integrity": "sha512-2mVvHs2988oVX2/zM0y6nYhJ4rTVHhkhRnpupBA0Rjl5tS8op9uSR4u5SLVfMLxzpspr2UiIBQD+wEuMsuq4Dg==", + "version": "5.16.4", + "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.16.4.tgz", + "integrity": "sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ==", "dependencies": { - "@babel/runtime": "^7.7.7", + "@babel/runtime": "^7.12.18", "hoist-non-react-statics": "^3.3.1", "react-is": "^16.12.0" }, diff --git a/package.json b/package.json index 6c6e5acd04..78d1138cee 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ }, "dependencies": { "@colliercz/gatsby-transformer-gitinfo": "github:CollierCZ/gatsby-transformer-gitinfo", - "@loadable/component": "^5.15.2", + "@loadable/component": "^5.16.4", "adm-zip": "^0.5.10", "babel-preset-gatsby": "^3.9.0", "bootstrap-italia": "^2.13.2", diff --git a/src/components/media-player/loadable-media-player.js b/src/components/media-player/loadable-media-player.js new file mode 100644 index 0000000000..be8bc68242 --- /dev/null +++ b/src/components/media-player/loadable-media-player.js @@ -0,0 +1,169 @@ +import React, { useEffect } from "react"; +import { VideoPlayer, AcceptOverlay } from "bootstrap-italia"; +import parse from "html-react-parser"; +import ReactMarkdown from "react-markdown"; +import uniqueId from "lodash/uniqueId"; + +// TODO +// - [future] modular approach for local videos/youtubes/... +// - [future] download thumbnail during build - eg. url: http://i3.ytimg.com/vi/_0j7ZQ67KtY/hqdefault.jpg + +function MediaPlayerEl({ + url, + lang, + subtitles, + trascription, + trascriptionLabel, + trascriptionLabelEN, + trascriptionHeadingLevel, + poster, +}) { + const messages = { + it: { + rememberLabel: "Ricorda per tutti i video", + acceptLabel: "Accetta", + trascriptionLabel: "Trascrizione", + cookiePolicy: + 'Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy. ', + }, + en: { + rememberLabel: "Remember my choice", + acceptLabel: "Accept", + trascriptionLabel: "Transcription", + cookiePolicy: + 'You have to accept YouTube cookies to enable viewing of this video. You can manage the preferences via cookie policy (italian language).', + }, + }; + + // trascription label + if (trascriptionLabel) messages.it.trascriptionLabel = trascriptionLabel; + if (trascriptionLabelEN) messages.en.trascriptionLabel = trascriptionLabelEN; + + let video = null; + const t = (key) => messages[lang][key]; + + const videoId = `video-js-${uniqueId("id_")}`; + + // trascription heading level + let HLevel; + if (trascriptionHeadingLevel) { + HLevel = `h${trascriptionHeadingLevel}`; + } else { + HLevel = `h2`; + } + + useEffect(() => { + // eslint-disable-next-line no-new + new AcceptOverlay(document.getElementById(`${videoId}-accept-video`), { + service: "youtube.com", + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + video = new VideoPlayer(document.getElementById(videoId)); + const ButtonComp = videojs.getComponent("Button"); + const privacyPolicyButton = new ButtonComp(video.player, { + clickHandler() { + window.location.replace("/privacy-policy/#gestione-cookie"); + }, + }); + video.player.controlBar.addChild(privacyPolicyButton, {}, 1); + privacyPolicyButton.el_.innerHTML = + ''; + video.player.controlBar.removeChild("SkipBackward"); + video.player.controlBar.removeChild("SkipForward"); + if (subtitles) + video.player.addRemoteTextTrack({ + kind: "subtitles", + label: "Italiano", + srclang: "it", + default: true, + src: subtitles, + }); + if (JSON.parse(localStorage.getItem("bs-ck3") || "{}")["youtube.com"]) { + setTimeout(() => { + video.setYouTubeVideo(url); + }, 1000); + } + }); + + return ( +
+
+
+
+
+ + + +
+

{parse(t("cookiePolicy"))}

+
+ +
+ + +
+
+
+
+
+
+
+
+
+ + + + {trascription && ( +
+
+ {trascription} +
+
+ )} +
+
+
+ ); +} + +export default MediaPlayerEl; diff --git a/src/components/media-player/media-player.js b/src/components/media-player/media-player.js index 08aa4df34b..46bf81bbcb 100644 --- a/src/components/media-player/media-player.js +++ b/src/components/media-player/media-player.js @@ -1,170 +1,5 @@ -import React, { useEffect } from "react"; -import uniqueId from "lodash/uniqueId"; +import Loadable from "@loadable/component"; -import { VideoPlayer, AcceptOverlay } from "bootstrap-italia"; -import parse from "html-react-parser"; -import ReactMarkdown from "react-markdown"; +const LoadableMediaPlayer = Loadable(() => import("./loadable-media-player")); -// TODO -// - [future] modular approach for local videos/youtubes/... -// - [future] download thumbnail during build - eg. url: http://i3.ytimg.com/vi/_0j7ZQ67KtY/hqdefault.jpg - -function MediaPlayerEl({ - url, - lang, - subtitles, - trascription, - trascriptionLabel, - trascriptionLabelEN, - trascriptionHeadingLevel, - poster, -}) { - const messages = { - it: { - rememberLabel: "Ricorda per tutti i video", - acceptLabel: "Accetta", - trascriptionLabel: "Trascrizione", - cookiePolicy: - 'Accetta i cookie di YouTube per vedere il video. Puoi gestire le preferenze nella cookie policy. ', - }, - en: { - rememberLabel: "Remember my choice", - acceptLabel: "Accept", - trascriptionLabel: "Transcription", - cookiePolicy: - 'You have to accept YouTube cookies to enable viewing of this video. You can manage the preferences via cookie policy (italian language).', - }, - }; - - // trascription label - if (trascriptionLabel) messages.it.trascriptionLabel = trascriptionLabel; - if (trascriptionLabelEN) messages.en.trascriptionLabel = trascriptionLabelEN; - - let video = null; - const t = (key) => messages[lang][key]; - - const videoId = `video-js-${uniqueId("id_")}`; - - // trascription heading level - let HLevel; - if (trascriptionHeadingLevel) { - HLevel = `h${trascriptionHeadingLevel}`; - } else { - HLevel = `h2`; - } - - useEffect(() => { - // eslint-disable-next-line no-new - new AcceptOverlay(document.getElementById(`${videoId}-accept-video`), { - service: "youtube.com", - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - video = new VideoPlayer(document.getElementById(videoId)); - const ButtonComp = videojs.getComponent("Button"); - const privacyPolicyButton = new ButtonComp(video.player, { - clickHandler() { - window.location.replace("/privacy-policy/#gestione-cookie"); - }, - }); - video.player.controlBar.addChild(privacyPolicyButton, {}, 1); - privacyPolicyButton.el_.innerHTML = - ''; - video.player.controlBar.removeChild("SkipBackward"); - video.player.controlBar.removeChild("SkipForward"); - if (subtitles) - video.player.addRemoteTextTrack({ - kind: "subtitles", - label: "Italiano", - srclang: "it", - default: true, - src: subtitles, - }); - if (JSON.parse(localStorage.getItem("bs-ck3") || "{}")["youtube.com"]) { - setTimeout(() => { - video.setYouTubeVideo(url); - }, 1000); - } - }); - - return ( -
-
-
-
-
- - - -
-

{parse(t("cookiePolicy"))}

-
- -
- - -
-
-
-
-
-
-
-
-
- - - - {trascription && ( -
-
- {trascription} -
-
- )} -
-
-
- ); -} - -export default MediaPlayerEl; +export default LoadableMediaPlayer;