Skip to content

Mconf Live Playback 3.1.0

Compare
Choose a tag to compare
@pedrobmarin pedrobmarin released this 03 Oct 12:18
· 85 commits to master since this release
08d4676

IMPORTANT: this release changes the style's customization structure.

chore: update dependencies fc76093
chore(video-js): update stylesheet 5118a7f

feat(hook): useCurrentInterval and useCurrentContent 4fd1a4a
feat(media): fallback audio support d50b7a7
feat(player): modal component b0491bf
feat(player): useCurrentIndex hook 4bd9de9

fix(layout): thumbnails check ed16362
fix(presentation): remove logo after started ba7e67d
fix(synchronizer): media sync on visible e231783

refactor: UI color patterns 14b1437
refactor(button): inherit default button color 9e819a7
refactor(button): remove ghost type c5f9f03
refactor(layout): get control state from layout 2b68f64
refactor(layout): player style 6b2fb40
refactor(player): content and media components 8973913
refactor(player): function component 1f9ea0b
refactor(player): remove legacy thumbnails toggle df84700
refactor(player): remove props 9c150dc
refactor(presentation): background logo image 60431f5
refactor(shortcuts): remove legacy thumbnails 71752e1

style: default button color 1f6cf24
style: interactive elements box-shadow color 3c497bd
style: remove unused color variables 59eeffd
style(application): fix height f600110
style(button): custom colors 4383ce6

Here's a suggestion for Elos' custom playback style:

:root {
  --primary-background-color: rgb(32, 32, 32);
  --primary-highlight-color: rgb(15, 132, 137);
  --primary-content-color: rgb(227, 227, 227);

  --secondary-background-color: rgb(247, 248, 248);
  --secondary-highlight-color: rgb(227, 227, 227);
  --secondary-content-color:  rgb(32, 32, 32);

  --tertiary-background-color: rgb(56, 56, 56);
  --tertiary-highlight-color: rgb(15, 132, 137);
  --tertiary-content-color: rgb(227, 227, 227);

  --button-disabled-background-color: rgb(227, 227, 227);
  --button-disabled-color: rgb(247, 248, 248);

  --button-solid-background-color: rgb(15, 132, 137);
  --button-solid-color: var(255, 255, 255);

  --button-box-shadow-color: rgb(56, 56, 56);

  --control-bar-background-color: rgb(56, 56, 56);

  --modal-wrapper-background-color: rgba(32, 32, 32, .25);

  --avatar-default-background-color: rgb(15, 132, 137);
  --avatar-zero-background-color: rgb(45, 204, 211);
  --avatar-one-background-color: rgb(45, 204, 211);
  --avatar-two-background-color: rgb(45, 204, 211);
  --avatar-three-background-color: rgb(45, 204, 211);
  --avatar-four-background-color: rgb(45, 204, 211);
  --avatar-five-background-color: rgb(45, 204, 211);
  --avatar-six-background-color: rgb(45, 204, 211);
  --avatar-seven-background-color: rgb(45, 204, 211);
  --avatar-eight-background-color: rgb(45, 204, 211);
  --avatar-nine-background-color: rgb(45, 204, 211);
  --avatar-ten-background-color: rgb(45, 204, 211);
  --avatar-eleven-background-color: rgb(45, 204, 211);
  --avatar-twelve-background-color: rgb(45, 204, 211);
  --avatar-thirteen-background-color: rgb(45, 204, 211);
  --avatar-fourteen-background-color: rgb(45, 204, 211);
  --avatar-fifteen-background-color: rgb(45, 204, 211);
}