Lovese Drilling - Across the world, local communities are fighting to stop new coal, oil and gas projects. Our common future is being decided on these carbon battlegrounds. This is the story about one of those battlegrounds. Told in 8 parts, this interactive documentary explores how one of the most vulnerable and productive ecosystems in the world could be handed over to the oil- and gas industry.
The current framework works well for video, but the interactive parts which are becoming more important, is currently not implemented in a way which makes for smooth transitions after a video and into a interactive section.
The overall aim is to be able to:
When a video ends playing, transition into the next interactive part of the episode
The navigation elements (back/forth) above the menu should include the interactive elements. Right now they jump back/forth between videos only.
When the interactive part loads, there should be an internal timer for the interactive section which loops through a list of items from the loaded interactive HTML
When a user clicks on the map, or the pause icon (not currently present - only for videos) the timer should pause, as well as the looping of section items.
The user can then either explore for themselves (using the map filter list) or continue the "tour" by pressing the play button
Needs:
Be able to define the length of each interactive section in mm:ss, how many sections and for how long each section should be viewed before moving on to the next.
Be able to end the timer of an interactive element, if the user clicks away from the interactive episode
A loading function we can use for all of the mapbox interactive maps.
Intro loading screen
This loading screen should be overlaid the current content and give a-sync feedback to the user about what is loading, but also a short introduction to the coming interactive experience. What to preload: all images, javascripts and other dependencies.
Maybe add the first video (episode 1) to the video src for preload?
Interactive loading screen
A modular function which we can use to overlay a loading interface every time the user loads the interactive section. Mapbox tiles will often load slowly, so a overlay is needed to make the user experience less choppy.
Currently, each interactive episode has it's own JS which is included as a file when the interactive part is clicked. But each interactive part should be a part of the overall JS framework of episodes and the "progress" of the overall experience.
TODO:
Move the current "timer" code for the 2. interactive episode into the overall JS navigation framework, so that it can work for each interactive part
Add support for configuring each interactive episode in terms of when an event should happen on the timer for the interactive part.
Nice to have:
When clicking the scrubber within the interactive part, jump to the specific event/section of that interactive part
Add ticks to the interactive scrubber where an event within the interactive part happens.
One overall scrubber for the whole experience (20 minutes in total, divided by 10 episodes and their individual length and the interactive part length) and a episode + interactive part scrubber.
Description: The video element is currently being controlled with a lot of various code, the play/pause the video through various user interactions. Overall, the video can be played/paused through the following interactions:
Play icon on the title screen for each episode (overlay over each episode video): plays the video
Pressing anywhere on video while playing: pause video
Press a specific episode on the navigation bar: stop current video playing, replace with new video and show play icon on title screen (1)
These needs to be structured into a better event function, to make sure we have full control of the events. @RobinvdM: have a look at the code (app.framework6.js) related to the video.
Based on this new function/code restructure, add an event listener which slides the navigation bar up/down with a 5 seconds delay on video play/pause. (basic toggling)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent