peertube-plugin-transposer-connector/dist/transposer-translation-client-plugin.js

Transposer connector is a PeerTube language tool plugin to transcribe and translate with Whisper

async function I({registerClientRoute:E,peertubeHelpers:p}){let{notifier:b}=p;function i(){return window.location.origin}function x(o){var u=window.location.href;o=o.replace(/[\[\]]/g,"\\$&");var g=new RegExp("[?&]"+o+"(=([^&#]*)|&|#|$)"),l=g.exec(u);return l?l[2]?decodeURIComponent(l[2].replace(/\+/g," ")):"":null}E({route:"/transposer/translate",onMount:({rootEl:o})=>{o.innerHTML=u();function u(){return'\n            <div id="plugincontainer">\n              <h1>Translate Video Caption</h1>\n              <button id="addCaptionButton">Add Caption</button><button id="backButton">Back</button><br><br>\n            </div>'}function g(){var r=x("videoId");if(r==null){console.log("No Video Id in query param"),window.open("".concat(i(),"/p/transposer"),"_self");return}o.querySelector("#addCaptionButton").addEventListener("click",()=>{console.log("New caption button clicked"),window.open("".concat(i(),"/p/transposer/translation/add?videoId=").concat(r),"_self")}),o.querySelector("#backButton").addEventListener("click",()=>{console.log("back button clicked"),window.open("".concat(i(),"/p/transposer"),"_self")}),fetch("".concat(i(),"/api/v1/videos/").concat(r,"/captions"),{method:"GET",headers:p.getAuthHeader()}).then(e=>{if(!e.ok)throw new Error("Failed to fetch captions: ".concat(e.status," ").concat(e.statusText));return e.json()}).then(e=>{let c=e.data,d=document.createElement("table");d.classList.add("caption-table");let h=document.createElement("thead"),v=document.createElement("tr");["Language","Uploaded","Edit","Delete"].forEach(t=>{let n=document.createElement("th");n.textContent=t,v.appendChild(n)}),h.appendChild(v),d.appendChild(h);let s=document.createElement("tbody");if(c.length===0){let t=document.createElement("tr"),n=document.createElement("td");n.setAttribute("colspan","4"),n.textContent="No captions available.",t.appendChild(n),s.appendChild(t)}else c.forEach(t=>{let n=document.createElement("tr"),y=document.createElement("td");y.textContent=t.language.label,n.appendChild(y);let C=document.createElement("td");C.textContent=t.updatedAt,n.appendChild(C);let w=document.createElement("td"),m=document.createElement("button");m.textContent="Edit",m.addEventListener("click",()=>{console.log("Edit button clicked for caption:",t),window.open("".concat(i(),"/p/transposer/translation/edit?videoId=").concat(r,"&lang=").concat(t.language.id),"_self")}),w.appendChild(m),n.appendChild(w);let k=document.createElement("td"),f=document.createElement("button");f.textContent="Delete",f.addEventListener("click",()=>{let $=x("videoId");confirm("Are you sure you want to delete this caption?")&&fetch("".concat(i(),"/api/v1/videos/").concat($,"/captions/").concat(t.language.id),{method:"DELETE",headers:p.getAuthHeader()}).then(a=>{if(!a.ok)throw new Error("Failed to delete caption: ".concat(a.status," ").concat(a.statusText));b.success("Caption deleted successfully."),window.location.reload()}).catch(a=>{b.error("Error deleting caption: ".concat(a)),console.error("Error deleting caption:",a)})}),k.appendChild(f),n.appendChild(k),s.appendChild(n)});d.appendChild(s),document.getElementById("plugincontainer").appendChild(d)}).catch(e=>{console.error("Error fetching captions:",e);let c=document.getElementById("plugincontainer");c.textContent="Error fetching captions."})}function l(){return'\n          #plugincontainer {\n            max-width: 100%;\n            padding: 20px;\n            position: relative;\n          } \n      \n          #plugincontainer h1 {\n            color: var(--mainColor);\n          }\n      \n          #plugincontainer #formcontainer {\n            display: flex;\n            flex-wrap: wrap;\n          }\n      \n          #plugincontainer .modifyButton,\n          #plugincontainer .saveButton, \n          #plugincontainer .cancelButton, \n          #plugincontainer .deleteButton {\n            cursor: pointer;\n            padding: 20px;\n          }\n      \n          #plugincontainer input, \n          #plugincontainer textarea,\n          #plugincontainer select {\n            display: block;\n            font-size: 16px;\n            padding: var(--input-y-padding, 8px) var(--input-x-padding, 12px);\n            width: 100%;\n            max-width: 100%;\n            color: var(--input-fg, #000);\n            background-color: var(--input-bg, #fff);\n            border: 1px solid var(--input-border-color, #ccc);\n            border-radius: var(--input-border-radius, 4px);\n            line-height: 24px;\n            transition: background-color 0.3s ease;\n          }\n      \n          #plugincontainer p {\n            font-size: 18px;\n          }\n      \n          #plugincontainer table {\n            width: 100%;\n            border-collapse: collapse;\n            margin: 25px 0;\n            font-size: 0.9em;\n            min-width: 130px;\n            min-height: 130px;\n          }\n      \n          #plugincontainer table tr {\n            text-align: left;\n          }\n      \n          #plugincontainer table th,\n          #plugincontainer table td {\n            padding: 12px 15px;\n            border-bottom: 1px solid var(--inputPlaceholderColor, #ccc);\n          }\n      \n          #plugincontainer table th {\n            background-color: var(--greyBackgroundColor, #f8f9fa);\n            color: var(--mainForegroundColor);\n          }\n      \n          /* General button styling */\n          #plugincontainer button {\n            color: var(--on-primary, var(--mainForegroundColor));\n            background-color: var(--primary, var(--mainColor));\n            border: 1px solid var(--primary, var(--mainColor));\n            padding: var(--input-y-padding, 8px) var(--input-x-padding, 12px);\n            border-radius: 4px;\n            cursor: pointer;\n            transition: background-color 0.3s;\n            vertical-align: top;\n          }\n      \n          /* Top-level action buttons */\n          #plugincontainer > button {\n            width: auto;\n            min-width: 100px;\n            margin-right: 10px;\n          }\n      \n          /* Table buttons */\n          #plugincontainer td button {\n            width: auto;\n            min-width: 80px;\n            margin: 0 5px;\n          }\n      \n          #plugincontainer button:hover {\n            background-color: var(--secondaryColor);\n          }\n      \n          #plugincontainer button:disabled {\n            background-color: var(--greyBackgroundColor, #cccccc);\n            color: var(--greyForegroundColor, #666666);\n            cursor: not-allowed;\n          }\n      \n          /* Action buttons like in the video list */\n          #plugincontainer .action-button {\n            position: relative;\n            width: 56px;\n            height: 56px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            min-width: unset;\n            padding: 8px;\n          }\n      \n          #plugincontainer .action-button.success {\n            background-color: var(--primary, var(--mainColor));\n            border-color: var(--primary, var(--mainColor));\n          }\n      \n          #plugincontainer .action-button.not-triggered {\n            background-color: var(--greyBackgroundColor, #f8f9fa);\n            border-color: var(--greyForegroundColor, #ccc);\n            color: var(--greyForegroundColor, #666);\n          }\n      \n          #plugincontainer .action-button svg {\n            width: 24px;\n            height: 24px;\n            margin-bottom: 6px;\n            fill: var(--on-primary, var(--mainForegroundColor));\n            stroke: var(--on-primary, var(--mainForegroundColor));\n          }\n      \n          #plugincontainer .action-button.not-triggered svg {\n            fill: var(--greyForegroundColor, #666);\n            stroke: var(--greyForegroundColor, #666);\n          }\n      \n          /* Specialized button styles */\n          #plugincontainer .translate-field-btn {\n            background-color: var(--greyBackgroundColor, #6c757d);\n            font-size: 0.8em;\n            width: auto;\n            padding: 2px 5px;\n            margin-left: 5px;\n            min-width: unset;\n          }\n          \n          #plugincontainer .translate-field-btn:hover {\n            background-color: var(--secondaryColor, #5a6268);\n          }\n      \n          #plugincontainer #triggerDetail {\n            background-color: var(--primary, var(--mainColor));\n            border: 1px solid var(--primary, var(--mainColor));\n            border-radius: 4px;\n            padding: 6px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n          }\n      \n          #plugincontainer #triggerDetail svg {\n            fill: var(--on-primary, var(--mainForegroundColor));\n            stroke: var(--on-primary, var(--mainForegroundColor));\n          }\n      \n          #plugincontainer .edit-icon path {\n            stroke: var(--on-primary, var(--mainForegroundColor));\n          }\n      \n          /* Rest of the styles remain the same */\n          #plugincontainer #pageButtonsContainer {\n            margin: 15px 0;\n            text-align: center;\n          }\n      \n          #plugincontainer #confirmationBox {\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: var(--primary, var(--mainColor));\n            padding: 20px;\n            border-radius: 5px;\n          }\n      \n          #plugincontainer #confirmationBox p {\n            margin-bottom: 20px;\n            color: var(--on-primary, var(--mainForegroundColor));\n          }\n      \n          #plugincontainer #confirmationBox button {\n            margin-right: 10px;\n            padding: 8px 16px;\n            border: none;\n            border-radius: 3px;\n            background-color: var(--on-primary, var(--mainForegroundColor));\n            color: var(--primary, var(--mainColor));\n            cursor: pointer;\n          }\n      \n          #plugincontainer .page-button {\n            background-color: var(--primary, var(--mainColor));\n            min-width: unset;\n            width: auto;\n          }\n      \n          #plugincontainer .current-page-button {\n            background-color: var(--secondaryColor);\n          }\n      \n          /* Action buttons and Header Styles */\n          #plugincontainer .action-column-header {\n            padding: 0;\n          }\n      \n          #plugincontainer .action-headers-container {\n            display: flex;\n            justify-content: space-between;\n            width: 100%;\n          }\n      \n          #plugincontainer .action-header {\n            flex: 1;\n            text-align: center;\n            font-size: 0.9em;\n            font-weight: bold;\n            padding: 8px 4px;\n            white-space: nowrap;\n          }\n      \n          #plugincontainer .action-buttons-row {\n            display: flex;\n            justify-content: space-between;\n            width: 100%;\n          }\n      \n          #plugincontainer .action-cell {\n            flex: 1;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 4px;\n          }\n      \n          #plugincontainer .action-button.label-xl {\n            font-size: 90%;\n            padding: var(--input-y-padding) calc(var(--input-x-padding) / 2) !important;\n          }\n      \n          #plugincontainer .counter-label {\n            font-size: 0.75em;\n            margin-top: 4px;\n            text-align: center;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          }\n      \n          /* Language notice styles */\n          #plugincontainer .language-notice {\n            margin: 10px 0;\n            padding: 10px;\n            border-radius: 4px;\n          }\n          \n          #plugincontainer .language-notice.success {\n            background-color: #e6ffe6;\n            border: 1px solid #b3ffb3;\n          }\n          \n          #plugincontainer .language-notice.warning {\n            background-color: #fff8e6;\n            border: 1px solid #ffe0b3;\n          }\n          \n          #plugincontainer .language-notice p {\n            margin: 0;\n            font-size: 14px;\n          }\n      \n          /* Field container styles */\n          #plugincontainer .field-container {\n            display: flex;\n            align-items: center;\n            width: 100%;\n          }\n      \n          #plugincontainer .field-container input,\n          #plugincontainer .field-container textarea {\n            flex: 1;\n            min-width: 200px;\n          }\n      \n          /* Modal styles */\n          #plugincontainer .modal {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0,0,0,0.5);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            z-index: 1000;\n          }\n      \n          #plugincontainer .modal-content {\n            background-color: var(--backgroundPrimary, white);\n            padding: 20px;\n            border-radius: 5px;\n            width: 400px;\n            text-align: center;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n          }\n      \n          #plugincontainer .modal-content h3 {\n            margin-top: 0;\n            color: var(--primary, var(--mainColor));\n          }\n      \n          #plugincontainer .modal-content button {\n            margin: 10px;\n            padding: 10px 15px;\n            min-width: 100px;\n          }\n      \n          /* For the translation status colors */\n          #plugincontainer input[style*="background-color: #e6ffe6"],\n          #plugincontainer textarea[style*="background-color: #e6ffe6"] {\n            background-color: #e6ffe6 !important;\n          }\n      \n          #plugincontainer input[style*="background-color: #ffe6e6"],\n          #plugincontainer textarea[style*="background-color: #ffe6e6"] {\n            background-color: #ffe6e6 !important;\n          }\n      \n          #plugincontainer input[style*="background-color: #fff8e6"],\n          #plugincontainer textarea[style*="background-color: #fff8e6"] {\n            background-color: #fff8e6 !important;\n          }\n        '}function B(){g();let r=document.createElement("style");r.innerHTML=l(),o.appendChild(r)}B()}})}export{I as register};