Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
inputs-select
Advanced tools
Readme
This Web Component follows the open-wc recommendation and is meant to be used with the OpenTok Video SDK.
A Vonage Video API account will be needed.
A goal is to simplify the code needed to create a chat room quickly. This Web Component will display the user's feed and publish to the session.
npm i @vonage/inputs-select
<script type="module">
import '@vonage/inputs-select/inputs-select.js';
</script>
<script type="module" src="https://unpkg.com/@vonage/inputs-select@latest/inputs-select.js?module"></script>
<inputs-select></inputs-select>
audio-label
: set the text for the audio inputs label. Default is "Audio Source:".video-label
: set the text for the audio inputs label. Default is "Video Source:".button-text
: set the text for the audio inputs label. Default is "Publish".<inputs-select audio-label="Audio Inputs:" video-label="Video Inputs:" button-text="Preview"></inputs-select>
inputsSelected
: details contains audio and video device IDs that can be passed into the Web Componentexample (event.details)
{
audioSource: 'default',
videoSource: 'ab123c4d5ef6g789h0...',
}
The Web Component uses the CSS pseudo-element ::part
for styling. So you can style it the same way you would style a regular button element. Here's an example:
This is the HTML structure of the Web Component:
<form part="form">
<label for="audio-source-select" part="label audio">Audio Source:</label>
<select id="audio-source-select" part="select audio">
<option value="audio.deviceId" part="option audio">audio input 1</option>
...
</select><br/>
<label for="video-source-select" part="label video">Video Source:</label>
<select id="video-source-select" part="select video">
<option value="video.deviceId" part="option video">video input 1</option>
...
</select>
<button id="inputs-btn" type="button" part="button">Publish</button>
</form>
Here is how to apply CSS to a part:
inputs-select::part(button) {
font-size: 20px;
color: white;
background-color: black;
border-radius: 5px;
}
Note: This can vary with library / framework (see examples folder)
To scan the project for linting and formatting errors, run
npm run lint
To automatically fix linting and formatting errors, run
npm run format
To execute a single test run:
npm run test
To run the tests in interactive watch mode run:
npm run test:watch
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
For most of the tools, the configuration is in the package.json
to minimize the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
web-dev-server
npm start
To run a local development server that serves the basic demo located in demo/index.html
FAQs
inputs-select Web Component to be used with Video API following open-wc recommendations
The npm package inputs-select receives a total of 0 weekly downloads. As such, inputs-select popularity was classified as not popular.
We found that inputs-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.