24 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/headerBar/deviceStatuses/DisabledPeripherals/DisabledPeripheralsSettings.tsx:
--------------------------------------------------------------------------------
1 | import { Stack, Typography } from '@mui/material'
2 | import { KnownPeripheral } from '@shared/api'
3 | import React, { useCallback, useContext } from 'react'
4 | import { IPCServerContext } from '../../../../contexts/IPCServer'
5 | import { ProjectContext } from '../../../../contexts/Project'
6 | import { ErrorHandlerContext } from '../../../../contexts/ErrorHandler'
7 |
8 | import './style.scss'
9 | import { DeviceIcon } from '../../../pages/homePage/deviceIcon/DeviceIcon'
10 |
11 | export interface DisabledPeripheralInfo {
12 | bridgeId: string
13 | deviceId: string
14 | info: KnownPeripheral
15 | }
16 |
17 | export const DisabledPeripheralsSettings: React.FC<{
18 | peripherals: DisabledPeripheralInfo[]
19 | onPeripheralClicked?: () => void
20 | }> = function DeviceStatuses({ peripherals, onPeripheralClicked }) {
21 | const ipcServer = useContext(IPCServerContext)
22 | const project = useContext(ProjectContext)
23 | const { handleError } = useContext(ErrorHandlerContext)
24 |
25 | const toggleManualConnect = useCallback(
26 | (peripheral?: DisabledPeripheralInfo) => {
27 | if (!peripheral) return
28 | const peripheralSettings = project.bridges[peripheral.bridgeId].settings.peripherals[peripheral.deviceId]
29 | peripheralSettings.manualConnect = !peripheralSettings.manualConnect
30 | ipcServer.updateProject({ id: project.id, project }).catch(handleError)
31 | },
32 | [handleError, ipcServer, project]
33 | )
34 |
35 | return (
36 | {props.label}
25 |
26 |
27 |
27 | {props.icon &&
46 | )
47 | }
48 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/headerBar/tabs/tab/style.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../styles/foundation/all';
2 |
3 | .tab {
4 | position: relative;
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | height: 2.5rem;
9 | border-radius: 0.5rem 0.5rem 0 0;
10 | padding: 0 2.4rem 0 1.6rem;
11 | min-width: 8rem;
12 |
13 | .icon {
14 | margin-right: 0.5rem;
15 | display: flex;
16 | align-items: center;
17 |
18 | svg {
19 | height: 1.4rem;
20 | }
21 | }
22 |
23 | .separator {
24 | width: 0.1rem;
25 | height: 1rem;
26 | background: #b7bdd4;
27 | position: absolute;
28 | right: 0;
29 | }
30 |
31 | .label {
32 | font-size: 1.2rem;
33 | }
34 |
35 | .close {
36 | position: absolute;
37 | right: 0.6rem;
38 | top: 0.1rem;
39 | display: none;
40 | opacity: 0.5;
41 |
42 | &:hover {
43 | opacity: 1;
44 | }
45 |
46 | button {
47 | padding: 0;
48 | background: transparent;
49 | border: 0;
50 | cursor: pointer;
51 | }
52 |
53 | svg {
54 | fill: white;
55 | }
56 | }
57 |
58 | &:hover .close {
59 | display: block;
60 | }
61 |
62 | &.active {
63 | background: #191b23;
64 |
65 | .separator {
66 | display: none;
67 | }
68 |
69 | .close {
70 | display: block;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/inputs/AddBtn.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@mui/material'
2 | import React from 'react'
3 | import { BsPlusLg } from 'react-icons/bs'
4 |
5 | export const AddBtn = (props: {
6 | className?: string
7 | disabled?: boolean
8 | title: string
9 | onClick: () => void
10 | }): JSX.Element => {
11 | return (
12 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/inputs/AnalogInputPicker/style.scss:
--------------------------------------------------------------------------------
1 | .analog-input-picker-popover li.MuiMenuItem-root > svg {
2 | margin-right: 0.5em;
3 | margin-top: 0.1em;
4 | }
5 | .analog-input-picker {
6 | opacity: 0.6;
7 |
8 | > svg {
9 | /* Just outline the icon: */
10 | fill: none;
11 | stroke: white;
12 | stroke-width: 0.5px;
13 | }
14 |
15 | &.linked {
16 | opacity: 1;
17 | > svg {
18 | fill: white;
19 | }
20 | }
21 |
22 | &__value {
23 | font-size: 80%;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/inputs/BooleanInput.tsx:
--------------------------------------------------------------------------------
1 | import { Checkbox, FormControlLabel, FormGroup, Tooltip } from '@mui/material'
2 | import React from 'react'
3 |
4 | export const BooleanInput: React.FC<{
5 | currentValue: boolean | undefined
6 | onChange: (newValue: boolean) => void
7 | label: string | number | React.ReactElement{props.icon}
}
28 | {props.name}
29 | {!props.disableClose && (
30 |
31 |
42 |
43 | )}
44 | {props.showSeparator && }
45 | {props.data.groupOneAtATime ? 1 : props.data.countPlayablePartsInGroup}
61 | )}
62 | {props.triggerCount}
39 |
40 | ) : (
41 |
27 |
51 | )
52 | }
53 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/bridgeItem/style.scss:
--------------------------------------------------------------------------------
1 | .bridge-item-header {
2 | display: flex;
3 | align-items: center;
4 |
5 | .device-statuses {
6 | display: flex;
7 | align-items: center;
8 |
9 | > .label {
10 | font-size: 1.2rem;
11 | color: rgba(255, 255, 255, 0.7);
12 | margin-right: 1.5rem;
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/deviceIcon/style.scss:
--------------------------------------------------------------------------------
1 | .device-icon {
2 | display: flex;
3 | align-items: center;
4 | width: 40px;
5 |
6 | img {
7 | max-height: 2rem;
8 | max-width: 3rem;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/deviceItem/DeviceItemHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Bridge, BridgeDevice } from '../../../../../models/project/Bridge'
3 | import { AtemOptions, CasparCGOptions, DeviceType } from 'timeline-state-resolver-types'
4 |
5 | import './style.scss'
6 | import { DeviceShortcut } from '../deviceShorcut/DeviceShortcut'
7 | import { ScListItemLabel } from '../scList/ScListItemLabel'
8 |
9 | export const DeviceItemHeader: React.FC<{
10 | bridge: Bridge
11 | deviceId: string
12 | device: BridgeDevice
13 | deviceName?: string
14 | }> = (props) => {
15 | const deviceSettings = props.bridge.settings.devices[props.deviceId]
16 |
17 | if (!deviceSettings || !deviceSettings.options) return <>
18 |
19 | const deviceOptions = deviceSettings.options as CasparCGOptions | AtemOptions
20 |
21 | if (!deviceOptions) {
22 | return null
23 | }
24 | let deviceAddress = `${deviceOptions.host}:${deviceOptions.port}`
25 | if (deviceSettings.type === DeviceType.HTTPSEND) {
26 | deviceAddress = ''
27 | }
28 |
29 | return (
30 |
34 |
49 | )}
50 | Device statuses:
35 | {Object.entries(bridgeStatus?.devices)
36 | /**
37 | * Temporary fix - just like in DevicesList.tsx.
38 | * TODO - fix this bug on the backend side.
39 | */
40 | .filter(([id]) => {
41 | return props.bridge.settings.devices[id]
42 | })
43 | .map(([deviceId, device]) => {
44 | const deviceSettings = props.bridge.settings.devices[deviceId]
45 |
46 | return
31 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/deviceItem/style.scss:
--------------------------------------------------------------------------------
1 | .device-item-header {
2 | display: flex;
3 | align-items: center;
4 |
5 | > .header-label {
6 | border-right: 0.2rem solid rgba(255, 255, 255, 0.3);
7 | padding-right: 2rem;
8 | margin-right: 2rem;
9 | }
10 |
11 | .status {
12 | font-size: 1.2rem;
13 | color: rgba(255, 255, 255, 0.7);
14 | }
15 | }
16 |
17 | .device-item-content {
18 | display: flex;
19 | align-items: flex-start;
20 |
21 | .fields {
22 | flex-grow: 1;
23 | display: flex;
24 | align-items: baseline;
25 | flex-wrap: wrap;
26 | }
27 |
28 | .actions {
29 | margin-left: 2rem;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/deviceShorcut/DeviceShortcut.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { BridgeDevice } from 'src/models/project/Bridge'
3 | import { DeviceType } from 'timeline-state-resolver-types'
4 | import { DeviceIcon } from '../deviceIcon/DeviceIcon'
5 | import { StatusCircle } from '../scList/StatusCircle'
6 |
7 | import './style.scss'
8 |
9 | export const DeviceShortcut: React.FC<{ device: BridgeDevice; type: DeviceType }> = (props) => {
10 | const statusMessage = props.device.ok ? 'Connected' : props.device.message ? props.device.message : 'Not Connected'
11 |
12 | return (
13 |
34 | {deviceSettings.disable
35 | ? 'Disabled'
36 | : props.device.ok
37 | ? 'Connected'
38 | : props.device.message
39 | ? props.device.message
40 | : 'Not Connected'}
41 |
42 |
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/deviceShorcut/style.scss:
--------------------------------------------------------------------------------
1 | .device-shortcut {
2 | display: flex;
3 | align-items: center;
4 | margin-right: 1.7rem;
5 | min-width: 4.5rem;
6 |
7 | .status-circle {
8 | margin-right: 0.8rem;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/layerItem/LayerItemHeader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Mapping } from 'timeline-state-resolver-types'
3 | import { ScListItemLabel } from '../scList/ScListItemLabel'
4 | import { describeMappingConfiguration } from '../../../../../lib/TSRMappings'
5 | import { DeviceIcon } from '../deviceIcon/DeviceIcon'
6 | import './style.scss'
7 | import { ProjectContext } from '../../../../contexts/Project'
8 | import { getDeviceName, getMappingName } from '../../../../../lib/util'
9 |
10 | export const LayerItemHeader: React.FC<{
11 | id: string
12 | mapping: Mapping
13 | deviceId: string
14 | }> = (props) => {
15 | const project = useContext(ProjectContext)
16 | const mappingDescription = describeMappingConfiguration(props.mapping)
17 | return (
18 |
19 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/layerItem/style.scss:
--------------------------------------------------------------------------------
1 | .layer-item-header {
2 | display: flex;
3 | align-items: center;
4 |
5 | .device-icon {
6 | margin-right: 1rem;
7 | }
8 |
9 | .config-description {
10 | font-size: 1.2rem;
11 | }
12 | }
13 |
14 | .layer-item-content {
15 | display: flex;
16 | align-items: flex-start;
17 |
18 | .fields {
19 | flex-grow: 1;
20 | display: flex;
21 | align-items: baseline;
22 | flex-wrap: wrap;
23 | }
24 |
25 | .actions {
26 | margin-left: 2rem;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/layersPage/DeviceSpecificSettings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | DeviceType,
4 | Mapping,
5 | MappingAtem,
6 | MappingCasparCG,
7 | MappingOBS,
8 | MappingVMixAny,
9 | } from 'timeline-state-resolver-types'
10 | import { CasparCGMappingSettings } from './device-specific-settings/CasparCGMappingSettings'
11 | import { AtemMappingSettings } from './device-specific-settings/AtemMappingSettings'
12 | import { OBSMappingSettings } from './device-specific-settings/OBSMappingSettings'
13 | import { VMixMappingSettings } from './device-specific-settings/VMixMappingSettings'
14 |
15 | export const DeviceSpecificSettings: React.FC<{
16 | mapping?: Mapping
17 | device: DeviceType
18 | onUpdate: (mappingUpdate: Mapping) => void
19 | }> = (props) => {
20 | switch (props.device) {
21 | case DeviceType.CASPARCG:
22 | return {mappingDescription}
}
23 |
37 |
45 |
46 |
47 |
57 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/layersPage/device-specific-settings/CasparCGMappingSettings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { IntInput } from '../../../../inputs/IntInput'
3 | import { MappingCasparCG } from 'timeline-state-resolver-types'
4 |
5 | export const CasparCGMappingSettings: React.FC<{
6 | mapping: MappingCasparCG
7 | onUpdate: (mappingUpdate: MappingCasparCG) => void
8 | }> = (props) => {
9 | return (
10 | <>
11 |
12 | {
19 | props.onUpdate({ ...props.mapping, channel: v })
20 | }}
21 | caps={[0, 999]}
22 | />
23 |
24 |
25 |
26 | {
33 | props.onUpdate({ ...props.mapping, layer: v })
34 | }}
35 | caps={[0, 999]}
36 | />
37 |
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/message/Message.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { IoIosHelpCircleOutline } from 'react-icons/io'
3 | import { IoClose } from 'react-icons/io5'
4 |
5 | import './style.scss'
6 |
7 | export const Message: React.FC<{
8 | content?: React.ReactNode
9 | type: 'help' | 'warning'
10 | onClose?: () => void
11 | children?: React.ReactNode
12 | }> = (props) => {
13 | return (
14 |
15 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/message/style.scss:
--------------------------------------------------------------------------------
1 | .message {
2 | background: linear-gradient(180deg, #383a45 0%, #393a45 100%);
3 | font-size: 1.2rem;
4 | padding: 1rem 2rem;
5 | display: flex;
6 | border-radius: 0.5rem;
7 | align-items: center;
8 |
9 | .icon {
10 | flex-grow: 0;
11 | margin-right: 1rem;
12 | display: flex;
13 | align-items: center;
14 |
15 | svg {
16 | width: 2rem;
17 | height: 2rem;
18 | }
19 | }
20 | .content {
21 | flex-grow: 1;
22 | // margin-top: 0.2rem;
23 | }
24 |
25 | button.close {
26 | background: none;
27 | padding: 0;
28 | border: 0;
29 | color: white;
30 | opacity: 0.7;
31 | display: flex;
32 | align-items: center;
33 | margin-left: 1rem;
34 |
35 | &:hover {
36 | opacity: 1;
37 | }
38 |
39 | svg {
40 | width: 1.5rem;
41 | height: 1.5rem;
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/peripheralsList/PeripheralsList.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite'
2 | import React from 'react'
3 | import { Bridge, BridgeStatus } from '../../../../../models/project/Bridge'
4 | import { ScList } from '../scList/ScList'
5 | import { store } from '../../../../mobx/store'
6 | import { PeripheralStatus } from '../../../../../models/project/Peripheral'
7 | import { PeripheralItemHeader } from '../peripheralItem/PeripheralItemHeader'
8 |
9 | export const PeripheralsList: React.FC<{
10 | autoConnectToAllPeripherals: boolean
11 | bridgeId: string
12 | statuses: BridgeStatus['peripherals']
13 | settings: Bridge['settings']['peripherals']
14 | }> = observer(function PeripheralsList(props) {
15 | const appStore = store.appStore
16 |
17 | if (Object.keys(props.statuses).length === 0) {
18 | return (
19 |
16 |
18 | {props.content || props.children}
19 | {props.onClose && (
20 |
23 | )}
24 |
20 | No panels connected.
21 |
22 | Connected Streamdeck or X-keys panels will appear here. 23 |
24 | )
25 | }
26 |
27 | return (
28 | 22 | Connected Streamdeck or X-keys panels will appear here. 23 |
29 | {
31 | const peripheralSettings = props.settings[peripheralId]
32 | const otherStatus = appStore.peripherals[`${props.bridgeId}-${peripheralId}`] as
33 | | PeripheralStatus
34 | | undefined
35 | if (!peripheralSettings)
36 | return {
37 | id: peripheralId,
38 | header: null,
39 | content: null,
40 | }
41 |
42 | return {
43 | id: peripheralId,
44 | header: (
45 |
58 | )
59 | })
60 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/projectPage/style.scss:
--------------------------------------------------------------------------------
1 | .rundown-header-item {
2 | display: flex;
3 | align-items: center;
4 | width: 100%;
5 |
6 | .header-label {
7 | flex-grow: 1;
8 | border: 0;
9 | }
10 |
11 | .controls {
12 | display: flex;
13 | align-items: center;
14 |
15 | button {
16 | &:not(:last-child) {
17 | margin-right: 2rem;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/projectPageLayout/ProjectPageLayout.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { HelpButton } from '../../../inputs/HelpButton/HelpButton'
3 | import { Message } from '../message/Message'
4 | import './style.scss'
5 |
6 | export const ProjectPageLayout: React.FC<{
7 | title: string
8 | subtitle?: string
9 | help?: React.ReactNode
10 | controls?: React.ReactNode
11 | children: React.ReactNode
12 | }> = (props) => {
13 | const [showHelp, setShowHelp] = useState(false)
14 |
15 | return (
16 |
17 | setShowHelp(false)} />}
33 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/projectPageLayout/style.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../styles/foundation/all';
2 |
3 | .dialog-form {
4 | .form-control {
5 | .MuiFormControl-root {
6 | width: 100%;
7 | }
8 | }
9 | }
10 | .form-control {
11 | margin-right: 1rem;
12 | display: flex;
13 | align-items: center;
14 | }
15 |
16 | .project-page-layout {
17 | display: flex;
18 | min-height: 0;
19 |
20 | .main {
21 | flex-grow: 1;
22 | overflow: auto;
23 | padding: 2rem 2.5rem;
24 |
25 | > .header {
26 | display: flex;
27 | align-items: flex-end;
28 | margin-bottom: 4rem;
29 |
30 | .section {
31 | margin: 0 1rem;
32 | }
33 |
34 | .titles {
35 | flex-grow: 0;
36 |
37 | .title {
38 | font-size: 2.8rem;
39 | font-weight: 700;
40 | }
41 |
42 | .subtitle {
43 | font-size: 1.4rem;
44 | font-weight: 500;
45 | margin-bottom: -0.5rem;
46 | }
47 | }
48 |
49 | .controls {
50 | display: flex;
51 | align-items: center;
52 | margin-left: 3rem;
53 | margin-bottom: 0.7rem;
54 | }
55 | }
56 |
57 | > .message {
58 | margin-bottom: 4rem;
59 | margin-top: -2rem;
60 | }
61 |
62 | > .content {
63 | > .note {
64 | text-align: center;
65 | opacity: 0.7;
66 | padding: 2rem 0;
67 | }
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/projectPageMenubar/ProjectPageMenubar.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames'
2 | import React from 'react'
3 |
4 | import './style.scss'
5 |
6 | export const ProjectPageMenubar: React.FC<{
7 | menubar: {
8 | groupId: string
9 | items: {
10 | label: string
11 | id: string
12 | icon?: React.ReactNode
13 | }[]
14 | }[]
15 | activeItemId?: string
16 | onItemClick: (itemId: string) => void
17 | }> = (props) => {
18 | return (
19 |
18 | {
26 | setShowHelp(!showHelp)
27 | }}
28 | />
29 | )}
30 | {props.controls &&
32 | {showHelp && props.help &&
19 |
22 | {props.help && (
23 | {props.subtitle}
20 | {props.title}
21 | {props.controls}
}
31 | {props.children}
34 |
20 | {props.menubar.map((group) => {
21 | return (
22 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/projectPageMenubar/style.scss:
--------------------------------------------------------------------------------
1 | .menubar {
2 | flex-grow: 0;
3 | flex-shrink: 0;
4 | width: 20rem;
5 | background: linear-gradient(180deg, #191b23 0%, #252733 19.83%);
6 |
7 | &__group {
8 | margin-top: 1rem;
9 | .item {
10 | padding: 1rem 1rem;
11 | font-size: 1.3rem;
12 | font-weight: 500;
13 | display: flex;
14 | align-items: center;
15 | cursor: pointer;
16 |
17 | .icon {
18 | margin-right: 1rem;
19 | display: flex;
20 | align-items: center;
21 |
22 | svg {
23 | height: 1.8rem;
24 | width: 1.8rem;
25 | }
26 | }
27 |
28 | &:hover {
29 | background-color: rgba(255, 255, 255, 0.05);
30 | }
31 |
32 | &.active {
33 | background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 159.04%), #3a4152;
34 | }
35 | }
36 |
37 | &:not(:last-child) {
38 | .separator {
39 | margin: 1rem 1rem 0 1rem;
40 | height: 0.2rem;
41 | box-sizing: border-box;
42 | width: auto;
43 | background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 159.04%), #3a4152;
44 | }
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/roundedSection/RoundedSection.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { HelpButton } from '../../../inputs/HelpButton/HelpButton'
3 | import { Message } from '../message/Message'
4 |
5 | import './style.scss'
6 |
7 | export const RoundedSection: React.FC<{
8 | title: React.ReactNode
9 | controls?: React.ReactNode
10 | help?: string
11 | children: React.ReactNode
12 | }> = (props) => {
13 | const [showHelp, setShowHelp] = useState(false)
14 |
15 | return (
16 |
23 | {group.items.map((item) => {
24 | const isActive = item.id === props.activeItemId
25 | return (
26 |
38 | )
39 | })}
40 | props.onItemClick(item.id)}
30 | >
31 | {item.icon &&
34 | )
35 | })}
36 |
37 | {item.icon}
}
32 | {item.label}
33 |
17 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/scList/ScList.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames'
2 | import React, { useState } from 'react'
3 | import { MdKeyboardArrowDown } from 'react-icons/md'
4 | import './style.scss'
5 |
6 | export const ScList: React.FC<{
7 | list: { id: string; header: React.ReactNode; content?: React.ReactNode }[]
8 | /** List of IDs that should be open by default */
9 | openByDefault?: string[]
10 | }> = (props) => {
11 | return (
12 |
18 | {
25 | setShowHelp(!showHelp)
26 | }}
27 | />
28 | )}
29 |
30 | {props.title}
19 | {props.controls && {props.controls}
}
20 |
21 | {props.help && (
22 |
31 |
40 |
32 | {showHelp && props.help && (
33 |
39 |
34 | setShowHelp(false)} />
35 |
36 | )}
37 | {props.children}
38 | -
13 | {props.list.map((item) => {
14 | return (
15 |
{
41 | if (props.content) setOpen(!isOpen)
42 | }}
43 | >
44 | {props.content && (
45 |
51 |
52 | {props.content && isOpen &&
46 |
48 | )}
49 | {props.header}
50 | {props.content}
}
53 |
6 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/homePage/scList/StatusCircle.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames'
2 | import React from 'react'
3 |
4 | export const StatusCircle: React.FC<{ status: 'connected' | 'disconnected' }> = (props) => {
5 | return
6 | }
7 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/newRundownPage/ImportRundownIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const ImportRundownIcon = (): JSX.Element => (
4 |
13 | )
14 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/newRundownPage/NewGropIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const NewGroupIcon = (): JSX.Element => (
4 |
17 | )
18 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/newRundownPage/NewRundownOption.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react-lite'
2 | import React from 'react'
3 |
4 | import './newRundownOption.scss'
5 |
6 | export const NewRundownOption: React.FC<{ label: string; icon: React.ReactNode; onClick: () => void }> = observer(
7 | function NewRundownOption(props) {
8 | return (
9 |
13 | )
14 | }
15 | )
16 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/newRundownPage/newRundownOption.scss:
--------------------------------------------------------------------------------
1 | .new-rundown-option {
2 | background: transparent;
3 | border-radius: 1rem;
4 | border: 2px solid #4e4f59;
5 | color: white;
6 | padding: 1.5rem 2.5rem;
7 | display: flex;
8 | align-items: center;
9 | width: 35rem;
10 |
11 | cursor: pointer;
12 |
13 | &:not(:last-child) {
14 | margin-bottom: 2rem;
15 | }
16 |
17 | &:hover {
18 | background: rgba(255, 255, 255, 0.05);
19 | }
20 |
21 | .icon {
22 | svg {
23 | height: 3.8rem;
24 | width: 3.8rem;
25 |
26 | path {
27 | stroke: #a8aaba;
28 | }
29 | }
30 | }
31 | .label {
32 | margin-left: 2rem;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/pages/newRundownPage/newRundownPage.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/foundation/all';
2 |
3 | .new-rundown-page {
4 | display: flex;
5 | align-items: center;
6 |
7 | .title {
8 | flex-basis: 50%;
9 | text-align: right;
10 | font-size: 2.4rem;
11 | font-weight: 700;
12 | color: #cfd1dc;
13 | padding-right: 5rem;
14 | }
15 |
16 | .options {
17 | flex-basis: 50%;
18 | padding-left: 5rem;
19 | border-left: 2px solid #4e4f59;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/rundown/GroupView/PartSubmenu.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@mui/material'
2 | import React, { useContext, useState } from 'react'
3 | import { MdOutlineEditNote } from 'react-icons/md'
4 | import { PartGUI } from '../../../../models/rundown/Part'
5 | import { ErrorHandlerContext } from '../../../contexts/ErrorHandler'
6 | import { IPCServerContext } from '../../../contexts/IPCServer'
7 | import { PartPropertiesDialog } from '../PartPropertiesDialog'
8 |
9 | export const PartSubmenu: React.FC<{
10 | rundownId: string
11 | groupId: string
12 | part: PartGUI
13 | /** Part or group locked */
14 | locked: boolean
15 | }> = ({ rundownId, groupId, part, locked }) => {
16 | const ipcServer = useContext(IPCServerContext)
17 | const { handleError } = useContext(ErrorHandlerContext)
18 |
19 | const [partPropertiesDialogOpen, setPartPropertiesDialogOpen] = useState(false)
20 |
21 | return (
22 | {props.title}
7 | {props.subtitle && {props.subtitle}
}
8 |
23 | {
43 | ipcServer
44 | .updatePart({
45 | rundownId,
46 | groupId,
47 | partId: part.id,
48 | part: {
49 | ...part,
50 | name,
51 | },
52 | })
53 | .catch(handleError)
54 | setPartPropertiesDialogOpen(false)
55 | }}
56 | onDiscarded={() => {
57 | setPartPropertiesDialogOpen(false)
58 | }}
59 | />
60 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/rundown/GroupView/PlayHead.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { observer } from 'mobx-react-lite'
3 | import { store } from '../../../mobx/store'
4 | import { useMemoComputedValue } from '../../../mobx/lib'
5 |
6 | type PropsType = {
7 | groupId: string
8 | partId: string
9 | partViewDuration: number
10 | }
11 |
12 | export const PlayHead = observer(function PlayHead(props: PropsType) {
13 | const percentage: number | null = useMemoComputedValue(() => {
14 | const playhead = store.groupPlayDataStore.groups.get(props.groupId)?.playheads[props.partId]
15 |
16 | if (!playhead) return null
17 | if (!props.partViewDuration) {
18 | // The part is infinitely long
19 | if (playhead.partPauseTime !== undefined) return 0
20 | else return 100
21 | }
22 |
23 | return Math.min(1, playhead.playheadTime / props.partViewDuration) * 100
24 | }, [props.groupId, props.partId, props.partViewDuration])
25 | if (percentage === null) return null
26 |
27 | return (
28 |
24 |
35 |
36 |
37 |
29 |
30 |
31 |
32 | )
33 | })
34 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/rundown/GroupView/part/CountdownHeads/CountdownHead.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const CountDownHead: React.FC<{ timeUntilStart: number }> = ({ timeUntilStart }) => {
4 | // The time where the countdown should start to show
5 | const TIME_MAX = 30 * 1000
6 |
7 | const percentage = Math.min(100, (timeUntilStart / TIME_MAX) * 100)
8 |
9 | return (
10 |
11 | {/* {percentage} */}
12 | {/* */}
13 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/rundown/GroupView/part/CountdownHeads/CountdownHeads.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { observer } from 'mobx-react-lite'
3 | import { store } from '../../../../../mobx/store'
4 | import { CountDownHead } from './CountdownHead'
5 | import { useMemoComputedObject } from '../../../../../mobx/lib'
6 |
7 | type PropsType = {
8 | groupId: string
9 | partId: string
10 | }
11 |
12 | export const CountdownHeads = observer(function CountdownHeads(props: PropsType) {
13 | const timesUntilStart = useMemoComputedObject(() => {
14 | const playData = store.groupPlayDataStore.groups.get(props.groupId)
15 |
16 | if (!playData) return null
17 |
18 | return playData.countdowns[props.partId] || null
19 | }, [props.groupId, props.partId])
20 |
21 | return (
22 | <>
23 | {timesUntilStart &&
24 | timesUntilStart.map((timeUntilStart, index) => (
25 |
22 |
35 | )
36 | }
37 |
38 | export const FormRow = (props: { children: React.ReactNode }): JSX.Element => {
39 | return
23 | {props.label}
24 |
25 | {
29 | void copyValueToClipboard()
30 | }}
31 | >
32 | {props.value}
33 |
34 | {props.children}
40 | }
41 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/sidebar/DataRow/style.scss:
--------------------------------------------------------------------------------
1 | .data-row {
2 | .copy-to-clipboard {
3 | cursor: pointer;
4 |
5 | &:hover {
6 | text-decoration: underline;
7 | }
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/sidebar/SidebarContent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classNames from 'classnames'
3 |
4 | export const SidebarContent: React.FC<{
5 | title: string | React.ReactNode
6 | className: string
7 | children: React.ReactNode
8 | }> = (props) => {
9 | return (
10 |
11 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/apps/app/src/react/components/sidebar/resource/ResourceLibraryItemThumbnail.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FaFile, FaFileAudio, FaFileVideo } from 'react-icons/fa'
3 | import { CasparCGMedia } from '@shared/models'
4 |
5 | export const ResourceLibraryItemThumbnail: React.FC<{ resource: CasparCGMedia }> = (props) => {
6 | const { resource } = props
7 |
8 | if (resource.thumbnail) {
9 | return
12 | {typeof props.title === 'string' ? {props.title} : props.title}
13 |
14 | {props.children}
15 |