From 46fd752f409f71a5ac16914b97f33f6aa342ec5a Mon Sep 17 00:00:00 2001 From: dukeeagle Date: Sat, 31 Dec 2022 17:27:13 -0600 Subject: [PATCH] working prototype of metadata viewer with defined schema --- .../data/MIT Regressions intro metadata.vtt | 78 +++++- viewer/src/components/Player.tsx | 3 - .../components/WebVttPlayer/MetadataPoint.tsx | 223 +++++++++++++----- viewer/src/pages/index.tsx | 13 +- viewer/src/styles/globals.css | 8 +- 5 files changed, 251 insertions(+), 74 deletions(-) diff --git a/viewer/public/data/MIT Regressions intro metadata.vtt b/viewer/public/data/MIT Regressions intro metadata.vtt index 1b0301f..9f3e0c1 100644 --- a/viewer/public/data/MIT Regressions intro metadata.vtt +++ b/viewer/public/data/MIT Regressions intro metadata.vtt @@ -2,8 +2,80 @@ WEBVTT Kind: captions Language: en -NOTE We could have a separation between MUSIC SOURCE, VIDEO SOURCE, NARRATION SOURCE, COMMENTARY, and TRANSCRIPT. +NOTE separation between MUSIC SOURCE, VIDEO SOURCE, NARRATION SOURCE, COMMENTARY, and TRANSCRIPT. -NOTE ["The Vanishing American Family" by ScubaZ] 00:00:01.550 --> 00:01:15.448 -{"keywords_alt": "", "gpspoints": {"gps_zoom": "11", "gps_text_alt": "", "gps_text": "Stockholm, Sweden", "gps": "59.3388502,18.0616981"}, "synopsis": "", "subjects": "", "hyperlinks": {"hyperlink_text_alt": "", "hyperlink_text": "", "hyperlink": ""}, "synopsis_alt": "", "title": "The Vanishing American Family", "keywords": "ScubaZ", "title_alt": "", "subjects_alt": ""} \ No newline at end of file +{ + "uid": "1", + "type": "music", + "data": { + "type": "music", + "title": "The Vanishing American Family", + "artist": "ScubaZ", + "year": "2001", + "label": "Odd Records Ltd.", + "hyperlink": "https://www.discogs.com/master/1184747-Scuba-Z-The-Vanishing-American-Family" + } +} + + + +00:00:17.550 --> 00:00:19.548 +{ + "uid": "2", + "type": "video_source", + "data": { + "type": "video_source", + "title": "\"We lived here, you didn't...\" @ Bexley Hall, MIT", + "artist": "Andrei Ivanov", + "year": "2013", + "notes": "AI-upscaled and frame-interpolated", + "retrieved_from": "YouTube", + "hyperlink": "https://www.youtube.com/watch?v=e6m8se96yyM&ab_channel=AndreiIvanov" + } +} + +00:00:47.000 --> 00:00:48.600 +{ + "uid": "2", + "type": "video_source", + "data": { + "type": "video_source", + "title": "The November Actions", + "artist": "Ricky Leacock", + "year": "1969", + "notes": "AI-upscaled and frame-interpolated", + "retrieved_from": "MIT Museum", + "hyperlink": "" + } +} + +00:00:56.000 --> 00:01:01.600 +{ + "uid": "3", + "type": "video_source", + "data": { + "type": "video_source", + "title": "MIT: Progressions", + "artist": "David and Sheri Espar", + "year": "1969", + "notes": "AI-upscaled and frame-interpolated", + "retrieved_from": "Kenneth Friedman (YouTube)", + "hyperlink": "https://www.youtube.com/watch?v=p3mq5E0GwLA&ab_channel=KennethFriedman" + } +} + +00:01:03.800 --> 00:01:15.600 +{ + "uid": "3", + "type": "video_source", + "data": { + "type": "video_source", + "title": "Technology", + "artist": "unknown creators", + "year": "1934", + "notes": "AI-upscaled and frame-interpolated. View Kathleen E. 23's post", + "retrieved_from": "MIT Museum", + "hyperlink": "https://www.youtube.com/watch?v=rsO_67xzymQ&ab_channel=FromtheVaultofMIT" + } +} \ No newline at end of file diff --git a/viewer/src/components/Player.tsx b/viewer/src/components/Player.tsx index 4d1cdee..21b8edb 100644 --- a/viewer/src/components/Player.tsx +++ b/viewer/src/components/Player.tsx @@ -14,9 +14,6 @@ export default function Player() { return ( <> -
- -
void } -class MetadataPoint extends Component { +interface MetadataPointData { + "uid": string, + "type": string, + // data is one of four interfaces: music, commentary, transcript, or video_source + "data": MusicData | CommentaryData | TranscriptData | VideoSourceData | NarrationSourceData | OhmsData +} +interface MusicData { + "type": "music", + "title": string, + "title_alt": string, + "artist": string, + "year": string, + "label": string, + "hyperlink": string, +} + +interface CommentaryData { + "type": "commentary", + "text": string, // may contain VTT-compatible styling, as specified at https://www.w3.org/TR/webvtt1/#model-overview +} + +interface TranscriptData { + "type": "transcript", + "text": string, // may contain VTT-compatible styling, as specified at https://www.w3.org/TR/webvtt1/#model-overview +} + +interface VideoSourceData { + "type": "video_source", + "title": string, + "artist": string, // optional - may be empty string + "attribution": string, + "year": string, + "notes": string, + "retrieved_from": string, + "hyperlink": string, +} + +interface NarrationSourceData { + "type": "narration_source", + "title": string, + "attribution": string, + "year": string, + "retrieval_date": string, + "source_type" : string, // PDF, etc + + "hyperlink": string, +} + + // adopting the OHMS standard http://ohda.matrix.msu.edu/2014/11/indexing-interviews-in-ohms/ +interface OhmsData { + "type": "ohms", + "title": string, + "title_alt": string, + "synopsis": string, + "synopsis_alt": string, + "keywords": string, + "keywords_alt": string, + "subjects": string, + "subjects_alt": string, + "gpspoints": { + "gps": string, + "gps_zoom": string, + "gps_text": string, + "gps_text_alt": string + }, + "hyperlinks": { + "hyperlink": string, + "hyperlink_text": string, + "hyperlink_text_alt": string + } +} +class MetadataPoint extends Component { + + constructor(props: MetadataPointProps) { super(props) + this.state = { + isActive: false + } + this.props.cue.onenter = this.onEnter.bind(this) + this.props.cue.onexit = this.onExit.bind(this) this.onClick = this.onClick.bind(this) + // get current theme (but in a class component) } render() { - const data = JSON.parse(this.props.cue.text) - const titleAlt = data.title_alt - ?

{data.title_alt}

- : "" - const synopsis = data.synopsis - ?
- Synopsis - {data.synopsis} -
- : "" - const synopsisAlt = data.synopsis_alt - ?
{data.synopsis_alt}
- : "" - const keywords = data.keywords - ?
- Keywords: - {data.keywords} -
- : "" - const keywordsAlt = data.keywords_alt - ?
- Alternative Keywords: - {data.keywords_alt} -
- : "" - const subjects = data.subjects - ?
- Subjects: - {data.subjects} -
- : "" - const subjectsAlt = data.subjects_alt - ?
- Alternative Subjects: - {data.subjects_alt} -
- : "" - const gpsLink = data.gpspoints.gps - ?
- Geo: - {data.gpspoints.gps_text} -
- : "" - const hyperlinks = data.hyperlinks.hyperlink_text - ?
- Links: - {data.hyperlinks.hyperlink_text} -
- : "" + let style = '' + if (this.state.isActive) { + // active + style = "bg-gray-200" + } + // exect JSON.parse data to be of type MetadataPointData + const point = JSON.parse(this.props.cue.text) as MetadataPointData + const data = point.data + + let song = null + let footage = null + + // get type of data + if (point.type == "music") { + // const song is point.data as MusicData + song = data as MusicData + } + + if (point.type == "video_source") { + footage = data as VideoSourceData + } + return ( -
+
- [{this.startTime()}] + [{this.startTime()} - {this.endTime()}]
-

{data.title}

- {titleAlt} - {synopsis} - {synopsisAlt} - {keywords} - {keywordsAlt} - {subjects} - {subjectsAlt} - {gpsLink} - {hyperlinks} + {point.type == "music" && +
+ +
+ } + {point.type == "video_source" && +
+ +
+ }
) @@ -94,6 +147,18 @@ class MetadataPoint extends Component { return this.formatSeconds(this.props.cue.startTime) } + endTime() { + return this.formatSeconds(this.props.cue.endTime) + } + + onEnter() { + this.setState({isActive: true}) + } + + onExit() { + this.setState({isActive: false}) + } + formatSeconds(t) { let mins = Math.floor(t / 60) if (mins < 10) { @@ -110,4 +175,38 @@ class MetadataPoint extends Component { } +const VideoSourceCard: React.FC = ({videoSource}) => { + return ( +
+

{videoSource.title}

+
+

{videoSource.artist}

+

{videoSource.year}

+ {/* render the html that may be inside of {videoSource.notes} */} +
+
+ + Link + +
+ ); +}; + +// TODO: fix typing +const SongCard: React.FC = ({song}) => { + return ( +
+

{song.title}

+
+

{song.artist}

+

{song.year}

+

{song.label}

+
+
+ ); +}; + export default MetadataPoint \ No newline at end of file diff --git a/viewer/src/pages/index.tsx b/viewer/src/pages/index.tsx index 8eeee8a..e2c394f 100644 --- a/viewer/src/pages/index.tsx +++ b/viewer/src/pages/index.tsx @@ -26,9 +26,16 @@ const Home: NextPage = () => { toggle theme
-

- viewer -

+ {/* should hug upper-lefthand side */} + {/* text in the upper-lefthand corner with some padding */} +
+

+ documentary metadata viewer +

+ {/* hug the left-hand side of the screen */} +

current film: MIT: REGRESSIONS intro

+
+ diff --git a/viewer/src/styles/globals.css b/viewer/src/styles/globals.css index 1a82fef..e2be56b 100644 --- a/viewer/src/styles/globals.css +++ b/viewer/src/styles/globals.css @@ -69,12 +69,14 @@ /* TranscriptLine */ .webvtt-player .active { - background-color: #eee; - border: 1px solid #ccc; + /* background-color: #eee; */ + /* light border */ + @apply bg-gray-200 border-gray-600 border-2 border-opacity-10 border-x-0; } .webvtt-player .match { - background-color: lightyellow; + /* background-color: lightyellow; */ + @apply bg-gray-200; } .webvtt-player .line {