const broadcastOptions = {
    codec: 'h264',
    metadata: true
};

await publisher.connect(broadcastOptions)

publisher.sendMetadata('{"score": "4-3"}')

const playbackOptions = {
    codec: 'h264',
    metadata: true
};

await millicastView.connect(playbackOptions)

millicastView.on('metadata', (metadata) => {
  console.log(`Timecode: ${metadata.timecode}`);
  console.log(`Unregistered: ${metadata.unregistered}`);
});  

const transformer = new TransformStream({
    async transform(frame, controller) {
        // Data should start with four bytes to signal the upcoming metadata at end of frame
        const magic_value = [0xca, 0xfe, 0xba, 0xbe];

        const data = [
            ...magic_value,
            ...[...metadata].map((c) => c.charCodeAt(0)),
            0, 0, 0,
            metadata.length,
        ];

        // Create DataView from Array buffer
        const frame_length = frame.data.byteLength;
        const buffer = new ArrayBuffer(frame_length + data.length);
        const view_buffer = new DataView(buffer);
        const view_frame = new DataView(frame.data);

        // Copy old frame buffer to new frame buffer and then append the metadata
        // at the end of the buffer
        for (let i = 0; i < frame_length; ++i) {
            view_buffer.setUint8(i, view_frame.getUint8(i));
        }

        data.forEach((elt, idx) => view_buffer.setUint8(frame_length + idx, elt));

        // Set the new frame buffer
        frame.data = buffer;

        // Send the frame
        controller.enqueue(frame);
    },
});

// Initialization of the Web Worker by RTCRtpScriptTransform
addEventListener("rtctransform", (event) => initialize(event.transformer));

// Metadata to send can be any arbitrary data or a string
var metadata = '';

// Event triggered when the main thread sends a message to the web worker
addEventListener('message', (event) => {
    const { action } = event.data;
  
    switch (action) {
        // Initialization of the Web Worker by Insertable Frames
        case 'init':
            initialize(event.data);
            break;
        // Update the metadata to add to the frames
        case 'metadata':
            metadata = event.data.metadata;
            break;
        default:
            break;
    }
});

// Insert the TransformStream into the video pipeline
function initialize({ readable, writable }) {
    readable
        .pipeThrough(transformer)
        .pipeTo(writable);
}

// Insertable streams for `MediaStreamTrack` is supported.
const supportsInsertableStreams = window.RTCRtpSender
    && !!RTCRtpSender.prototype.createEncodedStreams
    && window.RTCRtpReceiver
    && !!RTCRtpReceiver.prototype.createEncodedStreams;

// WebRTC RTP Script Transform is supported
const supportsRTCRtpScriptTransform = 'RTCRtpScriptTransform' in window;

var workerSender;

async function startPublishing(publishToken, streamName, participantName) {
    const tokenGenerator = () => millicast.Director.getPublisher({
        token: publishToken,
        streamName: streamName,
    });

    const millicastPublish = new millicast.Publish(streamName, tokenGenerator);

    const mediaStream = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true,
    });

    // Start publishing to RTS
    await millicastPublish.connect({
        mediaStream: mediaStream,
        sourceId: participantName,
        peerConfig: {
            // Indicate you want to use Insertable Streams
            encodedInsertableStreams: true,
        },
    });

    // Create a video element
    const videoElement = document.createElement('video');
    document.body.appendChild(videoElement);
    videoElement.muted = true;
    videoElement.autoplay = true;
    videoElement.controls = false;
    videoElement.srcObject = mediaStream;
    videoElement.play();

    workerSender = new Worker('workerSender.js');

    const senders = millicastPublish
        .getRTCPeerConnection()
        .getSenders()
        .filter((elt) => elt.track.kind === 'video');
    const sender = senders[0];

    if (supportsRTCRtpScriptTransform) {

        // Initialize the WebRTC RTP Script Transform
        sender.transform = new RTCRtpScriptTransform(workerSender, {});

    } else if (supportsInsertableStreams) {

        const { readable, writable } = sender.createEncodedStreams();

        // Initialize the web worker with the stream
        workerSender.postMessage({
            action: 'init',
            readable,
            writable,
          }, [
            readable,
            writable,
        ]);

    }
}

function sendMetadata(message) {
    if (workerSender) {
        console.log(`Send metadata: ${message}`);
        workerSender.postMessage({
            action: 'metadata',
            metadata: message,
        });
    }
}

await startPublishing(publishToken, streamName, participantName);

