@internetstiftelsen/styleguide 2.24.30-beta.0.1 → 2.24.30-beta.0.3

package/src/assets/video/guidad-tur-nar-internet-kom-till-svenska-hem-undertexter.vtt

@@ -0,0 +1,474 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:05.433
+Hallå, hej! Jag heter Måns Jonasson
+och jag är internetexpert på Internetstiftelsen
+
+00:00:05.500 --> 00:00:07.500
+och grundare av Internetmuseum.
+
+00:00:07.633 --> 00:00:13.600
+I den här guidade turen ska vi gå igenom hur det
+gick till när internet tog sig in i våra svenska hem
+
+00:00:13.633 --> 00:00:16.067
+och våra allra första möten med internet.
+
+00:00:16.400 --> 00:00:22.033
+Om du vill så kan du när som helst under föreläsningen klicka på någon av de länkar som dyker upp till höger om mig
+
+00:00:22.067 --> 00:00:26.033
+för att fördjupa dig och läsa mer på våra tidslinjepunkter på Internetmuseum.
+
+00:00:26.367 --> 00:00:31.967
+Och när du vill så återvänder du till den här guidade turen så fortsätter den precis där du slutade.
+
+00:00:32.100 --> 00:00:36.133
+Minns du ditt alldeles egna första möte med internet?
+
+00:00:36.700 --> 00:00:40.733
+Om du är under 25-30 år gammal så är sannolikheten ganska låg
+
+00:00:40.833 --> 00:00:45.633
+att du kommer ihåg hur det kändes när du kopplade upp dig på nätet den allra första gången.
+
+00:00:46.067 --> 00:00:51.167
+Men om du är äldre så är sannolikheten ganska stor att du kommer ihåg den här pirrande känslan
+
+00:00:51.233 --> 00:00:56.533
+av att för första gången kliva ut på det världsomspännande datornätverket internet.
+
+00:00:56.833 --> 00:01:00.100
+Idag har vi internet med oss i fickan överallt, hela tiden
+
+00:01:00.400 --> 00:01:04.933
+Men på 90-talet när internet tog sig in i svenska hem var det inte lika enkelt.
+
+00:01:05.067 --> 00:01:10.267
+Man var från början tvungen att ha en speciell liten låda som kallas "modem".
+
+00:01:10.567 --> 00:01:12.733
+Jag tog med ett modem från våra samlingar.
+
+00:01:12.867 --> 00:01:17.633
+Det här är ett US Robotics, ett av de allra vanligaste modemen
+
+00:01:17.667 --> 00:01:21.133
+som fanns i svenska hem på 90-talet när vi skulle ta oss ut på internet.
+
+00:01:21.400 --> 00:01:25.500
+Det här modemet kopplades in till den fasta telefonlinjen hemma
+
+00:01:25.600 --> 00:01:30.333
+och en av de saker som gjorde det här speciellt var att det pep väldigt när det kopplade upp sig.
+
+00:01:30.433 --> 00:01:32.433
+Vi tar och lyssnar lite på hur det lät.
+
+00:01:32.633 --> 00:01:38.600
+[MODEMLJUD]
+
+00:01:38.800 --> 00:01:42.533
+Det här oljudet betydde att du var på väg att koppla upp dig på internet
+
+00:01:42.767 --> 00:01:47.733
+och för första gången kanske ta reda på vem det var som spelade huvudrollen i den där filmen
+
+00:01:47.967 --> 00:01:50.867
+eller kanske leta upp bilder på nånting specifikt.
+
+00:01:51.300 --> 00:01:55.233
+Och de här modemen var väldigt sällsynta till att börja med
+
+00:01:55.300 --> 00:01:58.067
+för det var både dyrt och komplicerat att ansluta till nätet.
+
+00:01:58.500 --> 00:02:04.067
+Eftersom de kopplades på telefonnätet så betydde det att samtidigt som du var uppkopplad på internet
+
+00:02:04.167 --> 00:02:07.800
+så kunde ingen ringa. Det gick bara att göra en sak i taget på telefonlinjen.
+
+00:02:08.000 --> 00:02:13.567
+Om någon satt och surfade så kunde ingen ringa in eller ut på familjens telefon därhemma.
+
+00:02:13.700 --> 00:02:17.400
+Det skapade ganska många konflikter i svenska hem i början av internet-tiden.
+
+00:02:18.600 --> 00:02:23.233
+Själv så kopplade jag upp mig via en av de första svenska internetoperatörerna
+
+00:02:23.333 --> 00:02:27.100
+faktiskt den första som vände sig till privatpersoner, den hette Algonet.
+
+00:02:27.100 --> 00:02:30.467
+och jag skaffade min första uppkoppling 1994.
+
+00:02:30.633 --> 00:02:36.167
+På den här tiden var det väldigt få svenskar, bara några tusen faktiskt som hade uppkoppling hemma
+
+00:02:36.333 --> 00:02:39.933
+och det gick väldigt långsamt att surfa, men det spelade ingen roll för oss
+
+00:02:40.067 --> 00:02:43.500
+vi tyckte att det var så enormt spännande att bara vara med på nätet
+
+00:02:43.567 --> 00:02:45.967
+att ha möjlighet att kommunicera över hela världen.
+
+00:02:46.933 --> 00:02:50.233
+1994 var det många som tog sina första steg ut på nätet
+
+00:02:50.333 --> 00:02:55.667
+men det dröjde till 1996 innan internet blev "årets julklapp"
+
+00:02:55.767 --> 00:03:00.800
+Jag tog med från våra samlingar dels det här modemet som följde med i internetpaketet
+
+00:03:01.033 --> 00:03:03.267
+men också den här: Connect2internet.
+
+00:03:03.400 --> 00:03:07.467
+Det här var Tele 2:s internetpaket som var en av de stora storsäljarna
+
+00:03:07.633 --> 00:03:11.133
+som för många svenskar var det allra första mötet med internet hemma.
+
+00:03:11.333 --> 00:03:14.967
+Känner du igen den här boken så är du troligtvis gammal nog att ha varit med på den här tiden.
+
+00:03:16.167 --> 00:03:20.033
+Jag jobbade på en internetoperatör på den här tiden och jag minns
+
+00:03:20.300 --> 00:03:24.567
+att supporten, när de här julklapparna packades upp under julgranen
+
+00:03:24.700 --> 00:03:29.100
+och man fick det här paketet med modemet och instruktionsboken
+
+00:03:29.433 --> 00:03:33.433
+men behöver man något mer till internet? Behöver man kanske en dator till exempel?
+
+00:03:33.867 --> 00:03:38.333
+Tro det eller ej, men det var rätt många som fick ett internetpaket i julkapp som inte hade någon dator hemma
+
+00:03:38.600 --> 00:03:44.267
+och den som hade köpt hade helt enkelt inte förstått att internet behövde också en dator för att fungera.
+
+00:03:45.333 --> 00:03:51.233
+När internet tog fart så var en av de allra första sakerna som vi internetentusiaster gjorde i början
+
+00:03:51.367 --> 00:03:53.500
+att bygga våra egna hemsidor.
+
+00:03:54.233 --> 00:03:57.067
+Idag är det ganska sällsynt att svenskar har en egen hemsida
+
+00:03:57.133 --> 00:04:02.100
+men på 90-talet så var det här en otroligt populär syssla för den som hade skaffat internet
+
+00:04:02.433 --> 00:04:06.367
+För vad skulle man göra på nätet om inte dela med sig av sina egna hobbies?
+
+00:04:06.433 --> 00:04:10.100
+Man kanske skapade en webbsida som berättade om ens egen skivsamling
+
+00:04:10.133 --> 00:04:12.500
+eller kanske en webbsida om salamandrar.
+
+00:04:12.767 --> 00:04:16.633
+Folk överallt startade hemsidor om sina egna hobbies
+
+00:04:16.700 --> 00:04:19.000
+om sina familjer, la upp bilder
+
+00:04:19.200 --> 00:04:22.933
+och en av de internetpionjärer som vi på Internetmuseum särskilt hyllar
+
+00:04:23.333 --> 00:04:28.633
+som var en av de som var först med att skapa en HTML-skola.
+
+00:04:28.767 --> 00:04:32.267
+Där kunde man lära sig att bygga sina egna hemsidor.
+
+00:04:32.433 --> 00:04:36.233
+Det här med att bygga egna hemsidor och lära sig HTML, det var faktiskt
+
+00:04:36.367 --> 00:04:39.833
+väldigt många svenskars första steg in i programmeringsvärlden.
+
+00:04:40.200 --> 00:04:45.700
+Det är en av de grundstenar som gjort att Sverige idag är ett framgångsrikt land
+
+00:04:45.833 --> 00:04:49.900
+när det gäller internetprogrammering, spelutveckling och programmering i allmänhet.
+
+00:04:50.033 --> 00:04:55.233
+Dåtidens uppkopplingar var väldigt långsamma, så webbsidorna måste vara små.
+
+00:04:55.567 --> 00:04:59.833
+Eftersom uppkopplingarna gick via de här modemen och alltså över telefonnätet, som ljud
+
+00:05:00.133 --> 00:05:03.467
+så jobbade man med väldigt långsamma hastigheter och det var faktiskt så att
+
+00:05:03.567 --> 00:05:07.067
+bilderna laddades in långsamt, så här.
+
+00:05:07.233 --> 00:05:11.033
+Man kunde få sitta flera minuter och vänta på att en stor bild skulle laddas in på webbsidan.
+
+00:05:11.200 --> 00:05:15.567
+Det betydde att när man byggde webbsidor på den här tiden var de tvungna att vara väldigt små.
+
+00:05:15.700 --> 00:05:18.833
+Små bilder, hårt komprimerade, väldigt få effekter
+
+00:05:19.033 --> 00:05:22.533
+inga filmer, inga ljud och så. Väldigt statisk webb jämför med idag.
+
+00:05:23.433 --> 00:05:26.700
+Ett sånt här modem kallas för "56K".
+
+00:05:27.133 --> 00:05:30.567
+Det betyder att det går i en hastighet av 56 kilobit per sekund.
+
+00:05:30.933 --> 00:05:34.167
+Det är ungefär 0,05 megabit per sekund.
+
+00:05:34.833 --> 00:05:39.733
+En vanlig svensk uppkoppling idag via fiber ligger nånstans mellan 10, 20, 50, 100
+
+00:05:39.833 --> 00:05:41.667
+eller till och med 1000 megabit per sekund.
+
+00:05:41.700 --> 00:05:45.567
+Alltså många tusen gånger snabbare än de här modemuppkopplingarna.
+
+00:05:45.900 --> 00:05:49.900
+Jag läste alldeles nyligen att dagens förstasida på Google.com
+
+00:05:50.100 --> 00:05:53.000
+skulle ta 20 minuter att ladda ner på ett sånt här modem.
+
+00:05:53.233 --> 00:05:57.967
+Så det har hänt väldigt mycket på de här drygt 25 åren som gått sen vi började koppla upp oss.
+
+00:06:00.267 --> 00:06:02.100
+Vad skulle vi då göra på nätet?
+
+00:06:02.433 --> 00:06:06.300
+Skulle vi titta på folks salamandersamlingar och kanske ta reda på vem som spelade
+
+00:06:06.467 --> 00:06:09.200
+huvudrollen i en viss film, eller skulle vi umgås?
+
+00:06:09.433 --> 00:06:13.167
+Det visade sig att styrkan i nätet, att koppla ihop människor
+
+00:06:13.367 --> 00:06:17.400
+var perfekt för en helt ny generation av entreprenörer på internet.
+
+00:06:17.667 --> 00:06:21.233
+Och nånting som grundades 1996 är Lunarstorm
+
+00:06:21.333 --> 00:06:26.667
+som var en av de första, kanske faktiskt världens första sociala media på nätet.
+
+00:06:27.533 --> 00:06:31.967
+Lunarstorm var lite likt dagens Facebook: En plattform där man kunde bli medlem
+
+00:06:32.167 --> 00:06:35.067
+man kunde ladda upp bilder och skriva till varandra.
+
+00:06:35.533 --> 00:06:39.167
+Men till skillnad från dagens Facebook så var det lite mer semi-publikt.
+
+00:06:39.500 --> 00:06:43.233
+Det var mindre troligt att du pratade med människor du inte kände
+
+00:06:43.267 --> 00:06:48.300
+du höll dig till din lilla vänkrets, och folk hade väldigt fantasifulla namn.
+
+00:06:48.933 --> 00:06:52.467
+Istället för att ha våra riktiga namn, som vi oftast har i sociala medier idag.
+
+00:06:52.733 --> 00:06:58.900
+Lunarstorm blev riktigt stort och hade 1,2 miljoner medlemmar i Sverige när det var som störst.
+
+00:06:59.233 --> 00:07:04.200
+Det fanns en tid när 90% av alla tonåringar i Sverige hade ett konto på Lunarstorm.
+
+00:07:04.467 --> 00:07:08.700
+Så för många ungdomar var Lunarstorm det första mötet med sociala medier.
+
+00:07:09.400 --> 00:07:15.033
+Året efter att internet blev årets julklapp och Lunarstorm grundades, alltså 1997
+
+00:07:15.233 --> 00:07:21.067
+då tävlar Nick Borgen med låten "World Wide Web" i Mello, och den gick så här.
+
+00:07:21.133 --> 00:07:35.267
+[MUSIK]
+
+00:07:35.500 --> 00:07:42.200
+Så det sjungs om internet i Melodifestivalen, betyder det att internet är mainstream 1997?
+
+00:07:42.567 --> 00:07:49.200
+Nej, faktum är att 1997 är det bara 10% av svenskarna som har tillgång till internet i hemmet.
+
+00:07:49.400 --> 00:07:54.167
+Det är inte så många som ens har skaffat en dator hem än, och än mindre internet - bara 10%!
+
+00:07:54.567 --> 00:07:58.233
+Men år 1998 kommer Hem-PC-reformen.
+
+00:07:58.700 --> 00:08:02.133
+Hem-PC-reformen gjorde att det för första gången blev möjligt för många svenskar
+
+00:08:02.233 --> 00:08:05.967
+att ha råd att skaffa en dator och ett internetpaket hem.
+
+00:08:06.133 --> 00:08:10.600
+Och mellan 1997, då endast 10% av svenskarna hade tillgång till internet hemma
+
+00:08:10.767 --> 00:08:15.033
+och år 2000 så växer internettillgången dramatiskt.
+
+00:08:15.167 --> 00:08:21.433
+År 2000 är det för första gången hälften av svenskarna som har skaffat internet hem.
+
+00:08:21.800 --> 00:08:27.867
+2000-talet tillhör Flash. Det här är när en majoritet har börjat skaffa internet hem.
+
+00:08:28.000 --> 00:08:30.800
+Och med Flash blir det för första gången möjligt att ta del av
+
+00:08:30.900 --> 00:08:36.433
+animationer, spel, video och ljud på webben på ett enkelt och tillgängligt sätt.
+
+00:08:36.533 --> 00:08:41.000
+Fortfarande med långsamma uppkopplingar, så kvaliteten på videon och ljudet
+
+00:08:41.167 --> 00:08:43.733
+är kanske inte riktigt som vi är vana vid idag.
+
+00:08:43.800 --> 00:08:47.033
+Men Flash fick ett enormt genomslag och gav oss enorma mängder av
+
+00:08:47.133 --> 00:08:49.533
+spel, underhållning och filmer
+
+00:08:49.700 --> 00:08:55.433
+och det är faktiskt Flash som möjliggör den allra första svenska virala succén:
+
+00:08:55.633 --> 00:08:59.833
+Nämligen "Ansiktsburk" år 2001. Den gick så här:
+
+00:09:00.067 --> 00:09:07.533
+[MUSIK]
+
+00:09:07.767 --> 00:09:11.300
+En låt med arabisk text som någon tycker låter som svenska.
+
+00:09:11.533 --> 00:09:15.933
+Han sjunger naturligtvis inte "ansiktsburk", men låter det inte lite så?
+
+00:09:16.467 --> 00:09:20.233
+Någon skapar en Flash-film och lägger upp den här bilden och låten
+
+00:09:20.300 --> 00:09:23.300
+och lägger svenska undertexter som är någorlunda likt
+
+00:09:23.533 --> 00:09:27.400
+och den här skickas runt, inte via sociala medier som vi gör idag,
+
+00:09:27.467 --> 00:09:31.100
+utan väldigt mycket via e-mail. Folk mejlar den här länken till varandra
+
+00:09:31.167 --> 00:09:37.100
+för det här är ju innan sociala medier och den otroliga delningskultur vi har idag.
+
+00:09:37.400 --> 00:09:40.100
+På 00-talet så växer internet rekordsnabbt
+
+00:09:40.267 --> 00:09:44.200
+inte bara andelen människor som är uppkopplade utan också innehållet.
+
+00:09:44.567 --> 00:09:48.767
+Och det är på 00-talet som mycket av det vi tar för givet på internet idag skapas.
+
+00:09:49.067 --> 00:09:52.900
+Facebook, Youtube, Wikipedia och väldigt mycket annat
+
+00:09:52.900 --> 00:09:57.300
+som vi idag tycker är en naturlig del av internet ser dagens ljus på 00-talet.
+
+00:09:57.667 --> 00:10:01.033
+Även utanför Sverige växer internet väldigt snabbt.
+
+00:10:01.433 --> 00:10:06.300
+Många av de som är uppvuxna på 00-talet har helt enkelt vant sig vid att alltid kunna
+
+00:10:06.467 --> 00:10:11.233
+använda internet för att ta reda på fakta, använda det i skolan och ha kontakt med vänner.
+
+00:10:11.500 --> 00:10:14.800
+Istället för att ringa varandra så chattar man, man skickar direktmeddelanden
+
+00:10:15.067 --> 00:10:18.433
+först kanske via ICQ eller MSN Messenger
+
+00:10:18.600 --> 00:10:24.600
+och idag via Facebook eller WhatsApp eller någon av alla internetbaserade meddelandetjänster
+
+00:10:25.567 --> 00:10:31.800
+Det är först år 2008 som Iphone lanseras i Sverige och gör internet mobilt på riktigt.
+
+00:10:32.133 --> 00:10:37.133
+Den här lilla enheten som nu 90% av svenskarna går runt med: En smartphone
+
+00:10:37.500 --> 00:10:41.700
+har möjliggjort att vi tar internet med oss överallt och har förflyttat internet
+
+00:10:41.833 --> 00:10:43.833
+från nånting som vi använder då och då...
+
+00:10:44.500 --> 00:10:48.167
+Jag brukar säga att vi har gått från att säga att vi "kopplar upp oss" på internet
+
+00:10:48.267 --> 00:10:52.400
+som vi ju faktiskt gjorde med de här modemen: Vi var tvungna att välja att "nu ska jag gå ut på internet"
+
+00:10:52.533 --> 00:10:56.533
+"Nu kan ingen ringa och nu kopplar jag ner från internet och nu är jag inte på internet längre".
+
+00:10:57.133 --> 00:11:00.033
+Det kunde alltså hända saker på nätet medan vi inte var uppkopplade.
+
+00:11:00.533 --> 00:11:05.000
+Men idag går vi ju runt och är uppkopplade hela tiden, och det är smartphonen som har möjliggjort detta.
+
+00:11:05.233 --> 00:11:09.900
+Nu när vi går runt med en smartphone i fickan hela tiden så är vi ju ständigt uppkopplade.
+
+00:11:10.133 --> 00:11:12.833
+Vi är inte längre "offline" eller "online".
+
+00:11:12.867 --> 00:11:15.833
+Vi är inte längre "på internet" eller "utanför internet".
+
+00:11:16.300 --> 00:11:19.833
+Och kanske är det nu, när vi alltid är uppkopplade som vi använder
+
+00:11:19.833 --> 00:11:22.700
+nätet på det sättet som nätet alltid var tänkt.
+
+00:11:22.800 --> 00:11:26.867
+Det är nu vi kan använda det som det världsomspännande datorkommunikationsnät
+
+00:11:27.067 --> 00:11:28.767
+som det var från första början.
+
+00:11:29.033 --> 00:11:34.600
+Nu kan vi prata med vem vi vill, när vi vill, om vad vi vill, precis när vi önskar det.

