From 2b2806457e4c0665c41e3a4d01a3cca1b0373753 Mon Sep 17 00:00:00 2001 From: HeNine <> Date: Wed, 3 Aug 2022 14:02:57 +0200 Subject: [PATCH] add video title --- web/package-lock.json | 37 ++++++++++++++++++++++++++++++++++++ web/package.json | 1 + web/public/mock/results.json | 10 ++++++++-- web/src/Results.js | 5 ++--- web/src/Results.scss | 13 +++++++++++-- 5 files changed, 59 insertions(+), 7 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index a5c361b..0463c43 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.54.1", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -8689,6 +8690,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14426,6 +14432,22 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.54.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.1.tgz", + "integrity": "sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -22876,6 +22898,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz", "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ==" }, + "immutable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz", + "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -26836,6 +26863,16 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.54.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.1.tgz", + "integrity": "sha512-GHJJr31Me32RjjUBagyzx8tzjKBUcDwo5239XANIRBq0adDu5iIG0aFO0i/TBb/4I9oyxkEv44nq/kL1DxdDhA==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/web/package.json b/web/package.json index b8dec76..9dab217 100644 --- a/web/package.json +++ b/web/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.54.1", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/web/public/mock/results.json b/web/public/mock/results.json index 5c953be..0d0651b 100644 --- a/web/public/mock/results.json +++ b/web/public/mock/results.json @@ -28,7 +28,10 @@ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } ], - "video": "https://youtu.be/k-OMEk7UUvM", + "video": { + "title": "DB2021 - Recite a Meme Song as if Dramatic Poem (Magical Trevor by Graham)", + "id": "k-OMEk7UUvM" + }, "chat": [ { "sender": "thorsokar", @@ -117,7 +120,10 @@ "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } ], - "video": "https://youtu.be/k-OMEk7UUvM", + "video": { + "title": "DB2021 - Recite a Meme Song as if Dramatic Poem (Magical Trevor by Graham)", + "id": "k-OMEk7UUvM" + }, "chat": [ { "sender": "thorsokar", diff --git a/web/src/Results.js b/web/src/Results.js index 493ad99..0d81a62 100644 --- a/web/src/Results.js +++ b/web/src/Results.js @@ -97,13 +97,12 @@ function TranscriptLine(props) { */ function Video(props) { - const video_id = props.video.split("/").at(-1); - const width = 300; return (
-
diff --git a/web/src/Results.scss b/web/src/Results.scss index d2a2299..d489e5a 100644 --- a/web/src/Results.scss +++ b/web/src/Results.scss @@ -47,7 +47,7 @@ max-width: 6.5in; flex-basis: 2in; - max-height: 2in; + max-height: 2.5in; overflow-y: scroll; scrollbar-width: thin; @@ -73,6 +73,15 @@ flex-grow: 0; flex-shrink: 0; margin: 3px; + width: 300px; + + .video_title { + background-color: constants.$dark_gray; + hyphens: auto; + margin: 0px 0px 3px 0px; + padding: 0.25em 0.5em; + + } } .chat { @@ -81,7 +90,7 @@ max-width: 6.5in; flex-basis: 2in; - max-height: 2in; + max-height: 2.5in; overflow-y: scroll; scrollbar-width: thin;