sendMetadata('{"position": {"x": 100, "y": 200}}');

var oldMetadata = '';

const transformer = new TransformStream({
    async transform(frame, controller) {
        // Convert data from ArrayBuffer to Uint8Array
        const frame_data = new Uint8Array(frame.data);
        const total_length = frame_data.length;

        // Shift to left for endianess to retrieve the metadata size from the last
        // 4 bytes of the buffer
        let shift = 3;
        const size = frame_data
            .slice(total_length - 4)
            .reduce((acc, v) => acc + (v << shift--), 0);

        // Use the byte signal identifying that the remaining data is frame metadata and
        // confirm that the signal is in the frame.
        const magic_bytes = frame_data.slice(
            total_length - size - 2 * 4,
            total_length - size - 4
        );

        // Data should start with four bytes to signal the upcoming metadata at end of frame
        const magic_value = [0xca, 0xfe, 0xba, 0xbe];

        const has_magic_value = magic_value.every(
            (v, index) => v === magic_bytes[index]
        );

        // When there is metadata in the frame, get the metadata array and handle it
        // as needed by your application.
        if (has_magic_value) {
            const data = frame_data.slice(total_length - size - 4, total_length - 4);
            const newMetadata = String.fromCharCode(...data);
            if (oldMetadata !== newMetadata) {
                oldMetadata = newMetadata;
                // Send a message to the main thread with the new metadata
                self.postMessage(newMetadata);
            }
        }

        // Send the frame as is which is supported by video players
        controller.enqueue(frame);
    },
});

// Initialization of the Web Worker by RTCRtpScriptTransform
addEventListener("rtctransform", (event) => initialize(event.transformer));

// Initialization of the Web Worker by Insertable Frames
addEventListener('message', (event) => initialize(event.data));

// Insert the TransformStream into the video pipeline
function initialize({ readable, writable }) {
    readable
        .pipeThrough(transformer)
        .pipeTo(writable);
}

async function onTrack(event) {
    if (event.track.kind === 'video') {
        const worker = new Worker("workerReceiver.js");

        if (supportsRTCRtpScriptTransform) {

            // Initialize the WebRTC RTP Script Transform
            event.receiver.transform = new RTCRtpScriptTransform(worker, {});

        } else if (supportsInsertableStreams) {

            const { readable, writable } = event.receiver.createEncodedStreams();

            // Initialize the web worker with the stream
            worker.postMessage({
                readable,
                writable,
            }, [
                readable,
                writable,
            ]);
        }

        // Listen to messages sent by the web worker
        // Each message is a new metadata string
        worker.addEventListener('message', (evt) => {
            const mEvent = new CustomEvent('metadata', { detail: evt.data });
            window.dispatchEvent(mEvent);
        });

        const videoElement = document.createElement('video');
        document.body.appendChild(videoElement);
        videoElement.srcObject = new MediaStream([event.track]);
        videoElement.play();
    }
}

async function startListening(streamAccountId, streamName) {
    const tokenGenerator = () => millicast.Director.getSubscriber({
        streamName: streamName,
        streamAccountId: streamAccountId,
    });

    const viewer = new millicast.View(streamName, tokenGenerator);
    viewer.on('track', (event) => onTrack(event));

    await viewer.connect({
        peerConfig: {
            encodedInsertableStreams: true,
        },
    });
}

enable_frame_transformer(true);

// Set the length of the user data in the last 4 bytes as a signal to unpacking
// the data during playback
void encode(int32_t value, std::vector<uint8_t>& data)
{
    data.push_back((value >> 24) & 0xff);
    data.push_back((value >> 16) & 0xff);
    data.push_back((value >> 8) & 0xff);
    data.push_back(value & 0xff);
}

// Add metadata at the end of the frame data
void on_transformable_frame([[maybe_unused]] uint32_t ssrc, [[maybe_unused]] uint32_t timestamp, std::vector<uint8_t>& data) override
{
    constexpr uint8_t SPEED = 10;
 
    if (pos_x == width || pos_x == 0)
    {
        dir_x *= -1;
    }

    if (pos_y == height || pos_y == 0)
    {
        dir_y *= -1;
    }

    pos_x += dir_x * SPEED;
    pos_y += dir_y * SPEED;

    pos_x = std::clamp(pos_x, 0, width);
    pos_y = std::clamp(pos_y, 0, height);

    encode(pos_x, data);
    encode(pos_y, data);
}