\n {/* Open video */}\n \n \n \n \n \n \n \n \n \n \n {viewable.captions.length == 0 ? (\n
\n );\n};\n\nconst ShowJsonData = ({ jsonData, title, onChange }) => {\n return (\n No captions
\n ) : (\n\n {viewable.captions.map((caption) => {\n return (\n
\n )}\n \n \n CaptionFlow\n \n
\n );\n })}\n {caption.text ? \"Caption saved\" : \"Caption not saved\"}
\n \n Edit captions\n \n\n {viewable.captionKey ? \"Caption rendered\" : \"Caption not rendered\"}\n
\n \n
\n );\n};\n\nconst AdminInstance = () => {\n const params = useParams();\n const [pollInterval, setPollInterval] = useState(1000);\n const vars = { id: params.instanceId };\n\n let localData = useRef({});\n\n const { loading, error, data, refetch } = useQuery{title}
\nError
;\n }\n\n if (data?.workflowInstance?.viewable != null && pollInterval < 10000) {\n setPollInterval(10000);\n }\n\n const parentData = data.workflowInstance?.parent?.originalData\n ? JSON.parse(data.workflowInstance.parent.originalData)\n : {};\n\n return (\n \n \n restartWorkflow({\n variables: {\n id: params.instanceId,\n data: localData.current[\"data\"] || null,\n },\n })\n }\n type=\"button\"\n className=\"relative inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-700 active:bg-indigo-700\"\n >\n Restart Workflow\n \n\n
\n );\n};\n\nconst Action = ({ action, titlePrefix, instance }) => {\n const bgColor =\n action.status == \"Done\"\n ? \"bg-green-200\"\n : action.status == \"Failed\"\n ? \"bg-red-booboo\"\n : \"bg-white\";\n\n const data = JSON.parse(instance.originalData);\n return (\n \n {data.workflowInstance.videoWorkflow.title} -{\" \"}\n {data.workflowInstance.status}\n
\n\n
\n \n
\n \n {data.workflowInstance.viewable ? (\n
\n No viewable
\n )}\n\n {data.workflowInstance.parent ? (\n
\n \n \n
\n ) : (\n \n )}\n Parent
\n\n {parentData[\"resolution\"]} :{\" \"}\n {data.workflowInstance.parent.status}\n
\n \n\n {data.workflowInstance.children &&\n data.workflowInstance.children.length > 0 ? (\n
\n \n
\n ) : (\n \n )}\n Children
\n {data.workflowInstance.children.map((child) => {\n const data = JSON.parse(child.originalData);\n return (\n \n\n {data[\"resolution\"]} : {child.status}\n
\n \n );\n })}\n\n {data.workflowInstance.rendering ? (\n
\n No rendering
\n )}\n\n {data.workflowInstance.originalData ? (\n {\n localData.current[\"data\"] = value;\n }}\n />\n ) : (\n \n )}\n {data.workflowInstance.data ? (\n {}}\n />\n ) : (\n \n )}\n
\n \n
\n );\n};\n\nconst PreRenderingAction = ({ action, instance }) => {\n return (\n \n {titlePrefix}: {action.title}\n
\n\n {data.subtitles == \"no\" && action.title == \"CreateCaptions\" ? (\n Captions disabled\n ) : (\n <>\n Created: {timeDistanceInWords(action.createdAt)}\n \n Started:{\" \"}\n {action.startedAt ? timeDistanceInWords(action.startedAt) : \"no\"}\n \n \n Done: {action.doneAt ? timeDistanceInWords(action.doneAt) : \"no\"}\n \n \n Failed:{\" \"}\n {action.failedAt ? timeDistanceInWords(action.failedAt) : \"no\"}\n \n Status: {action.status} \n {action.title == \"CreateCaptions\" ? (\n \n ) : (\n \n )}\n \n )}\n
\n \n {workflowInstance.preRenderingActions.map((action) => {\n return (\n
\n );\n};\n\nexport default AdminInstance;\n", "import React, { useRef, useEffect } from \"react\";\nimport { render } from \"react-dom\";\nimport AceEditor from \"react-ace\";\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { Buffer } from 'buffer';\n\n// @ts-ignore\nwindow.Buffer = Buffer;\n\n// This is the default theme, so it is always imported\nimport \"ace-builds/src-noconflict/theme-monokai\";\n\n\nexport default ({ mode, value, update, theme = 'monokai', width = '100%', height = '400px', liquidScope = null }) => {\n const name = useRef(uuidv4())\n const ref = useRef(null);\n const dropkiq = useRef(null);\n\n console.log(\"Liquid scope: \")\n console.log(liquidScope)\n\n\n useEffect(() => {\n if(ref.current && liquidScope && !dropkiq.current) {\n window.editor = ref.current\n var licenseKey = \"894f2a10-3b3f-013b-0a85-4a36325215e0\";\n console.log(\"Editor: \", ref.current.editor)\n console.log(\"Running setup\")\n dropkiq.current = new DropkiqUIFromScope(ref.current.editor, liquidScope, licenseKey).dropkiqUI();\n const keyboardHandler = {\n handleKeyboard: function(editor, index, name, keyCode){\n console.log(\"Handle keyboard\")\n if(dropkiq.current.menuIsOpen() && [27, 38, 40, 9, 13].includes(keyCode)){\n return {command:\"null\", passEvent:false};\n }\n }\n }\n ref.current.editor.keyBinding.addKeyboardHandler(keyboardHandler);\n }\n }, [])\n\n\n return (\n \n \n
\n )\n}\n\nconst AccountInput = ({id, label, defaultValue, options, allowEmpty, onChange, emptyOption = '[none]', optionTitleField = (field) => field.title}) => {\n const [search, setSearch] = useState(\"\")\n const showOptions = search.length > 0 ? options.filter((account) => account.title.toLowerCase().includes(search.toLowerCase())) : options\n return (\n \n
\n \n \n
\n \n \n
\n )\n}\n\nconst TeamInput = ({id, label, defaultValue, allowEmpty, onChange, emptyOption = '[none]', account}) => {\n const [search, setSearch] = useState(\"\")\n const {loading, error, data, refetch } = useQuery\n
\n \n \n show?.title ?? ''}\n value={search} onChange={(event) => setSearch(event.target.value)} />\n \n {showOptions.map((account) => (\n \n {account.title}\n \n ))}\n \n \n
\n Error
\n }\n return (\n \n \n
\n )\n}\n\nconst UserInput = ({id, label, defaultValue, allowEmpty, onChange, emptyOption = '[none]', account}) => {\n const [search, setSearch] = useState(\"\")\n const {loading, error, data, refetch } = useQuery\n
\n \n \n show?.title ?? ''} value={search} onChange={(event) => setSearch(event.target.value)} />\n \n {!loading && data.account.teams.map((team) => (\n \n {team.title}\n \n ))}\n \n \n
\n Error
\n }\n return (\n \n \n
\n )\n}\n\n\nconst FacebookPageShow = () => {\n const params = useParams()\n const [selectedAccount, setSelectedAccount] = useState(null)\n const [selectedTeam, setSelectedTeam] = useState(null)\n const [selectedUser, setSelectedUser] = useState(null)\n const vars = {id:params.pageId}\n\n const {loading, error, data, refetch } = useQuery\n
\n \n \n (show?.name || show?.email) ?? '' } value={search} onChange={(event) => setSearch(event.target.value)} />\n \n {!loading && data.account.users.items.map((user) => (\n \n {user.name || user.email}\n \n ))}\n \n \n
\n Error
\n }\n\n return (\n \n
\n\n )\n}\n\n\nconst FacebookDashboard = () => {\n const [limit, setLimit] = useState(10)\n const [page, setPage] = useState(1)\n const [search, setSearch] = useState(\"\")\n const [sortBy, setSortBy] = useState(\"CreatedAt\")\n const [sortDirection, setSortDirection] = useState(\"DESC\")\n const [unlinkedOnly, setUnlinkedOnly] = useState(false)\n\n\n const updateSearchValue = (evt : React.KeyboardEvent\n setSelectedAccount(value)} allowEmpty={true} />\n { data.facebookPage.account || selectedAccount ?\n <>\n setSelectedTeam(value)} allowEmpty={true} account={selectedAccount || data.facebookPage.account} />\n setSelectedUser(value)} allowEmpty={true} account={selectedAccount || data.facebookPage.account} />\n \n\n : \n }\n \n
\n Error
\n }\n\n\n return (\n \n
\n )\n}\n\nconst FacebookListEntry= ({entry}) => {\n const linked = entry.user || entry.team || entry.account;\n\n return (\n \n
\n \n
\n \n
\n\n \n \n updateSearchValue(evt)} />\n
\n \n {data && data.facebookPages.items.map((page, i) => {\n return \n })}\n
\n \n
\n )\n}\n\nconst Facebook = () => {\n return (\n \n \n \n {entry.title} ({entry.category})\n \n \n
\n \n { entry.account ? \n {entry.account.title}\n : (no account)\n }\n
\n \n { entry.team ? \n {entry.team.title}\n : (no team)\n }\n
\n \n { entry.user ? \n {entry.user.name || entry.user.email}\n : (no user)\n }\n
\n \n
\n \n {timeDistanceInWords(entry.createdAt)}\n
\n \n
\n : Facebook Pages
\n\n
\n \n \n \n
\n Not allowed
\n
\n );\n};\n\nconst Tools = () => {\n return (\n \n \n
\n \n
\n );\n};\n\nexport default Tools;\n", "import React, { useState } from \"react\";\nimport { Routes, Route, Outlet, NavLink } from \"react-router-dom\";\n\nconst PostToolDashboard = () => {\n return (\n \n {navigation.map((item) => (\n \n isActive\n ? \"rounded-md px-3 py-2 text-sm font-medium bg-gray-900 text-brand-500\"\n : \"rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-300 hover:text-brand-500\"\n }\n to={item.href}\n >\n {item.name}\n \n ))}\n
\n \n
\n \n \n \n
\n \n
\n );\n};\n\nexport default PostToolDashboard;\n", "import React, { useState } from \"react\";\nimport { Routes, Route, Outlet, NavLink } from \"react-router-dom\";\n\nconst NotYetCreated = () => {\n return (\n Post Tool Dashboard
\n\n \n
\n \n
\n );\n};\n\nexport default NotYetCreated;\n", "import React, { useState } from 'react'\nimport { useQuery } from 'react-apollo'\nimport { Routes, Route, Outlet, NavLink, Link } from 'react-router-dom'\nimport Loading from '../../../loading'\nimport Pagination from '../../../../Pagination'\nimport { timeDistanceInWords } from '../../../../helpers/TimeInWords'\n\nimport { SUPPORT_PAGE_QUESTIONS_QUERY, SUPPORT_PAGE_SECTIONS_QUERY } from './Query'\n\n\nconst Support = () => {\n const [limit, setLimit] = useState(50)\n const [supportType, setSupportType] = useState(\"questions\")\n const [page, setPage] = useState(1)\n const [search, setSearch] = useState(\"\")\n const [searchType, setSearchType] = useState(undefined)\n const [sortBy, setSortBy] = useState(\"Sorting\" as string)\n const [sortDirection, setSortDirection] = useState(false)\n\n const [account, setAccount] = useState(undefined as string)\n const [supportPage, setSupportPage] = useState(undefined as string)\n \n const updateSort = (newSortBy) => {\n newSortBy == sortBy ? setSortDirection(!sortDirection) : setSortBy(newSortBy)\n }\n\n const setAccountAndReset = (account) => {\n setAccount(account)\n setSupportPage(undefined as string)\n }\n\n const updateSearchValue = (evt) => {\n if (evt.key == \"Enter\") {\n setSearch(evt.currentTarget.value)\n setPage(1)\n }\n }\n\n const vars =\n {\n limit\n , accountId: account && account !== \"none\" ? account : undefined\n , supportPageid: supportPage && supportPage !== \"none\" ? supportPage : undefined\n , search: search\n , searchType: searchType && searchType != 'all' ? searchType : undefined\n , sortBy: sortBy ? sortBy : undefined\n , sortDirection: sortDirection ? \"DESC\" : \"ASC\"\n , page: page ? page : 1\n }\n\n const { loading, error, data } = useQuery(supportType === \"questions\" ? SUPPORT_PAGE_QUESTIONS_QUERY : SUPPORT_PAGE_SECTIONS_QUERY, { variables: vars, pollInterval: 5000, fetchPolicy: 'no-cache' })\n\n if (loading) return Not yet created
\n\n
\n \n
\n \n This dashboard will be implemented in the future; context\n claus@fliva.com if you really need this now!\n
\nError
\n }\n return (\n \n
\n )\n}\n\nconst Header = ({ data, type, setType, limit, setLimit, account, setAccount, supportPage, setSupportPage, search, updateSearchValue, searchType, setSearchType }) => {\n\n return (\n \n \n\n {data?.accounts ?\n \n : }\n\n {account ?\n \n : }\n\n {supportPage ?\n \n : }\n\n {supportPage ?\n
\n\n )\n}\n\nconst Labels = ({updateSort, supportType}) => {\n return supportType === \"questions\" ? \n \n\n
: \n }\n \n \n updateSearchValue(evt)} />\n \n New\n \n
\n \n
\n )\n}\n\n\n\nconst SectionLabels = ({ updateSort }) => {\n return (\n \n updateSort(\"Question\")}>\n Question\n \n
\n \n
\n\n \n answer\n
\n \n
\n updateSort(\"Topic\")}>\n topic\n
\n \n
\n updateSort(\"Sorting\")}>\n sorting\n
\n \n
\n updateSort(\"UpdatedAt\")}>\n Updated at\n
\n \n
\n updateSort(\"CreatedAt\")}>\n Created at\n
\n \n
\n \n Delete\n
\n \n
\n )\n}\n\n\n\nconst SupportPageEntries = ({supportType, data}) => {\n return (\n \n \n Content\n \n
\n \n
\n updateSort(\"SectionType\")}>\n Section type\n
\n \n
\n updateSort(\"Sorting\")}>\n sorting\n
\n \n
\n updateSort(\"UpdatedAt\")}>\n Updated at\n
\n \n
\n updateSort(\"CreatedAt\")}>\n Created at\n
\n \n
\n \n Delete\n
\n \n {supportType === \"questions\" ?\n data?.supportPage?.questions?.items?.map((question) => {\n return (\n
)\n}\n\nconst QuestionEntry = ({question}) => {\n return (\n \n
\n )\n}\n\nconst SectionEntry = ({section}) => {\n return (\n \n \n \n {question?.question}\n \n \n
\n \n
\n \n {question?.answer}\n
\n \n
\n \n {question?.topic}\n
\n \n
\n \n {question?.sorting}\n
\n \n
\n \n {timeDistanceInWords(question?.updatedAt)}\n
\n \n
\n\n \n {timeDistanceInWords(question?.createdAt)}\n
\n \n \n Delete\n \n
\n \n
\n )\n}\nexport default Support\n", "import gql from 'graphql-tag'\n\nexport const SUPPORT_PAGE_QUESTIONS_QUERY = gql`\nquery SupportQuery($limit: Int, $supportPageid: ID, $search: String, $page: Int, $sortBy:SupportPageQuestionSortingField, $sortDirection: SortingDirection, $searchType: SupportPageQuestionSearch) {\n accounts(limit: $limit, page: 1) {\n items {\n id\n title\n supportPages {\n id\n title\n }\n }\n }\n supportPage(id: $supportPageid) {\n questions(search: $search, limit: $limit, page: $page, sortBy: $sortBy, sortDirection: $sortDirection, searchType: $searchType) {\n \tcurrentPage\n totalPages\n previousPage\n nextPage\n items {\n id\n question\n answer\n topic\n sorting\n mediaUrl\n mediaType\n question\n createdAt\n updatedAt\n }\n }\n }\n}\n \n`\n\nexport const SUPPORT_PAGE_SECTIONS_QUERY = gql`\nquery SupportQuery($limit: Int, $supportPageid: ID, $search: String, $page: Int, $sortBy:SupportPageSectionSortingField, $sortDirection: SortingDirection, $searchType: SupportPageSectionSearch) {\n accounts(limit: $limit, page: 1) {\n items {\n id\n title\n supportPages {\n id\n title\n }\n }\n }\n supportPage(id: $supportPageid) {\n sections (search: $search, limit: $limit, page: $page, sortBy: $sortBy, sortDirection: $sortDirection, searchType: $searchType) {\n currentPage\n totalPages\n previousPage\n nextPage\n items{\n id\n content\n sectionType\n mediaType\n mediaUrl\n sorting\n createdAt\n updatedAt\n }\n }\n }\n}\n \n`\n\nexport const SUPPORT_PAGE_QUESTION_QUERY = gql`\nquery SupportPageQuestionQuery($questionId: ID) {\n supportPageQuestion(id: $questionId) {\n question\n answer\n topic\n sorting\n mediaType\n mediaUrl\n createdAt\n updatedAt\n }\n}\n`\n\nexport const SUPPORT_PAGE_SECTION_QUERY = gql`\nquery SupportPageSectionQuery($sectionId: ID) {\n supportPageSection(id: $sectionId) {\n id\n content\n sectionType\n sorting\n mediaUrl\n mediaType\n createdAt\n updatedAt\n }\n}\n`\n\nexport const UPDATE_SUPPORT_PAGE_QUESTION_MUTATION = gql`\nmutation UpdateQuestion($id: ID!, $topic:String, $question:String, $answer:String, $mediaUrl: String, $sorting:Int, $mediaType: String) {\n updateSupportPageQuestion(supportPageQuestionId: $id, topic: $topic, question:$question, answer:$answer,sorting:$sorting, mediaUrl:$mediaUrl, mediaType: $mediaType){\n id\n \ttopic\n \tanswer\n question,\n sorting\n mediaUrl,\n mediaType,\n }\n}\n`\nexport const UPDATE_SUPPORT_PAGE_SECTION_MUTATION = gql`\nmutation UpdateSection($id: ID!, $content:String, $sectionType:String, $sorting:Int, $mediaUrl: String, $mediaType: String) {\n updateSupportPageSection(supportPageSectionId: $id, content: $content, sectionType:$sectionType, sorting:$sorting, mediaUrl:$mediaUrl, mediaType: $mediaType){\n id\n content\n sectionType\n sorting\n mediaUrl\n mediaType\n }\n}\n`\n\nexport const CREATE_SUPPORT_PAGE_QUESTION_MUTATION = gql`\nmutation createQuestion ($id:ID!, $question: String)\n{createSupportPageQuestion(supportPageId: $id, question: $question)\n {\n id, question\n }\n}\n`\n\nexport const CREATE_SUPPORT_PAGE_SECTION_MUTATION = gql`\nmutation createSection ($id:ID!, $sectionType: String)\n{createSupportPageSection(supportPageId: $id, sectionType: $sectionType)\n {\n id, sectionType\n }\n}\n`\n\nexport const DELETE_SUPPORT_PAGE_QUESTION_MUTATION = gql`\nmutation deleteQuestion($id: ID!) {\n deleteSupportPageQuestion(supportPageQuestionId: $id) {\n id\n question\n }\n}\n`\n\nexport const DELETE_SUPPORT_PAGE_SECTION_MUTATION = gql`\nmutation deleteSection($id: ID!) {\n deleteSupportPageSection(supportPageSectionId: $id) {\n id\n content\n }\n}\n\n`\n\n", "import React, { useRef, useEffect } from 'react'\nimport { Query, useMutation} from 'react-apollo'\nimport gql from 'graphql-tag'\nimport { useNavigate, useParams} from 'react-router-dom'\nimport Modal from '../../../../Modal'\nimport { CREATE_SUPPORT_PAGE_QUESTION_MUTATION } from '../Query'\nimport { Mixpanel } from '../../../../../Common/Mixpanel'\n\n\n\nconst New = () => {\n const { supportPageId } = useParams();\n\n let navigate = useNavigate()\n const question = useRef\n \n \n {section?.content}\n \n \n
\n \n
\n \n {section?.sectionType}\n \n {section?.sectionType}\n \n
\n \n
\n \n {section?.sorting}\n
\n \n
\n \n {timeDistanceInWords(section?.updatedAt)}\n
\n \n
\n \n {timeDistanceInWords(section?.createdAt)}\n
\n \n \n Delete\n \n
\n \n \n
\n \n {/*content*/}\n
\n \n \n \n ) : null}\n \n );\n}\n", "import React, { useState } from 'react'\nimport { useQuery, useMutation } from 'react-apollo'\nimport { useParams } from 'react-router-dom'\nimport Loading from '../../../../loading'\nimport { SUPPORT_PAGE_QUESTION_QUERY, UPDATE_SUPPORT_PAGE_QUESTION_MUTATION } from '../Query'\nimport { AssetUpload } from \"../../../../Video/Upload\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faUpload } from '@fortawesome/free-solid-svg-icons'\nimport VideoJS from '../SimplePlayer'\n\n\nconst Edit = () => {\n\n const onUploadAsset = (url, fileType) => {\n //if i use the setField method here, only one property gets added. Probably something to do with the async nature of react. Correct me here Claus if there is a better alternative\n setQuestionParams(Question => ({ ...Question, mediaType: fileType }))\n setQuestionParams(Question => ({ ...Question, mediaUrl: url }))\n setUploadAsset(false);\n };\n\n //Gets the questionId from the url\n const { questionId } = useParams();\n\n const [Question, setQuestionParams] = useState(undefined as any)\n const [uploadAsset, setUploadAsset] = useState(false);\n\n //load data from the database with the gql query\n const { loading, data, error, refetch } = useQuery(SUPPORT_PAGE_QUESTION_QUERY, { variables: { \"questionId\": questionId }, fetchPolicy: 'no-cache' });\n\n //mutation for saving the changes\n const [saveChanges, saveResult] = useMutation(UPDATE_SUPPORT_PAGE_QUESTION_MUTATION)\n const activePreview = {\n preview: Question?.mediaUrl || data?.supportPageSection?.mediaUrl || undefined,\n type: Question?.mediaType || data?.supportPageSection?.mediaType || undefined\n }\n\n /**\n * Method for changing and updating paramteres\n * @param fieldName The field that will be changed\n * @param value \n * @returns \n */\n const setField = (fieldName: string, value?: any) => {\n\n if (value === undefined) {\n return function (value: any) {\n setQuestionParams(\n {\n ...Question,\n [fieldName]: value\n }\n )\n }\n }\n else {\n setQuestionParams(\n {\n ...Question,\n [fieldName]: value\n }\n )\n }\n }\n\n const save = () => {\n const vars = {};\n vars['id'] = questionId;\n\n //checks if the properties exist before assigning them\n if (Question?.topic != undefined) {\n vars['topic'] = Question.topic;\n }\n\n if (Question?.answer != undefined) {\n vars['answer'] = Question.answer;\n }\n\n if (Question?.question != undefined) {\n vars['question'] = Question.question;\n }\n\n if (Question?.sorting != undefined) {\n vars['sorting'] = Number(Question.sorting);\n }\n\n if (Question?.mediaUrl != undefined) {\n vars['mediaUrl'] = Question.mediaUrl;\n }\n\n if (Question?.mediaType != undefined) {\n vars['mediaType'] = Question.mediaType;\n }\n\n const result = saveChanges({ variables: vars })\n\n result.then((done) => {\n\n console.log(data.supportPageQuestion)\n\n }).catch(v => console.error(v)).finally(() => {\n //when its done writing to the database, refetch the data\n refetch().then(({ data }) => {\n console.log('Refetch is done!', data);\n setQuestionParams(data.supportPageQuestion);\n });\n });\n }\n\n //check if the data is loaded\n if (loading && !Question) return \n {/*header*/}\n
\n \n
\n {/*body*/}\n \n {title}\n
\n\n {children}\n
\n {/*footer*/}\n \n { if(cancel) cancel(); setShowModal(false)}}\n >\n {cancelText}\n \n {save(); setShowModal(false)}}\n >\n {buttonText}\n \n
\n Error
\n }\n return (\n \n
\n )\n}\n\n\nconst AssetPreview = ({ url, fileType }) => {\n const playerRef = React.useRef(null);\n\n const handlePlayerReady = (player) => {\n playerRef.current = player;\n };\n\n if (fileType?.includes(\"image\")) {\n\n return (\n \n
\n \n
\n Edit Question
\n\n \n
\n \n
\n \n { setField(\"topic\", e.target.value) }} />\n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n { setField(\"sorting\", e.target.value) }} />\n
\n \n \n
\n \n \n
\n \n {activePreview.preview || data?.supportPageQuestion?.mediaUrl ? setUploadAsset(!uploadAsset)}\n className=\"p-4 m-4 text-sm\"\n >\n cancel\n \n \n ) : (\n \n )}\n {activePreview.preview || data?.supportPageQuestion?.mediaUrl ? (\n \n
\n \n 
\n
)\n }\n else fileType?.includes(\"video\")\n {\n\n const videoJsOptions = {\n autoplay: false,\n controls: true,\n responsive: true,\n fluid: true,\n sources: [{\n src: url,\n type: fileType\n }]\n };\n\n return (\n \n
\n )\n }\n}\n\n\nexport default Edit\n", "import React, {useCallback, useEffect, useState} from 'react'\nimport { Query, useMutation } from 'react-apollo'\nimport {roundedPercentString} from '../../helpers/PercentHelper'\nimport gql from 'graphql-tag'\nimport {useDropzone} from 'react-dropzone'\nimport Loading from '../loading'\nimport axios from 'axios'\n\nexport const UPLOAD_ASSET = gql`\n mutation token {\n createUploadToken(uploadType:Asset){\n id\n fields\n url\n uploadedUrl\n }\n }\n`\n\nexport const UPLOAD_COMP = gql`\n mutation token {\n createUploadToken(uploadType:Composition){\n id\n fields\n url\n uploadedUrl\n }\n }\n`\n\nexport const UPLOAD_NEW_ENTITY = gql`\n mutation token {\n createUploadToken(uploadType:Video){\n id\n fields\n url\n }\n }\n`\n\nexport const UPLOAD_EXISTING_ENTITY = gql`\n mutation token($id:String) {\n createUploadToken(uploadType:Video, id: $id){\n id\n fields\n url\n }\n }\n`\n\nexport const Dropzone = ({url, fields, onUpload, onProgress}) => {\n const [progress, setProgress] = useState({bytes: 0, total: 0, percent: 0, filename: \"\",fileType: \"\" , updated: false})\n const updateProgress = (newProgress, filename, fileType) => {\n if(newProgress.loaded == newProgress.total) {\n setProgress({loaded: 0, total: 0, percent: 0, filename: \"\",fileType: \"\", updated: false})\n } else {\n setProgress({loaded: newProgress.loaded, total: newProgress.total, percent: newProgress.loaded / newProgress.total * 100, filename: filename, fileType: fileType, updated: true})\n }\n }\n const onDrop = useCallback(acceptedFiles => {\n // Do something with the files\n const dataFields = JSON.parse(fields)\n const file = acceptedFiles[0]\n const formData = new FormData();\n // formData.append(\"Content-Type\", file.type);\n Object.entries(dataFields).forEach(([k, v]) => {\n formData.append(k, v);\n });\n formData.append(\"file\", file);\n axios.request({\n method: \"post\", \n url: url, \n data: formData, \n onUploadProgress: (p) => {\n updateProgress(p, file.name, file.type)\n if(onProgress) onProgress(p)\n }\n }).then (response => {\n onUpload(file.name, file.type, response)\n }).catch(error => {\n console.log(error)\n })\n }, [])\n const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})\n\n return (\n \n { progress.updated ?\n <>\n {progress.filename}: {roundedPercentString(progress.percent)} %\n \n \n :\n <>\n \n {\n isDragActive ?\n
\n )\n}\n\nexport const VideoUpload = ({onUpload, onProgress, id}) => {\n const mutation = id ? UPLOAD_EXISTING_ENTITY : UPLOAD_NEW_ENTITY\n const [getUploadToken, { data }] = useMutation(mutation);\n useEffect(() => {\n const variables = id ? {id: id} : {}\n getUploadToken({variables})\n }, [])\n return data ? Drop files
:\nClick or drag here
\n }\n \n }\n\n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {import(\"./utils\").AcceptProp} [props.accept] Set accepted file types.\n * Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n * to open the file picker instead of using an `` click event.\n * @param {boolean} autoFocus Set to true to auto focus the root element.\n * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be an object with keys as a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) and the value an array of file extensions (optional).\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n * @param {(error: Error) => void} [props.onError]\n *\n * @returns {DropzoneState & DropzoneMethods}\n */\n\nexport function useDropzone() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),\n accept = _defaultProps$props.accept,\n disabled = _defaultProps$props.disabled,\n getFilesFromEvent = _defaultProps$props.getFilesFromEvent,\n maxSize = _defaultProps$props.maxSize,\n minSize = _defaultProps$props.minSize,\n multiple = _defaultProps$props.multiple,\n maxFiles = _defaultProps$props.maxFiles,\n onDragEnter = _defaultProps$props.onDragEnter,\n onDragLeave = _defaultProps$props.onDragLeave,\n onDragOver = _defaultProps$props.onDragOver,\n onDrop = _defaultProps$props.onDrop,\n onDropAccepted = _defaultProps$props.onDropAccepted,\n onDropRejected = _defaultProps$props.onDropRejected,\n onFileDialogCancel = _defaultProps$props.onFileDialogCancel,\n onFileDialogOpen = _defaultProps$props.onFileDialogOpen,\n useFsAccessApi = _defaultProps$props.useFsAccessApi,\n autoFocus = _defaultProps$props.autoFocus,\n preventDropOnDocument = _defaultProps$props.preventDropOnDocument,\n noClick = _defaultProps$props.noClick,\n noKeyboard = _defaultProps$props.noKeyboard,\n noDrag = _defaultProps$props.noDrag,\n noDragEventsBubbling = _defaultProps$props.noDragEventsBubbling,\n onError = _defaultProps$props.onError,\n validator = _defaultProps$props.validator;\n\n var acceptAttr = useMemo(function () {\n return acceptPropAsAcceptAttr(accept);\n }, [accept]);\n var pickerTypes = useMemo(function () {\n return pickerOptionsFromAccept(accept);\n }, [accept]);\n var onFileDialogOpenCb = useMemo(function () {\n return typeof onFileDialogOpen === \"function\" ? onFileDialogOpen : noop;\n }, [onFileDialogOpen]);\n var onFileDialogCancelCb = useMemo(function () {\n return typeof onFileDialogCancel === \"function\" ? onFileDialogCancel : noop;\n }, [onFileDialogCancel]);\n /**\n * @constant\n * @type {React.MutableRefObjectDrag and drop some files here, or click to select files
\n *\n \n
\n );\n}\n\nexport default VideoJS;", "/**\n * @license\n * Video.js 7.21.5