cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 21:03:29 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Feat/mac (#109)

Browse Source 
* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari
This commit is contained in:
Carlos Valente
2022-04-17 20:30:39 +02:00
committed by GitHub
parent 20d3ddbc18
commit db0eee3b9c
140 changed files with 10160 additions and 2139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/viewers/production/Pip.jsx
+25 -13
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import QRCode from 'react-qr-code';
import style from './Pip.module.css';
import style from './Pip.module.scss';
import Paginator from 'common/components/views/Paginator';
import NavLogo from 'common/components/nav/NavLogo';
import { AnimatePresence, motion } from 'framer-motion';
@@ -12,6 +12,8 @@ export default function Pip(props) {
const [size, setSize] = useState('');
const ref = useRef(null);
const [filteredEvents, setFilteredEvents] = useState(null);
const [pageNumber, setPageNumber] = useState(0);
const [currentPage, setCurrentPage] = useState(0);
// calculcate pip size
useLayoutEffect(() => {
@@ -29,7 +31,7 @@ export default function Pip(props) {
useEffect(() => {
if (backstageEvents == null) return;
let events = [...backstageEvents];
const events = [...backstageEvents];
// Add running delay
let delay = 0;
@@ -43,9 +45,7 @@ export default function Pip(props) {
}
// filter just events
let filtered = events.filter((e) => e.type === 'event');
setFilteredEvents(filtered);
setFilteredEvents(events.filter((e) => e.type === 'event'));
}, [backstageEvents]);
// Format messages
@@ -61,15 +61,27 @@ export default function Pip(props) {
<div className={style.eventTitle}>{general.title}</div>
<div className={style.todayContainer}>
<div className={style.label}>Today</div>
<div className={style.entriesContainer}>
<Paginator
selectedId={selectedId}
events={filteredEvents}
limit={15}
time={20}
/>
<div className={style.todayHeaderBlock}>
<div className={style.label}>Today</div>
<div className={style.nav}>
{pageNumber > 1 &&
[...Array(pageNumber).keys()].map((i) => (
<div
key={i}
className={i === currentPage ? style.navItemSelected : style.navItem}
/>
))}
</div>
</div>
<Paginator
selectedId={selectedId}
events={filteredEvents}
isBackstage
limit={14}
time={20}
setCurrentPage={setCurrentPage}
setPageNumber={setPageNumber}
/>
</div>
<div className={style.pip} ref={ref}>
client/src/features/viewers/production/Pip.module.css
-136
View File
@@ -1,136 +0,0 @@
.container__gray,
.container__grayFinished {
margin: 0;
box-sizing: border-box; /* reset */
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
background: linear-gradient(90deg, #252525 0%, #121212 100%);
height: 100vh;
color: #fffd;
font-weight: 300;
display: grid;
grid-template-columns: 20vw 20vw 18vw 3vw 1fr;
grid-template-rows: 60vh 1fr 1fr 1fr;
grid-template-areas:
' pip pip pip . schd'
' titl titl titl . schd'
' info info clck . schd'
' info info time . schd';
gap: 1vw;
padding: 1vw;
}
.label {
font-size: 1.3vw;
color: #ff7597;
}
.eventTitle {
grid-area: titl;
font-size: 3vw;
font-weight: 600;
text-decoration: underline #ff7597 0.5vh;
padding-top: 0.2vh;
padding-left: 1vw;
}
.pip {
grid-area: pip;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 2555, 0.07);
width: 100%;
text-align: center;
display: grid;
place-content: center;
}
.empty {
opacity: 0.5;
}
.piptext {
color: rgba(255, 255, 255, 0.13);
font-weight: 600;
font-size: 4vh;
}
/* =================== TITLES ===================*/
.infoContainer > div {
overflow: hidden;
}
.infoContainer,
.clockContainer,
.countdownContainer {
background-color: rgba(255, 255, 255, 0.05);
padding: 1vh 1vw;
}
.todayContainer {
background-color: rgba(255, 255, 255, 0.07);
padding: 2.5vh 2vw;
}
.infoContainer,
.todayContainer {
border-radius: 1vw;
}
.infoContainer {
grid-area: info;
display: grid;
grid-template-rows: 3vh minmax(0, 1fr);
grid-template-columns: 3fr 1fr;
grid-template-areas:
'titl qr'
'binf qr';
gap: 0.5vw;
}
.infoMessages {
grid-area: binf;
font-size: 1.5vw;
line-height: 2vw;
white-space: pre-line;
}
.qr {
align-self: center;
justify-self: center;
grid-area: qr;
}
/* =================== SCHEDULE ===================*/
.todayContainer {
grid-area: schd;
display: grid;
grid-template-rows: 5vh 1fr 3vh;
height: 100%;
overflow: hidden;
max-width: 100%;
}
/* =================== MAIN ===================*/
.clockContainer {
grid-area: time;
border-radius: 0 0 1vw 1vw;
}
.countdownContainer {
grid-area: clck;
border-radius: 1vw 1vw 0 0;
}
.clock {
font-family: 'Open Sans', sans-serif;
font-size: 3vw;
line-height: 3vw;
text-align: center;
letter-spacing: 0.25vw;
color: #ddd;
}
client/src/features/viewers/production/Pip.module.scss
+63
View File
@@ -0,0 +1,63 @@
@use '../../../styles/main' as *;
@use '../../../styles/viewers' as *;
.container__gray,
.container__grayFinished {
@include viewer-container;
display: grid;
grid-template-columns: 20vw 20vw 18vw 3vw 1fr;
grid-template-rows: 60vh 1fr 1fr 1fr;
grid-template-areas:
' pip pip pip . schd'
' titl titl titl . schd'
' info info clck . schd'
' info info time . schd';
gap: 1vw;
padding: 1vw;
}
.eventTitle {
grid-area: titl;
@include viewer-event-title;
}
.pip {
grid-area: pip;
background-color: $bg-black-100;
border: 1px solid $bg-black-200;
width: 100%;
text-align: center;
display: grid;
place-content: center;
}
.empty {
opacity: 0.5;
}
.piptext {
color: $bg-gray-900;
font-weight: 600;
font-size: 4vh;
}
.infoContainer,
.clockContainer,
.countdownContainer {
background-color: $bg-gray-1000;
padding: 1vh 1vw;
}
.todayContainer {
grid-area: schd;
}
.countdownContainer {
grid-area: clck;
border-radius: 1vw 1vw 0 0;
}
.clockContainer {
border-radius: 0 0 1vw 1vw;
}
client/src/features/viewers/production/lower/LowerWrapper.jsx
+10 -10
View File
@@ -65,51 +65,51 @@ const Lower = (props) => {
// Check for user options
useEffect(() => {
// create aux
let options = {};
const options = {};
// preset: selector
// Should be a number 1-n
let p = parseInt(searchParams.get('preset'));
const p = parseInt(searchParams.get('preset'));
if (!isNaN(p)) setPreset(p);
// size: multiplier
// Should be a number 0.0-n
let s = searchParams.get('size');
const s = searchParams.get('size');
if (s) options.size = s;
// transitionIn: seconds
// Should be a number 0-n
let t = parseInt(searchParams.get('transition'));
const t = parseInt(searchParams.get('transition'));
if (!isNaN(t)) options.transitionIn = t;
// textColour: string
// Should be a hex string '#ffffff'
let c = searchParams.get('text');
const c = searchParams.get('text');
if (c) options.textColour = `#${c}`;
// bgColour: string
// Should be a hex string '#ffffff'
let b = searchParams.get('bg');
const b = searchParams.get('bg');
if (b) options.bgColour = `#${b}`;
// key: string
// Should be a hex string '#00FF00' with key colour
let k = searchParams.get('key');
const k = searchParams.get('key');
if (k) options.keyColour = `#${k}`;
// fadeOut: seconds
// Should be a number 0-n
let f = parseInt(searchParams.get('fadeout'));
const f = parseInt(searchParams.get('fadeout'));
if (!isNaN(f)) options.fadeOut = f;
// x: pixels
// Should be a number 0-n
let x = parseInt(searchParams.get('x'));
const x = parseInt(searchParams.get('x'));
if (!isNaN(x)) options.posX = x;
// y: pixels
// Should be a number 0-n
let y = parseInt(searchParams.get('y'));
const y = parseInt(searchParams.get('y'));
if (!isNaN(y)) options.posY = y;
setLowerOptions({