From 27fcd535efe17cb4b3742bbe2c44a3d34acf0212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 5 Nov 2019 03:05:39 +0100 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=94=A8=20Switch=20LiveInfo=20to=20use?= =?UTF-8?q?=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/overmind/effects/live/index.ts | 2 +- .../app/overmind/namespaces/live/actions.ts | 45 ++-- .../namespaces/live/liveMessageOperators.ts | 9 +- .../items/Live/{ => LiveInfo}/Countdown.js | 0 .../items/Live/LiveInfo/User/elements.ts | 44 ++++ .../items/Live/LiveInfo/User/index.tsx | 47 +++++ .../Workspace/items/Live/LiveInfo/elements.ts | 136 ++++++++++++ .../Live/{LiveInfo.tsx => LiveInfo/index.tsx} | 196 ++++++++---------- .../Editor/Workspace/items/Live/User.tsx | 49 ----- .../Editor/Workspace/items/Live/elements.ts | 175 ---------------- .../Editor/Workspace/items/Live/index.tsx | 44 +--- .../Editor/Workspace/screens/Live/LiveNow.tsx | 13 +- packages/common/src/types/index.ts | 2 +- 13 files changed, 360 insertions(+), 402 deletions(-) rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/{ => LiveInfo}/Countdown.js (100%) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/elements.ts create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts rename packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/{LiveInfo.tsx => LiveInfo/index.tsx} (62%) delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx delete mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts index 1e0cebd7345..61c79f6373d 100755 --- a/packages/app/src/app/overmind/effects/live/index.ts +++ b/packages/app/src/app/overmind/effects/live/index.ts @@ -269,7 +269,7 @@ export default new (class Live { }); } - sendLiveMode(mode: string) { + sendLiveMode(mode: RoomInfo['mode']) { return this.send('live:mode', { mode, }); diff --git a/packages/app/src/app/overmind/namespaces/live/actions.ts b/packages/app/src/app/overmind/namespaces/live/actions.ts index e590b4b157f..2304e34b10d 100755 --- a/packages/app/src/app/overmind/namespaces/live/actions.ts +++ b/packages/app/src/app/overmind/namespaces/live/actions.ts @@ -1,4 +1,8 @@ -import { LiveMessage, LiveMessageEvent } from '@codesandbox/common/lib/types'; +import { + LiveMessage, + LiveMessageEvent, + RoomInfo, +} from '@codesandbox/common/lib/types'; import { Action, AsyncAction, Operator } from 'app/overmind'; import { withLoadApp } from 'app/overmind/factories'; import getItems from 'app/overmind/utils/items'; @@ -176,9 +180,9 @@ export const onSelectionChanged: Action = ( } }; -export const onModeChanged: Action<{ mode: string }> = ( - { state, effects }, - { mode } +export const onModeChanged: Action = ( + { efects, state }, + mode ) => { if (state.live.isOwner && state.live.roomInfo) { state.live.roomInfo.mode = mode; @@ -186,31 +190,29 @@ export const onModeChanged: Action<{ mode: string }> = ( } }; -export const onAddEditorClicked: Action<{ - liveUserId: string; -}> = ({ state, effects }, { liveUserId }) => { +export const onAddEditorClicked: Action = ( + { effects, state }, + liveUserId +) => { if (!state.live.roomInfo) { return; } + state.live.roomInfo.editorIds.push(liveUserId); effects.live.sendEditorAdded(liveUserId); }; -export const onRemoveEditorClicked: Action = ( - { state, effects }, - { liveUserId, data } +export const onRemoveEditorClicked: Action = ( + { effects, state }, + liveUserId ) => { - const userId = liveUserId || data.editor_user_id; - if (!state.live.roomInfo) { return; } const editors = state.live.roomInfo.editorIds; - const newEditors = editors.filter(id => id !== userId); - - state.live.roomInfo.editorIds = newEditors; + state.live.roomInfo.editorIds = editors.filter(id => id !== liveUserId); effects.live.sendEditorRemoved(liveUserId); }; @@ -249,9 +251,10 @@ export const onChatEnabledChange: Action = ( } }; -export const onFollow: Action<{ - liveUserId: string; -}> = ({ state, effects, actions }, { liveUserId }) => { +export const onFollow: Action = ( + { actions, effects, state }, + liveUserId +) => { if (!state.live.roomInfo) { return; } @@ -259,11 +262,13 @@ export const onFollow: Action<{ effects.analytics.track('Follow Along in Live'); state.live.followingUserId = liveUserId; - const user = state.live.roomInfo.users.find(u => u.id === liveUserId); + const user = state.live.roomInfo.users.find(({ id }) => id === liveUserId); if (user && user.currentModuleShortid && state.editor.currentSandbox) { const { modules } = state.editor.currentSandbox; - const module = modules.find(m => m.shortid === user.currentModuleShortid); + const module = modules.find( + ({ shortid }) => shortid === user.currentModuleShortid + ); actions.editor.moduleSelected({ id: module ? module.id : undefined, diff --git a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts b/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts index 4a28a5fdfac..a040fd1a591 100644 --- a/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts +++ b/packages/app/src/app/overmind/namespaces/live/liveMessageOperators.ts @@ -5,13 +5,15 @@ import { LiveMessage, LiveUser, Module, + RoomInfo, UserSelection, } from '@codesandbox/common/lib/types'; import { NotificationStatus } from '@codesandbox/notifications/lib/state'; -import { Operator } from 'app/overmind'; import { camelizeKeys } from 'humps'; import { json, mutate } from 'overmind'; +import { Operator } from 'app/overmind'; + export const onJoin: Operator> = mutate(({ state, actions }, { _isOwnMessage, data }) => { + mode: RoomInfo['mode']; +}>> = mutate(({ actions, state }, { _isOwnMessage, data }) => { if (!state.live.roomInfo) { return; } @@ -428,6 +430,7 @@ export const onLiveMode: Operator` + width: 26px; + height: 26px; + border-radius: 2px; + border-left: 2px solid ${({ borderColor }) => borderColor}; + + margin-right: 0.5rem; +`; + +export const Status = styled.div` + font-size: 0.75rem; + color: rgba(255, 255, 255, 0.6); +`; + +export const UserContainer = styled.div<{ isCurrentUser: boolean }>` + ${({ isCurrentUser, theme }) => css` + ${delay()}; + display: flex; + align-items: center; + margin: 0.5rem 0; + color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; + + ${isCurrentUser && + css` + color: white; + `}; + + &:first-child { + margin-top: 0; + } + `}; +`; + +export const UserName = styled.div` + font-weight: 600; + font-size: 0.875rem; +`; + +export const UserNameContainer = styled.div` + flex: 1; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx new file mode 100644 index 00000000000..66bcd0ff7ff --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/User/index.tsx @@ -0,0 +1,47 @@ +import { LiveUser } from '@codesandbox/common/lib/types'; +import React, { FunctionComponent, ReactNode } from 'react'; + +import { useOvermind } from 'app/overmind'; + +import { + ProfileImage, + Status, + UserContainer, + UserName, + UserNameContainer, +} from './elements'; + +type Props = { + user: LiveUser; + type: string; + sideView: ReactNode; +}; +export const User: FunctionComponent = ({ user, type, sideView }) => { + const { + state: { + live: { liveUserId, roomInfo }, + }, + } = useOvermind(); + + const metaData = roomInfo.users.find(({ id }) => id === user.id); + const [r, g, b] = metaData?.color || [0, 0, 0]; + const isCurrentUser = user.id === liveUserId; + + return ( + + + + + {user.username} + + {type && {`${type}${isCurrentUser && ' (you)'}`}} + + + {sideView} + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts new file mode 100644 index 00000000000..c832f9a440a --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/elements.ts @@ -0,0 +1,136 @@ +import InputBase from '@codesandbox/common/lib/components/Input'; +import delay from '@codesandbox/common/lib/utils/animation/delay-effect'; +import styled, { css } from 'styled-components'; + +export const Container = styled.div` + ${({ theme }) => css` + ${delay()}; + color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; + box-sizing: border-box; + `}; +`; + +export const Title = styled.div` + color: #fd2439fa; + font-weight: 800; + display: flex; + align-items: center; + vertical-align: middle; + + padding: 0 1rem 0.5rem; + + svg { + margin-right: 0.25rem; + } +`; + +export const Input = styled(InputBase)` + width: calc(100% - 1.5rem); + margin: 0 0.75rem; + font-size: 0.875rem; +`; + +export const SubTitle = styled.div` + text-transform: uppercase; + font-weight: 700; + color: rgba(255, 255, 255, 0.5); + + padding-left: 1rem; + font-size: 0.875rem; +`; + +export const Users = styled.div` + ${({ theme }) => css` + padding: 0 1rem 0.25rem; + color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; + `}; +`; + +export const ModeSelect = styled.div` + position: relative; + margin: 0.5rem 1rem; +`; + +export const Mode = styled.button<{ selected: boolean }>` + ${({ onClick, selected }) => css` + display: block; + text-align: left; + transition: 0.3s ease opacity; + padding: 0.5rem 1rem; + color: white; + border-radius: 4px; + width: 100%; + font-size: 1rem; + + font-weight: 600; + border: none; + outline: none; + background-color: transparent; + cursor: ${onClick ? 'pointer' : 'inherit'}; + opacity: ${selected ? 1 : 0.6}; + margin: 0.25rem 0; + + z-index: 3; + + ${onClick && + css` + &:hover { + opacity: 1; + } + `}; + `}; +`; + +export const ModeDetails = styled.div` + ${({ theme }) => css` + font-size: 0.75rem; + color: ${theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; + margin-top: 0.25rem; + `}; +`; + +export const ModeSelector = styled.div<{ i: number }>` + ${({ i }) => css` + transition: 0.3s ease transform; + position: absolute; + left: 0; + right: 0; + top: 0; + height: 48px; + + border: 2px solid rgba(253, 36, 57, 0.6); + background-color: rgba(253, 36, 57, 0.6); + border-radius: 4px; + z-index: -1; + + transform: translateY(${i * 55}px); + `}; +`; + +export const PreferencesContainer = styled.div` + margin: 1rem; + display: flex; +`; + +export const Preference = styled.div` + ${({ theme }) => css` + flex: 1; + font-weight: 400; + color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; + align-items: center; + justify-content: center; + font-size: 0.875rem; + `}; +`; + +export const IconContainer = styled.div` + ${({ theme }) => css` + transition: 0.3s ease color; + color: ${theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; + cursor: pointer; + + &:hover { + color: white; + } + `}; +`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx similarity index 62% rename from packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx rename to packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx index c228a5c74b3..d24fe5e34ef 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/LiveInfo/index.tsx @@ -1,89 +1,85 @@ import Margin from '@codesandbox/common/lib/components/spacing/Margin'; import Switch from '@codesandbox/common/lib/components/Switch'; import Tooltip from '@codesandbox/common/lib/components/Tooltip'; -import { RoomInfo } from '@codesandbox/common/lib/types'; import { sortBy } from 'lodash-es'; -import React from 'react'; +import React, { FocusEvent, FunctionComponent } from 'react'; import FollowIcon from 'react-icons/lib/io/eye'; import UnFollowIcon from 'react-icons/lib/io/eye-disabled'; import AddIcon from 'react-icons/lib/md/add'; import RecordIcon from 'react-icons/lib/md/fiber-manual-record'; import RemoveIcon from 'react-icons/lib/md/remove'; -import { Description, WorkspaceInputContainer } from '../../elements'; +import { useOvermind } from 'app/overmind'; + +import { Description, WorkspaceInputContainer } from '../../../elements'; + +import LiveButton from '../LiveButton'; + import Countdown from './Countdown'; +import { User } from './User'; + import { Container, IconContainer, + Input, Mode, ModeDetails, ModeSelect, ModeSelector, Preference, PreferencesContainer, - StyledInput, SubTitle, Title, Users, } from './elements'; -import LiveButton from './LiveButton'; -import { User } from './User'; -interface ILiveInfoProps { - roomInfo: RoomInfo; - isOwner: boolean; - isTeam: boolean; - ownerIds: Array; - setMode: ({ mode: string }) => void; - addEditor: ({ liveUserId: string }) => void; - removeEditor: ({ liveUserId: string }) => void; - currentUserId: string; - reconnecting: boolean; - onSessionCloseClicked: () => void; - notificationsHidden: boolean; - toggleNotificationsHidden: () => void; - chatEnabled: boolean; - toggleChatEnabled: () => void; - setFollowing: ({ liveUserId: string }) => void; - followingUserId: string; -} - -const LiveInfo: React.FunctionComponent = ({ - roomInfo, - roomInfo: { users, editorIds, startTime, roomId, mode } = {}, - isOwner, - isTeam, - ownerIds, - setMode, - addEditor, - removeEditor, - currentUserId, - reconnecting, - onSessionCloseClicked, - notificationsHidden, - toggleNotificationsHidden, - chatEnabled, - toggleChatEnabled, - setFollowing, - followingUserId, -}) => { - const select: React.ChangeEventHandler = e => { - e.target.select(); - }; +const noop = () => undefined; - const owners = users.filter(u => ownerIds.includes(u.id)); +export const LiveInfo: FunctionComponent = () => { + const { + actions: { + live: { + onAddEditorClicked, + onChatEnabledChange, + onFollow, + onModeChanged, + onRemoveEditorClicked, + onSessionCloseClicked, + onToggleNotificationsHidden, + }, + }, + state: { + live: { + followingUserId, + isOwner, + isTeam, + liveUserId, + notificationsHidden, + reconnecting, + roomInfo: { + chatEnabled, + editorIds, + mode, + ownerIds, + roomId, + startTime, + users, + }, + }, + }, + } = useOvermind(); + const select = ({ target }: FocusEvent) => target.select(); + const owners = users.filter(({ id }) => ownerIds.includes(id)); const editors = sortBy( - users.filter(u => editorIds.includes(u.id) && !ownerIds.includes(u.id)), + users.filter(({ id }) => editorIds.includes(id) && !ownerIds.includes(id)), 'username' ); - const otherUsers = sortBy( - users.filter(u => !ownerIds.includes(u.id) && !editorIds.includes(u.id)), + users.filter(({ id }) => !ownerIds.includes(id) && !editorIds.includes(id)), 'username' ); - - const liveMessage = (() => { + const getLiveMessage = () => { if (isTeam) { return 'Your team is live!'; } @@ -93,7 +89,7 @@ const LiveInfo: React.FunctionComponent = ({ } return 'You are live!'; - })(); + }; return ( @@ -110,25 +106,25 @@ const LiveInfo: React.FunctionComponent = ({ 'Reconnecting...' ) : ( <> - {liveMessage} + {getLiveMessage()} )} -
{startTime != null && }
+ +
{startTime !== null && }
+ Share this link with others to invite them to the session: - + + {isOwner && !isTeam && ( onSessionCloseClicked()} showIcon={false} /> @@ -140,43 +136,51 @@ const LiveInfo: React.FunctionComponent = ({ {isOwner && ( Chat enabled + onChatEnabledChange(!chatEnabled)} + right={chatEnabled} secondary + small /> )} + Hide notifications + onToggleNotificationsHidden()} + right={notificationsHidden} secondary + small /> Live Mode + + setMode({ mode: 'open' }) : undefined} + onClick={isOwner ? () => onModeChanged('open') : noop} selected={mode === 'open'} >
Open
+ Everyone can edit + setMode({ mode: 'classroom' }) : undefined} + onClick={isOwner ? () => onModeChanged('classroom') : noop} selected={mode === 'classroom'} >
Classroom
+ Take control over who can edit @@ -185,30 +189,23 @@ const LiveInfo: React.FunctionComponent = ({ {owners && ( Owners + {owners.map(owner => ( {followingUserId === owner.id ? ( - setFollowing({ liveUserId: null })} - /> + onFollow(null)} /> ) : ( - - setFollowing({ liveUserId: owner.id }) - } - /> + onFollow(owner.id)} /> )} @@ -223,42 +220,34 @@ const LiveInfo: React.FunctionComponent = ({ {editors.length > 0 && mode === 'classroom' && ( Editors + {editors.map(user => ( - {user.id !== currentUserId && ( + {user.id !== liveUserId && ( {followingUserId === user.id ? ( - setFollowing({ liveUserId: null })} - /> + onFollow(null)} /> ) : ( - - setFollowing({ liveUserId: user.id }) - } - /> + onFollow(user.id)} /> )} )} + {isOwner && mode === 'classroom' && ( - removeEditor({ liveUserId: user.id }) - } + onClick={() => onRemoveEditorClicked(user.id)} /> @@ -278,37 +267,30 @@ const LiveInfo: React.FunctionComponent = ({ {otherUsers.length ? ( otherUsers.map(user => ( - {mode !== 'classroom' && user.id !== currentUserId && ( + {mode !== 'classroom' && user.id !== liveUserId && ( {followingUserId === user.id ? ( - setFollowing({ liveUserId: null })} - /> + onFollow(null)} /> ) : ( - - setFollowing({ liveUserId: user.id }) - } - /> + onFollow(user.id)} /> )} )} + {isOwner && mode === 'classroom' && ( addEditor({ liveUserId: user.id })} + onClick={() => onAddEditorClicked(user.id)} /> @@ -334,5 +316,3 @@ const LiveInfo: React.FunctionComponent = ({ ); }; - -export default LiveInfo; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx deleted file mode 100644 index 94689771b51..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/User.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { LiveUser, RoomInfo } from '@codesandbox/common/lib/types'; -import { useOvermind } from 'app/overmind'; -import React from 'react'; - -import { ProfileImage, Status, UserContainer, UserName } from './elements'; - -interface Props { - user: LiveUser; - type: string; - sideView: React.ReactNode; - roomInfo: RoomInfo; - currentUserId: string; -} - -export const User: React.FC = ({ - user, - type, - sideView, - roomInfo, - currentUserId, -}) => { - // We need to observe the user and roomInfo - useOvermind(); - - const metaData = roomInfo.users.find(u => u.id === user.id); - const [r, g, b] = metaData ? metaData.color : [0, 0, 0]; - - const isCurrentUser = user.id === currentUserId; - - return ( - - -
- {user.username} - {type && ( - - {type} - {isCurrentUser && ' (you)'} - - )} -
- {sideView} - - ); -}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts deleted file mode 100644 index a604996149b..00000000000 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/elements.ts +++ /dev/null @@ -1,175 +0,0 @@ -import Input from '@codesandbox/common/lib/components/Input'; -import delay from '@codesandbox/common/lib/utils/animation/delay-effect'; -import styled from 'styled-components'; - -export const Container = styled.div` - ${delay()}; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; - box-sizing: border-box; -`; - -export const Title = styled.div` - color: #fd2439fa; - font-weight: 800; - display: flex; - align-items: center; - vertical-align: middle; - - padding: 0.5rem 1rem; - padding-top: 0; - - svg { - margin-right: 0.25rem; - } -`; - -export const StyledInput = styled(Input)` - width: calc(100% - 1.5rem); - margin: 0 0.75rem; - font-size: 0.875rem; -`; - -export const SubTitle = styled.div` - text-transform: uppercase; - font-weight: 700; - color: rgba(255, 255, 255, 0.5); - - padding-left: 1rem; - font-size: 0.875rem; -`; - -export const Users = styled.div` - padding: 0.25rem 1rem; - padding-top: 0; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; -`; - -export const ModeSelect = styled.div` - position: relative; - margin: 0.5rem 1rem; -`; - -interface IModeProps { - selected: boolean; -} - -export const Mode = styled.button` - display: block; - text-align: left; - transition: 0.3s ease opacity; - padding: 0.5rem 1rem; - color: white; - border-radius: 4px; - width: 100%; - font-size: 1rem; - - font-weight: 600; - border: none; - outline: none; - background-color: transparent; - cursor: ${props => (props.onClick ? 'pointer' : 'inherit')}; - color: white; - opacity: ${(props: IModeProps) => (props.selected ? 1 : 0.6)}; - margin: 0.25rem 0; - - z-index: 3; - - ${props => - props.onClick && - ` - &:hover { - opacity: 1; - }`}; -`; - -export const ModeDetails = styled.div` - font-size: 0.75rem; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'}; - margin-top: 0.25rem; -`; - -interface IModeSelectorProps { - i: number; -} - -export const ModeSelector = styled.div` - transition: 0.3s ease transform; - position: absolute; - left: 0; - right: 0; - top: 0; - height: 48px; - - border: 2px solid rgba(253, 36, 57, 0.6); - background-color: rgba(253, 36, 57, 0.6); - border-radius: 4px; - z-index: -1; - - transform: translateY(${(props: IModeSelectorProps) => props.i * 55}px); -`; - -export const PreferencesContainer = styled.div` - margin: 1rem; - display: flex; -`; - -export const Preference = styled.div` - flex: 1; - font-weight: 400; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; - align-items: center; - justify-content: center; - font-size: 0.875rem; -`; - -export const IconContainer = styled.div` - transition: 0.3s ease color; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; - cursor: pointer; - - &:hover { - color: white; - } -`; - -export const Status = styled.div` - font-size: 0.75rem; - color: rgba(255, 255, 255, 0.6); -`; - -export const UserContainer = styled.div<{ isCurrentUser: boolean }>` - ${delay()}; - display: flex; - align-items: center; - margin: 0.5rem 0; - color: ${props => - props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'}; - ${props => - props.isCurrentUser && - ` - color: white; - `}; - - &:first-child { - margin-top: 0; - } -`; - -export const ProfileImage = styled.img<{ borderColor: string }>` - width: 26px; - height: 26px; - border-radius: 2px; - border-left: 2px solid ${({ borderColor }) => borderColor}; - - margin-right: 0.5rem; -`; - -export const UserName = styled.div` - font-weight: 600; - font-size: 0.875rem; -`; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx index 4fffdb98941..c7b289f3e7b 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Live/index.tsx @@ -12,39 +12,20 @@ import { import { More } from '../More'; import LiveButton from './LiveButton'; -import LiveInfo from './LiveInfo'; +import { LiveInfo } from './LiveInfo'; export const Live: FunctionComponent = () => { const { actions: { - live: { - createLiveClicked, - onAddEditorClicked, - onChatEnabledChange, - onFollow, - onModeChanged, - onRemoveEditorClicked, - onSessionCloseClicked, - onToggleNotificationsHidden, - }, + live: { createLiveClicked }, }, state: { editor: { currentSandbox: { id, owned }, isAllModulesSynced, }, - live: { - followingUserId, - isLive, - isLoading, - isOwner, - isTeam, - liveUserId, - notificationsHidden, - reconnecting, - roomInfo, - }, isLoggedIn, + live: { isLive, isLoading }, }, } = useOvermind(); const showPlaceHolder = (!isLive && !owned) || !isLoggedIn; @@ -66,24 +47,7 @@ export const Live: FunctionComponent = () => { return (
{isLive ? ( - onChatEnabledChange(!roomInfo.chatEnabled)} - toggleNotificationsHidden={onToggleNotificationsHidden} - /> + ) : ( <> diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx index f49c69fb6e4..bec883b73d3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx @@ -18,6 +18,7 @@ import { Switch, } from '@codesandbox/components'; import Tooltip from '@codesandbox/common/lib/components/Tooltip'; +import { RoomInfo } from '@codesandbox/common/lib/types'; import { useOvermind } from 'app/overmind'; @@ -135,7 +136,9 @@ export const LiveNow = () => {