Load YouTube thumbnails for demo representations#167
Conversation
- StudentView: reduce overlay from 80% to 40%, add two-stage error fallback - Read: extract RelatedDemoCard with same two-stage fallback - Demos: add youtube_thumbnail/youtube_id props and thumbnail display Agent-Logs-Url: https://github.com/codewit-us/codewit.us/sessions/24a3bb5e-7767-4b02-8fa9-717448fdb264 Co-authored-by: kbuffardi <8324410+kbuffardi@users.noreply.github.com>
|
@kbuffardi did you want me or @NickK21 to review this once you are done? was this just a styling issue with the thumbnail or is there a bug with the thumbnails not being shown? |
Eventually, but the other tasks we discussed previously are higher priority. I was busy but was curious what the problem was so I decided to experiment to see if CoPilot would identify the problem for us. I haven't even looked at it's proposed solution. |
| const Video = ({ title, uid, amountExercises, isDeleting, handleEdit, handleDelete }: VideoProps): JSX.Element => { | ||
|
|
||
| const Video = ({ title, uid, amountExercises, youtube_id, youtube_thumbnail, isDeleting, handleEdit, handleDelete }: VideoProps): JSX.Element => { | ||
| const fallback_src = `https://i.ytimg.com/vi/${youtube_id}/hqdefault.jpg`; |
| useEffect(() => { | ||
| setImgSrc(demo.youtube_thumbnail || fallback_src); | ||
| setImgFailed(false); | ||
| }, [demo.youtube_thumbnail, fallback_src]); |
There was a problem hiding this comment.
you have the fallback useEffect here and for RelatedCardDemo. should this also be done for the Video component as well?
Demo cards were displaying a solid black rectangle instead of YouTube thumbnail previews. The primary culprit in
StudentView.tsxwas an 80% opaque overlay completely obscuring the thumbnail image; additionally, neitherStudentViewnorReadhad any error handling for failed image loads, andDemos.tsxnever rendered a thumbnail at all.Changes
StudentView.tsx—CourseModuleDemobg-opacity-80→bg-opacity-40youtube_thumbnail→ derivedhttps://i.ytimg.com/vi/{youtube_id}/hqdefault.jpg→ camera icon placeholder40%→70%Read.tsx—RelatedDemosRelatedDemoCardcomponent (needed ownuseStatefor per-card image error state)Demos.tsx—Videoyoutube_idandyoutube_thumbnailpropsThe derived thumbnail URL (
i.ytimg.com/vi/{id}/hqdefault.jpg) is always publicly accessible without an API key, making it a reliable fallback when the stored URL is stale or missing.