Individual event pages currently display a video player in their banner that plays videos (YouTube + a handful of other video streaming sites). Code-wise this is encapsulated as a standalone React component found in the following folder:
/imports/client/ui/components/VideoPlayer
Although there is also extensive JSDOC commentary in the relevant files, below is a summary of the logic/process flow of the video player.
MAIN FEATURES & INGREDIENTS:
-
Actual video playing is driven by external react-player (see here for documentation)
-
When submitting events user can add up to 3 videos that will be shuffled and played by the player. These are passed as a prop in React.
-
User can also click on a button to subscribe to the site’s Youtube channel (logic found under Subscribe.js file)
-
Events without a video will play from the Public Happiness Movement Youtube channel, shuffling-playing a subset of videos linked to the event category(ies) which are themselves passed as a prop in React:
-
Shuffler function gets the event category(ies) as an array originating from the database.
-
Looks for any matches with an internal list of video playlists saved in i18n
imports/both/i18n/en/video.json. If it finds a video playlist with category field matching the event category(ies), it will play from this list. -
No matches found? Shuffler looks at event top-level (parent) categories instead as these are more likely to hit on a match, also taken from i18n
imports/both/i18n/en/categories.jsone.g. “Public Music Jam” => “Art and Dance”. -
Still no match found? Shuffler will build a playlist out of all available video on the channel and select randomly.
-
NOTE: Video playlist is an array of the actual Youtube video ID’s - this is required to be able to randomise the selection (linking directly to the Youtube channel or playlist will mean the same videos are always played in the same order). This means any new Youtube videos need to be manually added to i18n to the desired playlist array found in imports/both/i18n/en/video.json.