mixin video-player-controls(video, formats, startingFormat, awaitingThumb)
	.videoControls
		button.playBtn.videoControlBtn
		button.volumeBtn.videoControlBtn
		.volumePopout.popout.hidden
			.volumeBarContainer
				input(type="range" min="0" max="1" step="0.05" value="0.5")#volumeBar.volumeBar
			label(for="volumeBar").volumeText 100%
		.timeline
			input(type="range" min="0" max=video.lengthSeconds step="0.25" value="0").seek.paused
			.fakeThumb
			.hoverTimeContainer.hidden
				.hoverTimeInner.popout
					video(disablepictureinpicture paused muted type=startingFormat.type src=(awaitingThumb ? null : `/getVideo?v=${video.videoId}&q=thumb&dl=1`) width=160 height=90).hoverTimeVideo
					.hoverTimeText 00:00:00
		.timecode 00:00:00 / 00:00:00
		button.settingsBtn.videoControlBtn
		//- Player settings
		div(data-page="main").settingsPopout.popout.hidden
			//- Settings
			div(data-name="main").settingsPage
				h3.setting.header
					.text Settings
				.setting.autoHide
					.icon
					.text Pin controls (off)
				.setting.loop
					.icon
					.text Loop (off)
				.setting.speed
					.icon
					.text Speed (1)
					.submenuIcon
				.setting.tricks
					.icon
					.text Tricks
					.submenuIcon
				if video.captions.length > 0
					.setting.cc
						.icon
						.text Off
						.submenuIcon
				.setting.quality
					.icon
					.text !{startingFormat.qualityLabel}
					.submenuIcon
			//- Speed
			div(data-name="speed").settingsPage
				h3.setting.header.goBack
					.icon.back
					.text Speed
				input(type="range" min="0" max="3" step="0.25" value="1")#speedBar.speedBar
				label(for="speedBar").speedText 1x
			//- Tricks
			div(data-name="tricks").settingsPage
				h3.setting.header.goBack 
					.icon.back
					.text Tricks
				.setting.forceStereo
					.icon
					.text Force mono audio (off)
				//- TODO
			//- Subtitles
			if video.captions.length > 0
				div(data-name="cc").settingsPage
					h3.setting.header.goBack
						.icon.back
						.text Subtitles
					div(data-label="Off").setting.caption.active
						.text Off
					each t in video.captions
						div(data-label=t.label).setting.caption
							.text= t.label
							a(title="Redownload").submenuIcon.redownloadBtn
			//- Quality
			div(data-name="quality").settingsPage
				h3.setting.header.goBack
					.icon.back
					.text Quality
				each f in formats
					div(data-label=f.qualityLabel data-w=f.second__width data-h=f.second__height data-size=f.eirtube__size class={ setting: true, quality: true, active: f.itag == startingFormat.itag })
						.text= f.cloudtube__label
						a(title="Redownload").submenuIcon.redownloadBtn

		button.fullscreen.videoControlBtn