package/src/organisms/timeline/_timeline.scss

@@ -118,6 +118,7 @@ html {
 		transition: opacity 1s ease-out, transform 5s cubic-bezier(0, 1, 0, 1);
 		transform: translateY(200px);
 		will-change: opacity, transform;
+		transition-delay: 0.5s;
 		flex: 100%;
 
 		&.animate {

package/src/organisms/video-guide/VideoGuidePlayback.js

@@ -0,0 +1,213 @@
+import getCurrentCueIndex from './getCurrentCueIndex';
+
+export default class VideoGuidePlayback {
+	constructor(element, video) {
+		this.video = video;
+		this.playBtn = element.querySelector('.js-play-btn');
+		this.playIcon = element.querySelector('.js-play-icon');
+		this.pauseIcon = element.querySelector('.js-pause-icon');
+		this.forwardsButton = element.querySelector('.js-next-chapter');
+		this.backwardsButton = element.querySelector('.js-previous-chapter');
+		this.totaltimeElement = element.querySelector('.js-totaltime');
+		this.countDownElement = element.querySelector('.js-countdown');
+		this.chapterElements = Array.from(element.querySelectorAll('.js-chapters li'));
+		this.sessionKeys = {
+			currentTime: 'InmsCurrentTime',
+			duration: 'InmsDuration',
+			currentGuideURL: 'InmsCurrentGuideURL',
+			currentGuideImage: 'InmsCurrentGuideImage',
+		};
+
+		this.duration = null;
+		this.timeLeft = null;
+
+		this.init();
+		this.attach();
+	}
+
+	init() {
+		this.duration = this.video.duration;
+		this.chapters = this.video.textTracks.getTrackById('video-chapters');
+
+		if (this.chapters) {
+			this.chapters.addEventListener('cuechange', this.onCueChange);
+			this.setForwardState(true);
+		}
+
+		// Run on next tick to ensure that the video has loaded and event listeners are attached
+		setTimeout(() => {
+			this.sync();
+		}, 0);
+
+		// Format duration to minutes and seconds
+		const minutes = Math.floor(this.duration / 60);
+		const seconds = Math.floor(this.duration % 60);
+		const formattedDuration = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+		this.totaltimeElement.innerText = `${formattedDuration} – `;
+	}
+
+	sync() {
+		const key = this.sessionKeys.currentTime;
+		const guideURL = window.location.href;
+
+		// If the current guide URL is not the same as the one in session storage, do not sync
+		if (sessionStorage.getItem(this.sessionKeys.currentGuideURL) !== guideURL) {
+			return;
+		}
+
+		if (sessionStorage.getItem(key)) {
+			const videoCurrentTime = sessionStorage.getItem(key);
+
+			if (videoCurrentTime > 0) {
+				this.video.currentTime = videoCurrentTime;
+			}
+		}
+	}
+
+	attach() {
+		this.playBtn.addEventListener('click', this.togglePlay);
+		this.forwardsButton.addEventListener('click', this.nextChapter);
+		this.backwardsButton.addEventListener('click', this.previousChapter);
+
+		window.addEventListener('visibilitychange', this.saveState);
+		window.addEventListener('beforeunload', this.saveState);
+	}
+
+	setPlayActive() {
+		this.pauseIcon.classList.remove('is-hidden');
+		this.playIcon.classList.add('is-hidden');
+	}
+
+	setPauseActive() {
+		this.pauseIcon.classList.add('is-hidden');
+		this.playIcon.classList.remove('is-hidden');
+	}
+
+	setForwardState(active) {
+		if (active) {
+			this.forwardsButton.disabled = false;
+		} else {
+			this.forwardsButton.disabled = true;
+		}
+	}
+
+	setBackwardState(active) {
+		if (active) {
+			this.backwardsButton.disabled = false;
+		} else {
+			this.backwardsButton.disabled = true;
+		}
+	}
+
+	updateChapterState() {
+		const { cues } = this.chapters;
+		const activeCueIndex = getCurrentCueIndex(this.chapters);
+
+		this.setBackwardState(activeCueIndex > 0);
+		this.setForwardState(activeCueIndex < cues.length - 1);
+
+		this.chapterElements.forEach((chapter, i) => {
+			if (i === activeCueIndex) {
+				chapter.classList.add('is-current-item');
+			} else {
+				chapter.classList.remove('is-current-item');
+			}
+		});
+	}
+
+	saveState = () => {
+		if (this.video.currentTime > 0) {
+			const {
+				currentTime,
+				duration,
+				currentGuideURL,
+				currentGuideImage,
+			} = this.sessionKeys;
+			const guideURL = window.location.href;
+			const guideImage = this.video.dataset.featuredImage;
+
+			sessionStorage.setItem(currentTime, this.video.currentTime);
+			sessionStorage.setItem(duration, this.video.duration);
+			sessionStorage.setItem(currentGuideURL, guideURL);
+			sessionStorage.setItem(currentGuideImage, guideImage);
+		}
+	};
+
+	clearState = () => {
+		Object.values(this.sessionKeys).forEach((key) => {
+			sessionStorage.removeItem(key);
+		});
+	};
+
+	onPlay = () => {
+		this.setPlayActive();
+	};
+
+	onPause = () => {
+		this.setPauseActive();
+	};
+
+	onEnded = () => {
+		this.setPlayActive();
+		this.clearState();
+		this.setBackwardState(false);
+		this.setForwardState(false);
+
+		this.video.currentTime = 0;
+	};
+
+	onAbort = () => {
+		this.video.pause();
+		this.onEnded();
+	};
+
+	onTimeUpdate = () => {
+		const timeLeft = Math.floor(this.duration - this.video.currentTime);
+
+		// Time update fires every 250ms, so we only want to update the DOM when the time left changes
+		if (timeLeft === this.timeLeft) {
+			return;
+		}
+
+		this.timeLeft = timeLeft;
+
+		const minutes = Math.floor(timeLeft / 60);
+		const seconds = Math.floor(timeLeft % 60);
+		const formattedTimeLeft = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+		this.countDownElement.innerText = formattedTimeLeft;
+	};
+
+	onCueChange = () => {
+		this.updateChapterState();
+	};
+
+	togglePlay = () => {
+		if (this.video.paused) {
+			this.video.play();
+		} else {
+			this.video.pause();
+		}
+	};
+
+	nextChapter = () => {
+		const { cues } = this.chapters;
+		const activeCueIndex = getCurrentCueIndex(this.chapters);
+
+		if (activeCueIndex < cues.length - 1) {
+			this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
+			this.updateChapterState();
+		}
+	};
+
+	previousChapter = () => {
+		const { cues } = this.chapters;
+		const activeCueIndex = getCurrentCueIndex(this.chapters);
+
+		if (activeCueIndex > 0) {
+			this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
+			this.updateChapterState();
+		}
+	}
+}