VoiceTools

Голосовые сообщения и голосовой ввод
换行
// ==UserScript==
// @name         VoiceTools
// @namespace    Android/lolz
// @version      0.1
// @license MIT
// @description  Голосовые сообщения и голосовой ввод
// @author       Android
// @match        *://zelenka.guru/threads/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=zelenka.guru
// @grant        none
// ==/UserScript==

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || null;
if (!SpeechRecognition) {
    console.error("Ваш браузер не поддерживает голосовой ввод");
}

(async function () {

    'use strict';

    const COLORS = {
        GRAY: '#8c8c8c',
        GREEN: '#2BAD72',
        LIGHT_GREEN: '#33cc87',
        LIGHT_GRAY: '#D6D6D6',
        RED: '#fa3939'
    };

    const SELECTORS = {
        PARAGRAPH: '.fr-element p',
        WRAPPER: '.fr-wrapper',
        BOX: '.fr-box',
        BUTTON: '.lzt-fe-se-extraButton',
    };

    const BUTTON_SIZES = {
        WIDTH: '24px',
        HEIGHT: '24px',
    };

    const TIMEOUT_DURATION = 10 * 1000;

    let token = '';

    const inputElement = document.querySelector('input[name="_xfToken"]');
    const xfToken = inputElement.value;

    let isListening = false;
    const button = createButton();
    let mediaRecorder;
    let recognition;
    let timeoutId;

    let isMouseDown = false;
    let pressTimeout;
    let holdTimeout;

    function createButton() {
        const button = document.createElement('button');
        button.style.width = BUTTON_SIZES.WIDTH;
        button.style.height = BUTTON_SIZES.HEIGHT;
        button.style.color = COLORS.GRAY;
        button.style.borderRadius = '100%'
        button.classList.add('main__block-color_taupe');
        button.type = 'button';
        button.style.cursor = 'pointer';
        button.style.backgroundColor = 'transparent';
        button.style.border = 'none';
        button.style.display = 'flex';
        button.style.alignItems = 'center';
        button.style.justifyContent = 'center';

        const SVG_SIZES = {
            WIDTH: 20,
            HEIGHT: 20,
        };

        const microphoneSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="${SVG_SIZES.WIDTH}" height="${SVG_SIZES.HEIGHT}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic">
        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
        <line x1="12" y1="19" x2="12" y2="23"></line>
        <line x1="8" y1="23" x2="16" y2="23"></line>
    </svg>
  `;

        button.innerHTML = microphoneSvg;

        const element = document.querySelector(SELECTORS.BUTTON);
        element.parentNode.insertBefore(button, element);

        button.addEventListener('mousedown', function () {
            pressTimeout = setTimeout(function () {
                if (!isListening) {
                    startRecording()
                    clearTimeout(pressTimeout);
                    isMouseDown = true;
                }
            }, 500);
        });

        button.addEventListener('mouseup', function () {
            clearTimeout(pressTimeout);
            clearTimeout(holdTimeout);

            if (!isMouseDown) {
                toggleListening()
            } else {
                stopRecording()
                isMouseDown = false;
            }
        });

        button.addEventListener('mouseleave', function () {
            clearTimeout(pressTimeout);
            clearTimeout(holdTimeout);
        });

        return button;
    }


    function startListening() {
        button.style.color = COLORS.GREEN;
        isListening = true;

        recognition = new SpeechRecognition();
        recognition.lang = 'ru-RU';
        recognition.continuous = true;

        recognition.onstart = () => {
            clearTimeout(timeoutId);
        };

        recognition.onresult = (event) => {
            clearTimeout(timeoutId);

            const result = event.results[event.results.length - 1][0].transcript;
            const paragraphElement = document.querySelector(SELECTORS.PARAGRAPH);
            const frWrapperElement = document.querySelector(SELECTORS.WRAPPER);
            const frBoxElement = document.querySelector(SELECTORS.BOX);

            paragraphElement.textContent = paragraphElement.textContent.replace(/\u200B/g, '').replace(/\u00A0/g, '');
            const shouldAppendSpace = paragraphElement.textContent.trim() !== '';
            paragraphElement.textContent += shouldAppendSpace ? ' ' + result : result;
            frWrapperElement.classList.remove('show-placeholder');
            frBoxElement.classList.add('is-focused');

            timeoutId = setTimeout(() => {
                stopListening();
            }, TIMEOUT_DURATION);
        };

        recognition.onend = () => {
            if (isListening) {
                timeoutId = setTimeout(() => {
                    stopListening();
                }, TIMEOUT_DURATION);
            }
        };

        recognition.start();
    }


    function stopListening() {
        recognition.stop();
        isListening = false;
        button.style.color = COLORS.GRAY;
    };

    function toggleListening() {
        if (isListening) {
            stopListening();
        } else {
            startListening();
        }
    };

    async function initMediaRecorder() {
        const streamOptions = { audio: true };
        const stream = await navigator.mediaDevices.getUserMedia(streamOptions);
        const options = { mimeType: 'video/webm; codecs=h264' };
        mediaRecorder = new MediaRecorder(stream, options);
        let recordedBlobs = [];

        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                recordedBlobs.push(event.data);
            }
        };

        mediaRecorder.onstop = async () => {
            const blob = new Blob(recordedBlobs, { type: 'video/webm' });

            try {
                const file = await uploadVideoFile(token, blob);
                addVoiceMessageReply(file)
            } catch (uploadError) {
                console.error('Error uploading the video file:', uploadError);
            }

            recordedBlobs = [];
        };
    }

    function addVoiceMessageReply(link) {
        const message = '[MEDIA=cdn]' + link + '[/MEDIA]'

        const threadUrl = document.querySelector('link[rel="canonical"]').getAttribute('href')
        const addReplyUrl = threadUrl + 'add-reply'

        const regex = /\/threads\/\d+\//;
        const match = threadUrl.match(regex);
        const threadAndNum = match[0]

        let formdata = new FormData;
        formdata.append("message_html", message)
        formdata.append("_xfRelativeResolver", threadUrl)
        formdata.append("last_date", Math.floor(Date.now() / 1e3))
        formdata.append("last_known_date", Math.floor(Date.now() / 1e3))
        formdata.append("_xfRequestUri", threadAndNum)
        formdata.append("_xfNoRedirect", 1)
        formdata.append("_xfResponseType", "json")
        formdata.append("_xfToken", xfToken)

        let addReplyRequestOptions = {
            method: 'POST',
            headers: {
                'User-Agent': 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36'
            },
            body: formdata,
        };
        fetch(addReplyUrl, addReplyRequestOptions)
    }

    async function startRecording() {
        button.style.color = COLORS.RED;
        mediaRecorder.start();
    }

    function stopRecording() {
        button.style.color = COLORS.GRAY;
        mediaRecorder.stop();
    }

    async function getToken() {
        try {
            const getTokenUrl = 'https://zelenka.guru/editor/cdn';
            const tokenData = {
                _xfToken: xfToken,
                _xfResponseType: 'json',
            };
            const tokenFormData = new URLSearchParams(tokenData).toString();
            const tokenRequestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                },
                body: tokenFormData,
            };

            const response = await fetch(getTokenUrl, tokenRequestOptions);
            const data = await response.json();
            token = data.token;
        } catch (error) {
            console.error('Error while getting token:', error);
        }
    }

    async function uploadVideoFile(token, blob) {
        const formData = new FormData();
        formData.append('file', blob);

        const baseCdnUrl = 'https://lztcdn.com/';
        const uploadUrl = baseCdnUrl + 'upload/';
        const filesUrl = baseCdnUrl + 'files/';

        const requestOptions = {
            method: 'POST',
            headers: {
                'X-Cdn-Filename': 'File',
                'X-Cdn-Token': token,
            },
            body: formData,
        };

        try {
            const response = await fetch(uploadUrl, requestOptions);
            const data = await response.json();
            return data.key;
        } catch (error) {
            console.error('Error while uploading mp4 file:', error);
            return null;
        }
    }

    initMediaRecorder();
    getToken();
})();
欢迎访问Greasy Fork镜像
