media-stream-player/dist/esm/Settings.js

Player built on top of media-stream-library

import React, { useCallback, useRef, useState } from 'react';
import styled from 'styled-components';
import { Switch } from './components/Switch';
const SettingsMenu = styled.div `
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 32px;
  right: 0;
  background: rgb(0, 0, 0, 0.66);
  padding: 8px 16px;
  margin-bottom: 16px;
  margin-right: 8px;

  &:after {
    content: '';
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    position: absolute;
    bottom: -5px;
    right: 12px;
    background: rgb(0, 0, 0, 0.66);
  }
`;
const SettingsItem = styled.div `
  display: flex;
  flex-direction: row;
  color: white;
  height: 24px;
  width: 320px;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0;
`;
export const Settings = ({ parameters, format, onFormat, onVapix, showStatsOverlay, toggleStats, }) => {
    const [textString, setTextString] = useState(parameters['textstring']);
    const textStringTimeout = useRef();
    const changeParam = useCallback((e) => {
        const { name, value } = e.target;
        switch (name) {
            case 'textstring':
                setTextString(value);
                clearTimeout(textStringTimeout.current);
                textStringTimeout.current = window.setTimeout(() => {
                    onVapix(name, value);
                }, 300);
                break;
            case 'text':
                onVapix(name, value ? '1' : '0');
                break;
            default:
                console.warn('internal error');
        }
    }, [onVapix]);
    const changeStatsOverlay = useCallback((e) => toggleStats(e.target.checked), [toggleStats]);
    const changeFormat = useCallback((e) => onFormat(e.target.value), [onFormat]);
    const changeResolution = useCallback((e) => onVapix('resolution', e.target.value), [onVapix]);
    const changeRotation = useCallback((e) => onVapix('rotation', e.target.value), [onVapix]);
    const changeCompression = useCallback((e) => onVapix('compression', e.target.value), [onVapix]);
    return (React.createElement(SettingsMenu, null,
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Format"),
            React.createElement("select", { onChange: changeFormat, defaultValue: format },
                React.createElement("option", { value: "RTP_H264" }, "H.264 (RTP over WS)"),
                React.createElement("option", { value: "MP4_H264" }, "H.264 (MP4 over HTTP)"),
                React.createElement("option", { value: "RTP_JPEG" }, "Motion JPEG"),
                React.createElement("option", { value: "JPEG" }, "Still image"))),
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Resolution"),
            React.createElement("select", { value: parameters['resolution'], onChange: changeResolution },
                React.createElement("option", { value: "" }, "default"),
                React.createElement("option", { value: "1920x1080" }, "1920 x 1080 (FHD)"),
                React.createElement("option", { value: "1280x720" }, "1280 x 720 (HD)"),
                React.createElement("option", { value: "800x600" }, "800 x 600 (VGA)"))),
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Rotation"),
            React.createElement("select", { value: parameters['rotation'], onChange: changeRotation },
                React.createElement("option", { value: "0" }, "0"),
                React.createElement("option", { value: "90" }, "90"),
                React.createElement("option", { value: "180" }, "180"),
                React.createElement("option", { value: "270" }, "270"))),
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Compression"),
            React.createElement("select", { value: parameters['compression'], onChange: changeCompression },
                React.createElement("option", { value: "" }, "default"),
                React.createElement("option", { value: "0" }, "0"),
                React.createElement("option", { value: "10" }, "10"),
                React.createElement("option", { value: "20" }, "20"),
                React.createElement("option", { value: "30" }, "30"),
                React.createElement("option", { value: "40" }, "40"),
                React.createElement("option", { value: "50" }, "50"),
                React.createElement("option", { value: "60" }, "60"),
                React.createElement("option", { value: "70" }, "70"),
                React.createElement("option", { value: "80" }, "80"),
                React.createElement("option", { value: "90" }, "90"),
                React.createElement("option", { value: "100" }, "100"))),
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Text overlay"),
            React.createElement("input", { name: "textstring", value: textString, onChange: changeParam }),
            React.createElement(Switch, { name: "text", checked: parameters['text'] === '1', onChange: changeParam })),
        React.createElement(SettingsItem, null,
            React.createElement("div", null, "Stats overlay"),
            React.createElement(Switch, { checked: showStatsOverlay, onChange: changeStatsOverlay }))));
};
//# sourceMappingURL=Settings.js.map