Improve video UX

This commit is contained in:
schmelczerandras 2020-11-27 12:17:47 +01:00
parent 08feeb6bfc
commit f3c8453782
13 changed files with 101 additions and 69 deletions

View file

@ -1,16 +1,15 @@
import adAstraPoster from '../static/media/ad_astra.jpg?format=jpg';
import adAstraMp4 from '../static/media/ad_astra_720.mp4';
import adAstraWebM from '../static/media/ad_astra_720.webm';
import adAstraMp4 from '../static/media/mp4/ad_astra.mp4';
import adAstraWebM from '../static/media/webm/ad_astra.webm';
import { GitHub } from './shared';
import { last } from '../helper/last';
import { Video } from '../page/basics/video/video';
export const adAstraTimelineElement = {
title: `Gaming on an ATtiny85`,
date: `2020 Spring`,
figure: new Video({
poster: last(adAstraPoster.images)!.path,
poster: adAstraPoster,
mp4: adAstraMp4,
webm: adAstraWebM,
}),

View file

@ -1,15 +1,14 @@
import citySimulationPoster from '../static/media/simulation.jpg?format=jpg';
import citySimulationWebM from '../static/media/simulation.webm';
import citySimulationMp4 from '../static/media/simulation.mp4';
import citySimulationMp4 from '../static/media/mp4/simulation.mp4';
import citySimulationWebM from '../static/media/webm/simulation.webm';
import { Video } from '../page/basics/video/video';
import { last } from '../helper/last';
export const citySimulationTimelineElement = {
date: `2018 July - August`,
title: `City simulation`,
figure: new Video({
poster: last(citySimulationPoster.images)!.path,
poster: citySimulationPoster,
mp4: citySimulationMp4,
webm: citySimulationWebM,
}),

View file

@ -1,14 +1,17 @@
import forexMp4 from '../static/media/forex.mp4';
import forexWebM from '../static/media/forex.webm';
import forexMp4 from '../static/media/mp4/forex.mp4';
import forexWebM from '../static/media/webm/forex.webm';
import forexPoster from '../static/media/forex.jpg';
import { Video } from '../page/basics/video/video';
export const forexTimelineElement = {
title: `Predicting foreign exchange rates`,
date: `2019 Autumn`,
figure: new Video({
poster: forexPoster,
mp4: forexMp4,
webm: forexWebM,
shouldActLikeGif: true,
invertButton: true,
}),
description: `
From the animation, we can see that my implementation does a somewhat acceptable job at

View file

@ -1,15 +1,14 @@
import ledPoster from '../static/media/led.jpg?format=jpg';
import ledMp4 from '../static/media/led.mp4';
import ledWebM from '../static/media/led.webm';
import ledMp4 from '../static/media/mp4/led.mp4';
import ledWebM from '../static/media/webm/led.webm';
import { last } from '../helper/last';
import { Video } from '../page/basics/video/video';
export const ledsTimelineElement = {
date: `2016 spring`,
title: `Lights synchronised to music`,
figure: new Video({
poster: last(ledPoster.images)!.path,
poster: ledPoster,
mp4: ledMp4,
webm: ledWebM,
}),