{"version":3,"mappings":"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","names":["PlayIcon","VideoPlayIcon","VideoPlayerModal","openModal","setOpenModal","video","playedPercentage","setPlayedPercentage","useState","tracking","useTracking","handleTimeUpdate","event","percentage","target","currentTime","duration","handleVideoStop","trackEvent","event_name","page_url","window","location","pathname","event_loggable_type","additional_attributes","content_type","split","event_type","file_name","filename","watched_duration","Modal","isOpen","onClose","closeStyle","className","children","controls","autoPlay","onTimeUpdate","_jsx","src","video_file_url","type","EmptySection","React","lazy","__vitePreload","n","VideoSection","videos","solutionOwner","current_user","is_claimed","isRmcAdmin","setVideo","handleVideoPlayerrModal","conditionsForEmptyVideossSection","id","every","obj","heading","paragraph","map","_","_jsxs","alt","onClick","thumbnail_url","title","EditVideoSection","solution","setData","data","useToken","editableVideoIndex","setEditableVideoIndex","activeIndex","setActiveIndex","modalFor","setModalFor","showValidationErrors","errors","length","toast","error","position","autoClose","hideProgressBar","closeOnClick","bodyClassName","handleVideoFileChange","video_file","index","newFileName","name","validationErrors","videoValidation","prevData","updatedVideos","videos_attributes","doc_file_changed","handleTitleChange","video_title","handleEditableClick","_destroy","handleDelete","videoId","handleModalInput","modalHeading","PlusIcon","TrashIcon","Input","label","labelHtmlFor","value","containerClass","required","maxLength","onChange","e","Button","variant","size","trackBtnClick","AddMarketingMaterialModal","handleFileChange"],"sources":["../../../app/assets/images/play.svg","../../../app/assets/images/video-play-icon.png","../../../app/javascript/components/molecules/modals/VideoPlayerModal.tsx","../../../app/javascript/components/atoms/OfficialMediaSection/VideoSection.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.75%205.65273C5.75%204.79705%206.6674%204.25462%207.41716%204.66698L18.9577%2011.0143C19.7349%2011.4417%2019.7349%2012.5584%2018.9577%2012.9858L7.41716%2019.3331C6.6674%2019.7455%205.75%2019.203%205.75%2018.3474V5.65273Z'%20stroke='%238A8DA0'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"__VITE_ASSET__FbEEFrwK__\"","import { useState } from 'react'\nimport Modal from \"../../atoms/modals/Modal\"\nimport { useTracking } from 'react-tracking'\n\nconst VideoPlayerModal = ({ openModal, setOpenModal, video }) => {\n  const [playedPercentage, setPlayedPercentage] = useState(0)\n  const tracking = useTracking()\n\n  const handleTimeUpdate = (event) => {\n    const percentage = (event.target.currentTime / event.target.duration) * 100;\n    setPlayedPercentage(percentage);\n  }\n\n  const handleVideoStop = () => {\n    setPlayedPercentage(0)\n    tracking.trackEvent({event_name: 'Offical Media Section', page_url: window.location.pathname, event_loggable_type: \"RmcEvents::VideoLog\", additional_attributes:{content_type: video.content_type.split('/')[1], event_type: 'click', file_name: video.filename, watched_duration: playedPercentage} })\n  }\n\n  return (\n    <Modal\n      isOpen={openModal}\n      onClose={() => {\n        setOpenModal(false)\n        handleVideoStop()\n      }}\n      closeStyle=\"top-3\"\n      className=\"mx-4 gap-5 w-full rounded-xl bg-black md:mt-0 py-12 md:w-[800px]\"\n    >\n      <video controls autoPlay className=\"w-full h-full\" onTimeUpdate={handleTimeUpdate}>\n        <source src={video.video_file_url} type=\"video/mp4\" />\n        Your browser does not support the video tag.\n      </video>\n    </Modal>\n  )\n}\n\nexport default VideoPlayerModal\n","import React, { useState } from 'react'\nconst EmptySection = React.lazy(() => import('../../atoms/widgets/EmptySection'))\nimport PlayIcon from \"../../../../assets/images/play.svg\"\nimport VideoPlayIcon from '../../../../assets/images/video-play-icon.png'\nimport TrashIcon from \"../../../../assets/images/trash.svg\"\nimport PlusIcon from \"../../../../assets/images/plus.svg\"\nimport Input from '@/components/atoms/inputs/Input'\nimport Button from '@components/atoms/buttons/Button'\nimport axios from 'axios'\nimport { useToken } from '../forms/Form'\nimport AddMarketingMaterialModal from '@/components/molecules/modals/AddMarketingMaterialModal'\nimport VideoPlayerModal from '@/components/molecules/modals/VideoPlayerModal'\nimport { videoValidation } from \"@/utils/fileValidations\";\nimport { toast } from \"react-toastify\";\n\nexport const VideoSection = ({ videos, solutionOwner, current_user, is_claimed, isRmcAdmin }) => {\n  const [openModal, setOpenModal] = useState(false)\n  const [video, setVideo] = useState('')\n\n  const handleVideoPlayerrModal = (video) => {\n    setOpenModal(true)\n    setVideo(video)\n  }\n\n  const conditionsForEmptyVideossSection = () => {\n    return ((is_claimed || isRmcAdmin) && current_user && (current_user?.id === solutionOwner?.id || isRmcAdmin) && videos?.every(obj => obj.id === null))\n  }\n\n  return (\n    <div className={ !videos?.every(obj => obj.id === null) || conditionsForEmptyVideossSection() ?\"sm:p-8 p-4\" : \"\"}>\n    {\n      (!videos?.every(obj => obj.id === null) || conditionsForEmptyVideossSection() ) ?\n      <div className=\"flex\">\n        <img src={PlayIcon}/>\n        <p className=\"text-base font-semibold mx-2\">Videos</p>\n      </div>\n      :\n      null\n    }\n      <div>\n        <div>\n          { conditionsForEmptyVideossSection() ?\n            <div className=\"\">\n              <div className=\"sm:mt-3 mt-4\">\n                <EmptySection heading=\"No Videos Yet\" paragraph=\"Click the pencil icon to add a video to your profile.\"/>\n              </div>\n            </div>\n            :\n            <div>\n              <div className=\"grid lg:grid-cols-3 md:grid-cols-2 cols-1 lg:gap-3 md:gap-2\">\n                {videos.map((video, _) => (\n                  video.id &&\n                  <div className=\"border-[1.5px] rounded-xl sm:mt-5 mt-4 relative \">\n                    <div className=\"absolute h-full w-full  rounded-xl text-white flex justify-center items-center \">\n                      <img src={VideoPlayIcon} alt=\"download\" className=\"hover:cursor-pointer w-[60px] h-[60px] mb-10\" onClick={(() => handleVideoPlayerrModal(video))} />\n                    </div>\n                    <img\n                      className=\"max-h-[160px] md:max-h-[200px] w-full object-cover rounded-tl-xl rounded-tr-xl\"\n                      src={video.thumbnail_url}\n                      alt=\"/\"\n                    />\n                    <div className=\"flex justify-between p-4\">\n                      <p className=\"sm:text-md text-sm\">{video.title}</p>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          }\n          <VideoPlayerModal openModal={openModal} setOpenModal={setOpenModal} video={video} />\n        </div>\n      </div>\n  </div>\n  )\n}\n\nexport const EditVideoSection = ({ solution, setData, data }) => {\n  const token = useToken()\n  const [editableVideoIndex, setEditableVideoIndex] = useState(null)\n  const [activeIndex, setActiveIndex] = useState(null)\n  const [openModal, setOpenModal] = useState(false)\n  const [modalFor, setModalFor] = useState(\"\")\n  const showValidationErrors = (errors) => {\n    if(errors.length > 0) {\n      toast(\n        <div>\n          {errors.map((error)=>{\n            return <p>{error}</p>\n          })}\n        </div>,\n        {\n          position: 'top-right',\n          autoClose: 5000,\n          hideProgressBar: true,\n          closeOnClick: true,\n          className:\n            'bg-red-200 text-md text-black p-4 md:p-6 md:rounded-xl md:w-[400px] md:right-[80px]',\n          bodyClassName: 'p-0 min-w-[324px]',\n        }\n      );\n      setOpenModal(false);\n      return;\n    }\n  }\n\n  const handleVideoFileChange = (video_file, index) => {\n    const newFileName = video_file?.name || ''\n    let validationErrors = null;\n    if(video_file !== null) {\n      validationErrors = videoValidation(video_file)\n      if(validationErrors.length > 0){\n        showValidationErrors(validationErrors)\n        return;\n      }\n    }\n    setData((prevData) => {\n      const updatedVideos = prevData.videos_attributes.map(\n        (video, position) => {\n          if (position === index) {\n            return { ...video, video_file: video_file, video_file_url: null, filename: newFileName, doc_file_changed: true }\n          }\n          return video\n        }\n      )\n      return { ...prevData, videos_attributes: updatedVideos }\n    })\n    setOpenModal(false)\n  }\n\n  const handleTitleChange = (video_title, index) => {\n    setData((prevData) => {\n      const updatedVideos = prevData.videos_attributes.map(\n        (video, position) => {\n          if (position === index) {\n            return { ...video, title: video_title }\n          }\n          return video\n        }\n      )\n      return { ...prevData, videos_attributes: updatedVideos }\n    })\n  }\n\n\n  const handleEditableClick = (index: number) => {\n    setEditableVideoIndex(index)\n    setData((prevData) => {\n      const updatedVideos = prevData.videos_attributes.map(\n        (video, position) => {\n          if (position === index) {\n            return { ...video ,title: \"\", filename: \"\", video_file: null, video_file_url: null, _destroy: false, };\n          }\n          return video;\n        }\n      );\n      return { ...prevData, videos_attributes: updatedVideos };\n    });\n  }\n\n  const handleDelete = (videoId) => {\n    setData((prevData) => {\n      const updatedVideos = prevData.videos_attributes.map((video) => {\n        if (video.id === videoId) {\n          return { ...video, _destroy: true } // Mark for deletion\n        }\n        return video\n      })\n      return { ...prevData, videos_attributes: updatedVideos }\n    })\n  }\n\n  const handleModalInput = (index, modalHeading) => {\n    setOpenModal(true)\n    setActiveIndex(index)\n    setModalFor(modalHeading)\n  }\n  return (\n    <div className=\"sm:p-8 p-4\">\n      <div className=\"flex\">\n        <img src={PlayIcon} alt=\"Video\" />\n        <p className=\"text-base font-semibold mx-2\">Videos</p>\n      </div>\n      <div className=\"grid lg:grid-cols-3 md:grid-cols-2 cols-1 lg:gap-3 md:gap-2 pt-5\">\n        {data.videos_attributes.map((video, index) => (\n          (video.id !== null || editableVideoIndex === index ||\n            video.video_file_url !== null ||\n            video.title !== '') && !video._destroy ?\n            <div className=\"rounded-xl relative\" key={index}>\n              {\n                video.video_file_url !== null ?\n                  <div>\n                    <img src={video.thumbnail_url} alt=\"video-thumbnail\" className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl\" />\n                  </div>\n                  :\n                  <div className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl bg-gray-100 border-spacing-y-4 border-[1px]\">\n                    <div className=\"flex flex-col items-center justify-center h-full\">\n                      <div className=\"w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:cursor-pointer\">\n                        {video.filename === '' ?\n                          <img src={PlusIcon} id={video.id} onClick={(() => handleModalInput(index, \"Video\"))} />\n                          :\n                          <img src={TrashIcon} id={video.id} onClick={(() => handleVideoFileChange(null, index))} />\n\n                        }\n                      </div>\n                      {video.filename === '' ? <h2 className=\"text-[#222427] text-muted mt-2\">Add Video</h2> : video.filename}\n                    </div>\n                  </div>\n              }\n              <Input\n                type=\"text\"\n                label=\"Label:\"\n                labelHtmlFor={`video_title_${index}`}\n                id={`video_title_${index}`}\n                name={`video_title_${index}`}\n                value={video.title}\n                containerClass=\"my-5\"\n                required={true}\n                maxLength={25}\n                onChange={(e) =>\n                  handleTitleChange(e.target.value, index)\n                }\n              />\n              <div className=\"flex\">\n                <div\n                  className={`font-manrope text-xs font-medium ${video.title.length > 25\n                    ? 'text-danger-red'\n                    : 'text-[#8A8DA0]'\n                    }`}\n                >\n                  Max 25 characters\n                </div>\n                <div\n                  className={`font-manrope ml-auto text-xs font-medium ${video.title.length > 25\n                    ? 'text-danger-red'\n                    : 'text-[#8A8DA0]'\n                    }`}\n                >\n                  {video.title.length}\n                </div>\n              </div>\n              {video.id &&\n                <Button variant='dangerLight' size='md' className='my-[1.5rem]' onClick={() => handleDelete(video.id)} trackBtnClick={true}>\n                  Delete Item\n                </Button>\n              }\n            </div>\n            :\n            <div className=\"xl:w-[368px] xl:h-[204px] w-[100%] h-[204px] rounded-xl border-spacing-y-4 border-[1px] sm:mt-0 mt-5\">\n              <div className=\"flex flex-col items-center justify-center h-full\">\n                <div className=\"w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center hover:cursor-pointer\">\n                  <img src={PlusIcon} onClick={() => handleEditableClick(index)} id={video.id} />\n                </div>\n                <h1 className='pt-2'>Add New</h1>\n              </div>\n            </div>\n        ))}\n      </div>\n      <AddMarketingMaterialModal openModal={openModal} setOpenModal={setOpenModal} index={activeIndex} modalFor={modalFor} handleFileChange={handleVideoFileChange} />\n    </div>\n  )\n}\n"],"file":"assets/VideoSection-GqLmxunU.js"}