\n \n
\n )\n }\n)\n\nconst feedTileStyles = {\n container: {\n borderRadius: '8px',\n background: '#fff',\n boxShadow: '0 2px 12px rgba(0, 0, 0, 0.2)',\n overflow: 'hidden',\n transition: 'box-shadow .2s',\n display: 'flex',\n flexDirection: 'column'\n },\n topBox: {\n width: '100%',\n paddingBottom: '56.25%',\n position: 'relative',\n background: '#f3f3f3',\n backgroundPosition: 'center',\n backgroundSize: 'cover'\n },\n body: {\n fontSize: '14px',\n padding: '1.43em',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start'\n },\n title: {\n fontSize: '1.28em',\n lineHeight: '1.22',\n margin: '0 0 .2em'\n },\n description: {\n fontSize: '1em',\n lineHeight: '1.22',\n margin: '0 0 0.5em'\n },\n footer: {\n marginTop: 'auto',\n padding: '1.34em',\n borderTop: `1px solid #ececec`\n },\n noPresImage: {\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%',\n height: '100%',\n padding: '20px 0',\n '& img': {\n width: '100%',\n height: '100%',\n margin: '0',\n objectFit: 'contain'\n }\n },\n head: {\n color: 'var(--gray---)',\n font: 'var(--body--)',\n margin: '0 0 4px',\n display: 'flex'\n },\n headIcon: {\n color: 'var(--green)',\n marginLeft: '8px'\n },\n hint: {\n position: 'absolute',\n bottom: '0',\n left: '0',\n width: '100%',\n background: '#fef2a2',\n color: '#837201',\n margin: '0',\n padding: '10px 20px',\n zIndex: '100'\n },\n thumbnail: {\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%'\n }\n}\n\nconst FeedTile = memo(({ classes, data, onClick }) => {\n const history = useHistory()\n const lastWorkVersion = useSelector(state =>\n getLastWorkVersion(state, data.id)\n )\n const {\n title,\n id,\n presentation,\n description,\n actionId,\n status,\n date,\n solo\n } = useMemo(\n () => {\n const { pa_action } = data\n const { presentation, pa_session } = pa_action\n\n return {\n id: !presentation ? null : presentation.id,\n actionId: pa_action.id,\n status: pa_action.status,\n date: format(new Date(pa_session.accessible_at), 'D MMMM YYYY'),\n solo: pa_session.student_solo_session,\n image: !presentation\n ? null\n : presentation.image && presentation.image.medium_url,\n title: pa_session\n ? pa_session.title\n : !presentation\n ? ''\n : presentation.title,\n description: pa_session\n ? pa_session.description\n : !presentation\n ? ''\n : presentation.lesson_overview,\n presentation\n }\n },\n [data]\n )\n\n return (\n \n
\n \n
\n \n {status === 'peer_review' && (\n
\n Peer review
\n )}\n {!presentation && (\n\n
\n \n {date}{' '}\n {!solo && (\n
{title}
\n{description}
\n\n <>\n {status === 'student_first_interaction' && (\n <>\n {!lastWorkVersion.work && (\n history.push(`/item/${actionId}/lesson`)}\n tall\n icon={ history.push(`/item/${actionId}/review`)}\n tall\n icon={ history.push(`/item/${actionId}/review/peer`)}\n tall\n icon={ history.push(`/item/${actionId}/review`)}\n tall\n icon={
\n \n )\n})\n\nexport default injectSheet(feedTileStyles)(FeedTile)\n","import React, { useContext, useEffect } from 'react'\nimport injectSheet from 'react-jss'\nimport MainMenu from '../../main-menu/main-menu'\nimport { useDispatch, useSelector } from 'react-redux'\nimport { fetchFeedItems } from '../../../stores/feed-items/feed-items.actions'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\nimport { getFeedItemsList } from '../../../stores/feed-items/feed-items.selectors'\nimport LayoutHolder from '../discover/layout-holder/layout-holder'\nimport FeedTile, { FeedTileSkeleton } from '../../feed-tile/feed-tile'\nimport { Link } from 'react-router-dom'\nimport { fullVHExceptHeaderMin } from 'pobble-components/dist/jss-mixins'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport red from './red.png'\nimport green from './green.png'\nimport blue from './blue.png'\nimport { AppContext } from '../../app/app'\n\nconst lessonListStyles = ({ COLORS }) => ({\n container: {\n flex: '1',\n padding: '20px 0',\n display: 'grid',\n gridGap: '32px',\n gridTemplateColumns: '1fr 1fr 1fr 1fr',\n '@media (max-width: 1279px)': {\n gridTemplateColumns: '1fr 1fr 1fr',\n '& >:last-child': {\n display: 'none'\n }\n },\n '@media (max-width: 1023px)': {\n gridTemplateColumns: '1fr 1fr',\n '& >:last-child': {\n display: 'block'\n }\n },\n '@media (max-width: 767px)': {\n gridTemplateColumns: '1fr'\n }\n },\n noItems: {\n textAlign: 'center',\n margin: '0 auto 32px',\n '& h2': {\n margin: '32px 0',\n '@media (min-width: 768px)': {\n margin: '48px 0'\n }\n }\n },\n buttons: {\n display: 'grid',\n gap: '20px',\n maxWidth: '726px',\n '@media (min-width: 768px)': {\n gridTemplateColumns: '1fr 1fr 1fr'\n },\n '& > *': {\n padding: '24px 24px 48px',\n background: '#fff',\n borderRadius: '8px'\n },\n '& a, button': {\n display: 'inline-block',\n textDecoration: 'none',\n padding: '16px 24px',\n borderRadius: '4px',\n fontWeight: 'bold',\n color: '#fff'\n },\n '& img': {\n margin: '16px 0 24px',\n maxWidth: '100%',\n height: 'auto'\n }\n },\n red: {\n backgroundColor: COLORS.RED.NORMAL\n },\n green: {\n backgroundColor: COLORS.GREEN.NORMAL\n },\n blue: {\n backgroundColor: COLORS.BLUE.NORMAL\n }\n})\n\nconst LessonsList = injectSheet(lessonListStyles)(({ items, classes }) => {\n const { setSoloSessionModal } = useContext(AppContext)\n\n return items && !items.length ? (\n \n
\n ) : (\n You have no lessons yet. Let’s go and find one.
\n\n
\n \n 
\n \n Discover lessons\n \n
\n \n 
\n \n Find work\n \n
\n \n 
\n setSoloSessionModal({ opened: true })}\n className={classes.blue}>\n Start some work\n \n
\n \n {!items &&\n [...Array(4).keys()].map((_, index) => (\n
\n )\n})\n\nconst myLessonsStyles = {\n container: {\n display: 'flex',\n flexDirection: 'column',\n ...fullVHExceptHeaderMin\n },\n contentHolder: {\n flex: '1',\n alignItems: 'flex-start'\n },\n spinner: {\n alignSelf: 'center',\n justifySelf: 'center'\n }\n}\n\nconst MyLessons = ({ classes }) => {\n const dispatch = useDispatch()\n const feedItems = useSelector(getFeedItemsList)\n useEffect(\n () => {\n dispatch(fetchFeedItems()).catch(errorHandler)\n },\n [dispatch]\n )\n return (\n \n \n \n
\n )\n}\n\nexport default injectSheet(myLessonsStyles)(MyLessons)\n","import React from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './page-head.styles'\nimport classNames from 'classnames'\n\nconst PageHead = ({ classes, className, ...props }) => (\n \n)\n\nexport default injectSheet(styles)(PageHead)\n","export default {\n container: {\n height: '70px',\n boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.1)',\n alignItems: 'center',\n backgroundColor: '#fff',\n position: 'relative',\n zIndex: '20',\n padding: '20px',\n display: 'flex',\n justifyContent: 'space-between'\n }\n}\n","export default ({ COLORS, FONT_SIZES }) => ({\n content: {\n width: '355px',\n height: '242px',\n ...FONT_SIZES.HEADING_MEDIUM.STYLE,\n minWidth: '0',\n padding: '60px 40px 50px',\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n gap: '30px',\n '& > *': {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center'\n },\n '& p': {\n margin: '10px 0 0'\n }\n },\n pending: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n spinner: {\n color: COLORS.GREEN.NORMAL\n },\n button: {\n background: 'none',\n border: 'none',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n cursor: 'pointer',\n color: COLORS.TEXT.DARK_GREY.NORMAL,\n '&:active $icon': {\n background: COLORS.GREEN.FADED\n }\n },\n icon: {\n width: '100px',\n height: '100px',\n borderRadius: '100px',\n background: COLORS.GREEN.NORMAL,\n border: `4px solid #91ac15`,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: '#fff',\n fontSize: '40px'\n }\n})\n","import { apiClient } from 'pobble-components/dist/api'\n\nexport const apiCreateMedium = (id, data, params) => {\n const formData = new FormData()\n formData.append('image', data.image)\n data.order && formData.append('order', data.order)\n data.include && formData.append('include', data.include)\n return apiClient.post(`/v3/pa_work_versions/${id}/create_medium`, formData, {\n params\n })\n}\n\nexport const apiDeleteMedia = id => apiClient.delete(`/v3/media/${id}`)\n\nexport const apiGetWork = (id, params) => apiClient.get(`/v3/works/${id}`)\n\nexport const apiDeleteWork = id => apiClient.delete(`/v3/works/${id}`)\n\nexport const apiRotateMedium = (id, data, params) =>\n apiClient.put(`/v3/media/${id}/rotate`, data, { params })\n\nexport const apiReorderMedia = (id, data) =>\n apiClient.put(`/v3/works/${id}/reorder_media`, data)\n\nexport const apiReuploadWork = (id, data, params) => {\n const formData = new FormData()\n formData.append('image', data.image)\n data.order && formData.append('order', data.order)\n data.include && formData.append('include', data.include)\n return apiClient.post(`v3/pa_work_versions/${id}/reupload_work`, formData, {\n params\n })\n}\n","import React, { useState } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './add-work-dialog.styles'\nimport { Modal, ModalContent } from 'pobble-components/dist/modal'\nimport classNames from 'classnames'\nimport Spinner from 'pobble-components/dist/spinner'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faImage } from '@fortawesome/pro-solid-svg-icons/faImage'\nimport { faKeyboard } from '@fortawesome/pro-solid-svg-icons/faKeyboard'\nimport { useHistory } from 'react-router-dom'\nimport FormFile from 'pobble-components/dist/form-elements/form-file'\nimport {\n apiCreateMedium,\n apiDeleteWork,\n apiReuploadWork\n} from '../../common/api/work'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\n\nexport const useAddWork = ({\n onError,\n onSuccess,\n actionId,\n workVersionId,\n reupload\n} = {}) => {\n const [pending, setPending] = useState(false)\n const history = useHistory()\n const apiEndpoint = reupload ? apiReuploadWork : apiCreateMedium\n return {\n pending,\n type: options =>\n history.push(`/item/${options.actionId || actionId}/write`),\n upload: (files, options) => {\n setPending(true)\n return apiEndpoint(\n options.workVersionId || workVersionId,\n {\n image: files[0]\n },\n {\n include: 'pa_work_version.work'\n }\n )\n .then(res => {\n if (files.length > 1) {\n Promise.all(\n files.slice(1, files.length).map(file => {\n return apiCreateMedium(options.workVersionId || workVersionId, {\n image: file\n })\n })\n )\n .then(() => {\n history.push(`/item/${options.actionId || actionId}/work`)\n onSuccess && onSuccess()\n })\n .catch(e => {\n onError && onError()\n setPending(false)\n if (e.response.status === 400) {\n apiDeleteWork(res.data.pa_work_version.work.id)\n }\n errorHandler(e)\n })\n } else {\n history.push(`/item/${options.actionId || actionId}/work`)\n onSuccess && onSuccess()\n }\n })\n .catch(e => {\n onError && onError()\n setPending(false)\n errorHandler(e)\n })\n }\n }\n}\n\nconst AddWorkDialog = injectSheet(styles)(\n ({\n classes,\n workVersionId,\n actionId,\n requestClose,\n isOpen,\n onError,\n ...props\n }) => {\n const { pending, type, upload } = useAddWork({\n actionId,\n workVersionId,\n onError: () => {\n requestClose()\n onError && onError()\n }\n })\n return (\n <>\n \n \n
\n \n \n
\n \n )}\n \n \n \n )\n }\n)\n\nexport default injectSheet(styles)(AddWorkDialog)\n","import React, { useEffect, useState, useRef } from 'react'\nimport injectSheet from 'react-jss'\nimport {\n Presentation,\n usePresentationNavigation\n} from 'pobble-components/dist/presentation'\nimport classNames from 'classnames'\nimport { useRouteMatch, useHistory } from 'react-router-dom'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus'\nimport { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft'\nimport { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight'\nimport Bone from 'pobble-components/dist/bone'\nimport Button from 'pobble-components/dist/button'\nimport PageHead from '../../page-head/page-head'\nimport { apiGetAction } from '../../../common/api/pupil-activity'\nimport CarretLeftIcon from 'react-icons/lib/fa/caret-left'\nimport NoItemsPlaceholder from 'pobble-components/dist/no-items-placeholder'\nimport AddWorkDialog from '../../add-work-dialog/add-work-dialog'\nimport { fullVHExceptHeader } from 'pobble-components/dist/jss-mixins'\nimport ButtonElement from 'pobble-components/dist/button-element'\n\nconst headStyles = ({ COLORS }) => ({\n backLink: {\n color: COLORS.GREEN.NORMAL,\n fontWeight: 'bold',\n textDecoration: 'none',\n display: 'flex',\n alignItems: 'center',\n '&:hover': {\n color: COLORS.GREEN.FADED\n },\n '&:active': {\n color: COLORS.BLUE.NORMAL\n },\n '& svg': {\n marginRight: '.2em'\n }\n }\n})\n\nconst Head = injectSheet(headStyles)(({ classes, setModalState }) => {\n const history = useHistory()\n return (\n \n
\n \n \n
\n Add photo
\n\n
\n \n )\n}\n\nconst slidesPreviewStyles = ({ COLORS }) => ({\n container: {\n flex: '1',\n borderTop: '2px solid #D8D8D8',\n borderBottom: '2px solid #D8D8D8',\n '@media screen and (orientation:landscape)': {\n flexDirection: 'column',\n display: 'flex',\n position: 'relative',\n border: 'none',\n borderLeft: '1px solid #d8d8d8'\n }\n },\n list: {\n display: 'flex',\n background: '#fff',\n overflowX: 'auto',\n padding: '1em',\n '@media screen and (orientation:landscape)': {\n flexDirection: 'column',\n overflow: 'auto',\n flex: '1'\n }\n },\n preview: {\n cursor: 'pointer',\n width: '30%',\n flexShrink: '0',\n border: '1px solid #D8D8D8',\n marginLeft: '1em',\n borderRadius: '8px',\n overflow: 'hidden',\n '&:first-child': {\n marginLeft: '0'\n },\n '@media screen and (orientation:landscape)': {\n width: '100%',\n marginLeft: '0',\n marginTop: '1em',\n '&:first-child': {\n marginTop: '0'\n }\n }\n },\n active: {\n position: 'relative',\n borderColor: COLORS.GREEN.NORMAL,\n '&:after': {\n borderRadius: '8px',\n content: '\"\"',\n left: '0',\n top: '0',\n zIndex: '100',\n position: 'absolute',\n width: 'calc(100% - 8px)',\n height: 'calc(100% - 8px)',\n border: `4px solid ${COLORS.GREEN.NORMAL}`\n }\n },\n head: {\n fontSize: '1em',\n lineHeight: '1.2',\n background: '#fff',\n padding: '1em',\n margin: '0',\n boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.1)',\n position: 'relative',\n zIndex: '10'\n }\n})\n\nconst lessonViewStyles = ({ FONT_SIZES, COLORS }) => ({\n container: {\n display: 'flex',\n flexDirection: 'column',\n '@media screen and (orientation:landscape)': {\n ...fullVHExceptHeader\n }\n },\n content: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1',\n '@media screen and (orientation:landscape)': {\n flexDirection: 'row',\n overflow: 'hidden'\n }\n },\n main: {\n flex: '1',\n '@media screen and (orientation:landscape)': {\n overflow: 'auto'\n }\n },\n secondary: {\n display: 'flex',\n '@media screen and (orientation:landscape)': {\n width: '20%',\n height: '100%'\n }\n },\n presentationHolder: {\n position: 'relative'\n },\n controls: {\n position: 'absolute',\n right: '16px',\n bottom: '16px',\n display: 'flex',\n zIndex: '200',\n '& > button': {\n background: '#fff',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: `2px solid ${COLORS.GREEN.NORMAL}`,\n borderRadius: '32px',\n width: '32px',\n height: '32px',\n fontSize: '24px',\n color: COLORS.GREEN.NORMAL,\n marginLeft: '8px',\n '@media (min-width: 575px)': {\n width: '48px',\n height: '48px',\n fontSize: '32px',\n marginLeft: '16px'\n }\n }\n },\n presentationSkeleton: {\n width: '100%',\n paddingBottom: '56%',\n position: 'relative',\n '& > *': {\n position: 'absolute',\n left: '0',\n top: '0',\n width: '100%',\n height: '100%',\n borderRadius: '0'\n }\n },\n notFound: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n padding: '20vh 40px',\n '& > p': {\n margin: '0',\n ...FONT_SIZES.HEADING_LARGE.STYLE,\n fontWeight: 'bold'\n }\n },\n noItems: {\n '& > div': {\n maxWidth: '300px'\n },\n '& h3': {\n ...FONT_SIZES.HEADING_MEDIUM.STYLE,\n margin: '0 0 10px'\n }\n }\n})\n\nconst SlidesPreview = injectSheet(slidesPreviewStyles)(SlidesPreviewComponent)\n\nconst LessonView = injectSheet(lessonViewStyles)(({ classes }) => {\n const match = useRouteMatch()\n\n const actionId = match.params.itemId\n\n const [presentation, setPresentation] = useState(null)\n const [workVersionId, setWorkVersionId] = useState(null)\n const [modalState, setModalState] = useState({ type: null })\n const [session, setSession] = useState(null)\n\n const navigation = usePresentationNavigation(\n presentation !== 'not-found' && presentation,\n { loop: true }\n )\n\n useEffect(\n () => {\n apiGetAction(actionId, {\n include:\n 'pa_action.presentation.image,pa_action.presentation.year_groups,pa_action.presentation.year_group.order,pa_action.presentation.details,pa_action.presentation.slides,pa_action.presentation.slide.type,pa_action.presentation.slide.details,pa_action.presentation.names,pa_action.last_pa_work_version,pa_action.pa_session.details'\n }).then(res => {\n const presentation = res.data.pa_presentation_action.presentation\n presentation && navigation.setActiveSlideId(presentation.slides[0].id)\n setSession(res.data.pa_presentation_action.pa_session)\n setPresentation(presentation || 'not-found')\n setWorkVersionId(\n res.data.pa_presentation_action.last_pa_work_version.id\n )\n })\n },\n [actionId] // eslint-disable-line\n )\n\n return (\n Slides
\n\n \n {({ slides }) =>\n slides.map(slide => (\n onClick(slide.props.id)}>\n {slide}\n
\n ))\n }\n \n \n
\n {presentation === 'not-found' && (\n \n \n
\n )}\n {presentation !== 'not-found' && (\n \n
\n \n {session.title}
\n{session.description}
\n\n
\n )}\n \n {presentation &&\n navigation.activeSlideId && (\n
\n {presentation &&\n !presentation.asset && (\n \n
\n )}\n {!presentation && (\n \n \n \n \n \n
\n )}\n \n
\n )}\n \n navigation.setActiveSlideId(id)}\n presentation={presentation !== 'not-found' && presentation}\n />\n
\n )}\n \n setScreenState('page')}\n tall\n icon={
\n \n {mediaCopy.map(media => (\n
\n \n
\n ))}\n \n \n
\n \n dispatch(rotateMedium(media.id)).catch(errorHandler)}\n tall\n icon={
\n )\n})\n\nconst pageControlsStyles = {\n container: {\n '& button': {\n marginRight: '1em'\n }\n },\n longLabel: {\n display: 'none',\n '@media (min-width: 575px)': {\n display: 'inline'\n }\n }\n}\n\nconst PageControls = injectSheet(pageControlsStyles)(\n ({ classes, currentMedia, workVersionId, onDelete }) => {\n const dispatch = useDispatch()\n const addMediaRequest = useSelector(state => getAddMediaRequest(state))\n const deleteWorkRequest = useSelector(state => getDeleteWorkRequest(state))\n const { setScreenState, media } = useContext(WorkContext)\n return (\n \n {media.length > 1 && (\n <>\n setScreenState('reorder')}\n tall\n icon={\n openConfirmationDialog({\n theme: 'green',\n bodyText: 'Are you sure you want to delete this page?',\n action: onDelete\n })\n }\n tall\n icon={ {\n dispatch(\n addMedia(workVersionId, {\n image: files[0]\n })\n ).catch(errorHandler)\n }}\n accept=\"image/jpeg, image/png, .pdf\">\n
\n )\n }\n)\n\nconst workUploadStyles = {\n container: {\n minHeight: '100vh',\n backgroundColor: '#333'\n },\n imageHolder: {\n padding: '20px 20px 40px',\n '& > div': {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n '& img': {\n position: 'relative',\n zIndex: '10',\n width: '100%',\n background: '#000'\n }\n },\n controls: {\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '20px 20px 0',\n '@media (min-width: 575px)': {\n paddingTop: '30px'\n }\n },\n pageNavDesktop: {\n display: 'none',\n marginRight: 'auto',\n '@media (min-width: 575px)': {\n display: 'flex'\n }\n },\n pageNavMobile: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '-10px 0 30px',\n '@media (min-width: 575px)': {\n display: 'none'\n }\n }\n}\n\nconst WorkUpload = injectSheet(workUploadStyles)(\n memo(({ classes }) => {\n const match = useRouteMatch()\n const history = useHistory()\n const dispatch = useDispatch()\n const media = useSelector(state => getMediaListInOrder(state))\n const workVersionId = useSelector(state => getWorkVersionId(state))\n const workId = useSelector(state => getWorkId(state))\n const mediaNav = useMediaNav(media)\n const previousPagesLength = usePrevious(mediaNav.mediaLength)\n const [screenState, setScreenState] = useState('page')\n\n const onReorder = useCallback(\n ids => {\n dispatch(reorderMedia(workId, ids))\n },\n [dispatch, workId]\n )\n\n const value = useMemo(\n () => ({\n media,\n screenState,\n setScreenState,\n workId,\n onReorder\n }),\n [media, screenState, setScreenState, workId, onReorder]\n )\n\n // Update page navigation when new media added\n useEffect(\n () => {\n if (mediaNav.mediaLength && previousPagesLength) {\n if (previousPagesLength < mediaNav.mediaLength) {\n mediaNav.setActiveMediaIndex(mediaNav.mediaLength - 1)\n }\n if (mediaNav.activeMediaIndex > mediaNav.mediaLength - 1) {\n mediaNav.setActiveMediaIndex(mediaNav.mediaLength - 1)\n }\n }\n },\n [mediaNav.mediaLength] //eslint-disable-line\n )\n\n useEffect(\n () => {\n dispatch(fetchWorkUploadData(match.params.itemId))\n },\n [match.params.itemId, dispatch]\n )\n\n return (\n \n \n history.push(`/item/${match.params.itemId}/review`)}\n />\n {!!media.length && (\n <>\n {screenState === 'page' && (\n \n
\n )\n })\n)\n\nexport default WorkUpload\n","import { fullVHExceptHeader } from 'pobble-components/dist/jss-mixins'\n\nexport default {\n actionButton: {\n marginLeft: 'auto'\n },\n container: {\n ...fullVHExceptHeader,\n display: 'flex',\n flexDirection: 'column',\n background: '#333'\n },\n layout: {\n flex: '1',\n overflow: 'auto',\n paddingBottom: '2em',\n '@media (min-width: 824px)': {\n display: 'flex',\n flexDirection: 'row-reverse',\n justifyContent: 'center'\n }\n },\n pending: {\n flex: '1',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n details: {\n padding: '20px',\n '@media (min-width: 824px)': {\n flex: '1',\n paddingTop: '80px',\n maxWidth: '30em'\n }\n },\n feedback: {\n background: '#fff',\n fontSize: '14px',\n lineHeight: '1.2',\n borderRadius: '.5em',\n border: '1px solid #eee',\n padding: '0 0.7em 1em',\n '& h4': {\n margin: '0',\n fontSize: '1em',\n padding: '.4em 0',\n '& svg': {\n marginRight: '.3em'\n }\n }\n },\n feedbackBody: {\n border: '1px solid #ececec',\n borderRadius: '.3em',\n padding: '.5em'\n },\n work: {\n padding: '0 20px',\n width: '100%',\n '@media (min-width: 824px)': {\n padding: '30px 0 20px 20px',\n maxWidth: '768px'\n }\n },\n mediaNav: {\n display: 'flex',\n justifyContent: 'center',\n marginTop: '1em',\n '@media (min-width: 824px)': {\n display: 'none'\n }\n },\n mediaNavDesktop: {\n display: 'none',\n '@media (min-width: 824px)': {\n display: 'flex',\n paddingBottom: '1em'\n }\n },\n mediaLoader: {\n '@media (min-width: 824px)': {\n marginBottom: '20px'\n }\n }\n}\n","import React, { useState, useEffect, useMemo } from 'react'\nimport injectSheet from 'react-jss'\nimport styles from './teacher-feedback.styles'\nimport PageHead from '../../page-head/page-head'\nimport Button from 'pobble-components/dist/button'\nimport { useRouteMatch, useHistory } from 'react-router-dom'\nimport { apiGetAction } from '../../../common/api/pupil-activity'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\nimport Spinner from 'pobble-components/dist/spinner'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faGraduationCap } from '@fortawesome/pro-solid-svg-icons/faGraduationCap'\nimport { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus'\nimport {\n useMediaNav,\n MediaLoader,\n MediaPageNav\n} from 'pobble-components/dist/work'\nimport { apiCreateMedium } from '../../../common/api/work'\nimport FormFile from 'pobble-components/dist/form-elements/form-file'\n\nconst TeacherFeedback = ({ classes }) => {\n const match = useRouteMatch()\n const history = useHistory()\n const [pendingUpload, setPendingUpload] = useState(false)\n const [action, setAction] = useState(null)\n\n const rejectedWorkVersion = useMemo(\n () => {\n if (!action || !action.pa_work_versions.length) return null\n return action.pa_work_versions[action.pa_work_versions.length - 2]\n },\n [action]\n )\n\n const lastWorkversion = useMemo(\n () => {\n return !action\n ? null\n : action.pa_work_versions[action.pa_work_versions.length - 1]\n },\n [action]\n )\n\n const mediaNav = useMediaNav(\n rejectedWorkVersion && rejectedWorkVersion.work.media\n )\n\n useEffect(\n () => {\n apiGetAction(match.params.itemId, {\n include:\n 'pa_action.pa_work_versions,pa_action.pa_work_version.details,pa_action.pa_work_version.work.media,pa_action.pa_work_version.work.medium,pa_action.pa_work_version.work.medium.image,pa_action.pa_work_version.work.medium.details'\n })\n .catch(errorHandler)\n .then(res => setAction(res.data.pa_presentation_action))\n },\n [match.params.itemId]\n )\n\n return (\n \n \n {\n if (media.length > 1) {\n dispatch(deleteMedia(mediaNav.activeMedia.id)).catch(\n errorHandler\n )\n } else {\n dispatch(deleteWork(workId))\n .then(() => history.push('/'))\n .catch(errorHandler)\n }\n }}\n workVersionId={workVersionId}\n currentMedia={mediaNav.activeMedia}\n />\n \n \n {mediaNav.activeMedia && (\n \n \n \n
\n )}\n {screenState === 'reorder' && \n \n \n {lastWorkversion && (\n <>\n {lastWorkversion.type === 'typed' && (\n history.push(`/item/${action.id}/write`)}>\n Edit work\n \n )}\n {lastWorkversion.type === 'uploaded' && (\n {\n setPendingUpload(true)\n apiCreateMedium(lastWorkversion.id, {\n image: files[0]\n }).then(res => {\n setPendingUpload(false)\n history.push(`/item/${match.params.itemId}/work`)\n })\n }}\n accept=\"image/jpeg, image/png\">\n \n {!action && (\n
\n )\n}\n\nexport default injectSheet(styles)(TeacherFeedback)\n","import React from 'react'\n\nexport default React.createContext(null)\n","export const controlPanelStyles = {\n container: {\n fontSize: '40px'\n },\n sticky: {\n position: 'sticky',\n top: '0',\n borderRadius: '4px 4px 0 0',\n padding: '.2em'\n },\n holder: {\n display: 'flex',\n alignItems: 'center'\n }\n}\n\nexport const controlButtonStyles = ({ COLORS }, b) => ({\n button: {\n cursor: 'pointer',\n width: '1em',\n height: '1em',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: COLORS.TEXT.DARK_GREY.NORMAL,\n borderRadius: '.1em',\n '&:active': {\n background: 'rgba(0, 0, 0, 0.1)'\n }\n },\n active: {\n color: COLORS.GREEN.NORMAL\n },\n content: {\n fontSize: '.5em',\n '& svg': {\n display: 'block'\n }\n }\n})\n\nexport const separatorStyles = {\n separator: {\n width: '1px',\n backgroundColor: '#ccc',\n height: '.5em',\n margin: '0 .2em'\n }\n}\n","import React, { useContext, useMemo } from 'react'\nimport { RichUtils } from 'draft-js'\nimport EditorContext from './context'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faBold } from '@fortawesome/pro-solid-svg-icons/faBold'\nimport { faItalic } from '@fortawesome/pro-solid-svg-icons/faItalic'\nimport { faUnderline } from '@fortawesome/pro-solid-svg-icons/faUnderline'\nimport { faListUl } from '@fortawesome/pro-solid-svg-icons/faListUl'\nimport { faListOl } from '@fortawesome/pro-solid-svg-icons/faListOl'\nimport injectSheet from 'react-jss'\nimport {\n controlButtonStyles,\n controlPanelStyles,\n separatorStyles\n} from './controls.styles'\nimport classNames from 'classnames'\n\nconst ControlPanel = injectSheet(controlPanelStyles)(\n ({ children, classes, className, sticky }) => (\n \n
\n )}\n {action && (\n \n
\n )}\n \n
\n \n \n
\n
\n \n
\n \n {rejectedWorkVersion.comment}\n
\n \n
\n \n
\n \n
\n {children}
\n \n )\n)\n\nconst ControlButton = injectSheet(controlButtonStyles)(\n ({ children, action, classes, active }) => (\n \n \n \n
\n \n Have I...\n
\n )\n }\n)\n","import React from 'react'\nimport injectSheet from 'react-jss/lib/injectSheet'\n\nconst boxStyles = ({ FONT_SIZES }) => ({\n box: {\n background: '#f8f8f8',\n padding: '20px',\n overflow: 'hidden',\n borderBottom: '1px solid #ececec',\n '&:last-child': {\n border: 'none'\n },\n '& > h2': {\n margin: '-20px -20px 20px',\n padding: '20px',\n background: '#fff',\n ...FONT_SIZES.BODY_DEFAULT.STYLE,\n fontWeight: 'bold'\n },\n '@media (min-width: 575px)': {\n borderRadius: '8px',\n marginTop: '20px',\n boxShadow: '0 2px 4px rgb(0 0 0 / 10%)'\n },\n '@media (min-width: 821px)': {\n borderRadius: '0',\n marginTop: '0',\n boxShadow: 'none'\n }\n }\n})\n\nexport const ToolBox = injectSheet(boxStyles)(\n ({ title, classes, children }) => {\n return (\n - \n {data.map(item => {\n return (\n
- \n \n\n {!readOnly && (\n
{item.criterion}
\n{item.prompts}
\n\n\n )}\n \n )\n })}\n
\n
\n )\n }\n)\n","import React, { useEffect, useState } from 'react'\nimport injectSheet from 'react-jss/lib/injectSheet'\nimport {\n Presentation,\n PresentationThumbnail,\n usePresentationNavigation\n} from 'pobble-components/dist/presentation'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport { Modal, ModalContent } from 'pobble-components/dist/modal'\nimport { apiGetPresentation } from '../../common/api/presentations'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft'\nimport { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight'\nimport { faTimes } from '@fortawesome/pro-solid-svg-icons/faTimes'\nimport Bone from 'pobble-components/dist/bone'\n\nconst presentationPreviewStyles = ({ COLORS, FONT_SIZES }) => ({\n controls: {\n display: 'flex',\n alignItems: 'center',\n '& > button': {\n background: '#fff',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n border: `2px solid ${COLORS.GREEN.NORMAL}`,\n borderRadius: '32px',\n width: '32px',\n height: '32px',\n fontSize: '24px',\n color: COLORS.GREEN.NORMAL,\n '@media (min-width: 575px)': {\n width: '48px',\n height: '48px',\n fontSize: '32px'\n }\n },\n '& span': {\n width: '64px',\n textAlign: 'center'\n }\n },\n panel: {\n position: 'relative',\n padding: '20px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n ...FONT_SIZES.BODY_LARGE.STYLE\n },\n close: {\n position: 'absolute',\n right: '16px',\n top: '16px',\n zIndex: '100',\n background: '#fff',\n width: '28px',\n height: '28px',\n borderRadius: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: COLORS.GREEN.NORMAL,\n border: `1px solid ${COLORS.GREEN.NORMAL}`\n },\n skeleton: {\n paddingBottom: '56%',\n borderRadius: '0'\n }\n})\n\nconst PresentationPreview = injectSheet(presentationPreviewStyles)(\n ({ classes, id, windowSize, onClose }) => {\n const [presentation, setPresentation] = useState(null)\n\n const navigation = usePresentationNavigation(presentation, { loop: true })\n\n useEffect(\n () => {\n apiGetPresentation(id, {\n include:\n 'presentation.names,presentation.details,presentation.image,presentation.year_groups,presentation.year_group.order,presentation.year_group.names,presentation.slides,presentation.slide.type,presentation.slide.details'\n }).then(res => setPresentation(res.data.presentation))\n },\n [id]\n )\n\n return (\n {title}
\n {children}\n\n {navigation.activeSlideId && (\n
\n )}\n \n \n \n \n {navigation.slidePosition}\n \n \n
\n Click to view
\n \n\n {\n setPending(true)\n const redirect = () => history.push(`/item/${action.id}/review`)\n if (\n action.last_pa_work_version.typed_body === stateToHTML(editorState)\n ) {\n redirect()\n } else {\n apiTypeMedium(workVersionId, {\n body: stateToHTML(editorState)\n })\n .then(redirect)\n .catch(errorHandler)\n }\n }}\n />\n
\n )\n}\n\nexport default injectSheet(styles)(Write)\n","import React, { useEffect, useMemo, useRef, useState } from 'react'\nimport injectSheet from 'react-jss'\nimport PageHead from '../../page-head/page-head'\nimport Button from 'pobble-components/dist/button'\nimport { useHistory, useRouteMatch } from 'react-router-dom'\nimport {\n apiGetAction,\n apiSendToReview,\n apiSendToStudentAfterPeerReview,\n apiSetHighlightData\n} from '../../../common/api/pupil-activity'\nimport { fullVHExceptHeader } from 'pobble-components/dist/jss-mixins'\nimport { MediaLoader } from 'pobble-components/dist/work'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faPencilAlt } from '@fortawesome/pro-solid-svg-icons/faPencilAlt'\nimport { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck'\nimport { faHighlighter } from '@fortawesome/pro-solid-svg-icons/faHighlighter'\nimport { faPen } from '@fortawesome/pro-solid-svg-icons/faPen'\nimport { faEraser } from '@fortawesome/pro-solid-svg-icons/faEraser'\nimport { faUndo } from '@fortawesome/pro-solid-svg-icons/faUndo'\nimport { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane'\nimport { faCommentSmile } from '@fortawesome/pro-regular-svg-icons/faCommentSmile'\nimport ButtonElement from 'pobble-components/dist/button-element'\nimport { FONT_SIZES } from 'pobble-components/dist/theme'\nimport {\n WORK_HIGHLIGHT_SETTINGS,\n WorkHighlighter,\n useWorkHighlighter\n} from 'pobble-components/dist/work/highlighter'\nimport {\n SuccessCriteria,\n useSuccessCriteria\n} from '../../success-criteria/success-criteria'\nimport {\n useWorkReviews,\n WorkReviews\n} from 'pobble-components/dist/work/reviews'\nimport { PresentationPreviewButton } from '../../presentation-preview/presentation-preview'\nimport { ToolBox } from '../../toolbox/toolbox'\nimport { openConfirmationDialog } from 'pobble-components/dist/modal/confirmation-dialog'\nimport { errorHandler } from 'pobble-components/dist/error-handler'\nimport { Modal, ModalContent } from 'pobble-components/dist/modal'\nimport InfoModal from 'pobble-components/dist/modal/info-modal'\nimport pineapple from './pineapple.gif'\nimport { useMe } from 'pobble-components/dist/pobble-user'\n\nconst getCursorStyle = (size, color) => {\n size = size < 10 ? 10 : size\n const r = size / 2\n return `url(\"data:image/svg+xml,%3Csvg width='${size}' height='${size}' viewBox='0 0 ${size} ${size}' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='${r}' cy='${r}' r='${r}' fill='${color}' /%3E%3C/svg%3E%0A\") ${r} ${r}, auto`\n}\n\nconst finishModalStyles = {\n content: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n textAlign: 'center',\n fontSize: '20px',\n lineHeight: '1.2',\n padding: '0 0 40px',\n borderTopLeftRadius: '8px',\n borderTopRightRadius: '8px',\n overflow: 'hidden',\n width: '100%',\n '@media (min-width: 575px)': {\n width: '500px'\n },\n '& img': {\n marginBottom: '40px',\n width: '100%'\n },\n '& p': {\n margin: '0'\n },\n '& button': {\n marginTop: '2em'\n }\n }\n}\n\nconst PeerRevieweWarningModal = ({ peerReviewModeProps }) => {\n return (\n \n {action &&\n action.presentation && (\n
\n \n {action &&\n action.presentation && (\n \n \n )}\n {successCriteriaProps.data &&\n !!successCriteriaProps.data.length && (\n \n \n )}\n
\n )}\n \n {editorState ? (\n {\n setEditorState(newState)\n }}\n />\n ) : (\n
\n \n Please, add a comment before returning\n
\n your work back to peer\n
\n Well done!\n
\n You've submitted your work.\n
\n It has been sent to your teacher.\n
\n Well done!\n
\n You've sent your work for peer review.\n
\n Well done!\n
\n You've reviewed your peer's work.\n
\n
\n )\n }\n)\n\nconst headStyles = ({ COLORS }) => ({\n container: {\n '& > *': {\n flexShrink: '0'\n }\n },\n activeFeedback: {\n color: `${COLORS.GREEN.NORMAL} !important`,\n transition: 'none !important'\n }\n})\n\nconst Head = injectSheet(headStyles)(\n ({\n action,\n classes,\n onEdit,\n onSend,\n pending,\n onComment,\n children,\n peerReviewModeProps\n }) => {\n const nextStepIsPeerReview =\n action &&\n action.pa_session.peer_review &&\n action.status === 'student_first_interaction'\n return (\n <>\n - \n
- \n
\n \n \n - \n
\n \n \n - \n
\n \n \n - \n
\n \n \n
\n
\n )}\n {showToolSettings === 'pen' && (\n - \n {WORK_HIGHLIGHT_SETTINGS.markerColors.map(color => {\n return (\n
- \n
\n )}\n \n \n )\n })}\n
- \n {WORK_HIGHLIGHT_SETTINGS.markerSizes.map(size => {\n return (\n
- \n
\n setShowToolSettings(false)}>\n Close\n \n
\n \n
\n )}\n - \n {WORK_HIGHLIGHT_SETTINGS.penColors.map(color => {\n return (\n
- \n
\n )}\n \n \n )\n })}\n
- \n {WORK_HIGHLIGHT_SETTINGS.penSizes.map(size => {\n return (\n
- \n
\n setShowToolSettings(false)}>\n Close\n \n
\n \n {\n history.push(\n `/item/${action.id}/${\n action.last_pa_work_version.type === 'typed'\n ? 'write'\n : 'work'\n }`\n )\n }\n }>\n
\n {peerReviewModeProps.enabled && (\n \n highlighter.undo()} />\n
\n \n \n
\n \n {peerReviewModeProps.enabled && (\n \n \n )}\n
\n \n You are reviewing your peer's work\n
\n )}\n \n {action &&\n action.presentation && (\n \n \n )}\n {successCriteriaProps.data &&\n !!successCriteriaProps.data.length && (\n \n \n )}\n
\n {workReviewsProps.reviews && (\n \n {action && (\n \n {action.last_pa_work_version.work &&\n action.last_pa_work_version.work.media.map(medium => {\n return (\n
\n )}\n \n {\n apiSetHighlightData(medium.id, {\n data: h.getSaveData()\n })\n }}\n onAction={highlighter.onAction}\n canvasRef={el => (canvasRefs.current[medium.id] = el)}\n canvasWidth={medium.width}\n canvasHeight={medium.height}\n controls={controls}\n />\n
\n )\n })}\n \n
\n )}\n \n \n \n
\n \n