@fortawesome/free-solid-svg-icons#faSync JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSync.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: LibraryAuthoringPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 6 votes |
|
ButtonTogglesBase = ({
library, setShowPreviews, showPreviews, sending, quickAddBehavior, intl,
}) => (
<>
<Button variant="success" className="mr-1" size="lg" disabled={sending} onClick={quickAddBehavior}>
<FontAwesomeIcon icon={faPlus} className="pr-1" />
{intl.formatMessage(messages[`library.detail.add_${library.type}`])}
</Button>
<Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg">
<FontAwesomeIcon icon={faSync} className="pr-1" />
{ intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
</Button>
</>
)
Example #2
| Source File: CourseImportPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 6 votes |
|
CourseImportPageHeader = ({ intl, showCourses, ...props }) => {
const showCoursesHandler = () => {
props.setShowCourses(!showCourses);
};
return (
<div className="wrapper-mast wrapper">
<header className="mast has-actions has-navigation has-subtitle">
<div className="page-header">
<small className="subtitle">{intl.formatMessage(messages['library.course_import.page.parent_heading'])}</small>
<h1 className="page-header-title">{intl.formatMessage(messages['library.course_import.page.heading'])}</h1>
</div>
<nav className="nav-actions">
<ul>
<li className="nav-item">
<Button className="toggle-importable-courses" variant="primary" onClick={showCoursesHandler}>
<FontAwesomeIcon icon={faSync} className="pr-3" />
{showCourses
? intl.formatMessage(messages['library.course_import.importable_courses.hide'])
: intl.formatMessage(messages['library.course_import.importable_courses.show'])}
</Button>
</li>
</ul>
</nav>
</header>
</div>
);
}
Example #3
| Source File: App.js From Codera with MIT License | 5 votes |
|
function App() {
const [html, setHtml] = useLocalStorage("html");
const [css, setCss] = useLocalStorage("css");
const [js, setJs] = useLocalStorage("js");
const [srcDoc, setSrcDoc] = useLocalStorage("");
useEffect(() => {
const timeout = setTimeout(() => {
setSrcDoc(`
<html>
<body>${html}</body>
<style>${css}</style>
<script>${js}</script>
</html>
`);
}, 250);
return () => clearTimeout(timeout);
}, [html, css, js, setSrcDoc]);
const clearAll = () => {
setHtml("");
setCss("");
setJs("");
setSrcDoc("");
};
return (
<>
<div className="top-header" style={{ backgroundColor : '#3c3e44'}}>
<div></div>
<h1 className="ti ct" style={{color:"white"}}>
<span>
<img
src={require("../resources/poke-icons/006-mega-x.png")}
title="Online Code Editor"
alt=""
/>
</span>
Codera - Your Coding Arena
</h1>
<button className="clear-all-btn" onClick={clearAll} title="Refresh">
<FontAwesomeIcon icon={faSync} />
</button>
</div>
<div className="pane top-pane">
<Editor
language="xml"
displayName="HTML"
value={html}
onChange={setHtml}
/>
<Editor
language="css"
displayName="CSS"
value={css}
onChange={setCss}
/>
<Editor
language="javascript"
displayName="JS"
value={js}
onChange={setJs}
/>
</div>
<div className="pane">
<iframe
srcDoc={srcDoc}
title="output"
sandbox="allow-scripts"
frameBorder="0"
width="100%"
height="100%"
></iframe>
</div>
</>
);
}
Example #4
| Source File: index.js From map33.js with MIT License | 5 votes |
|
render() {
return (
<Bottom>
<Row>
<Form.Group as={Col} sm={6} md={5}>
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Checkbox
label={(
<FontAwesomeIcon
icon={faSync}
size="lg"
className="mr-2"
/>
)}
aria-label="Camera rotation"
checked={this.state.rotate}
onChange={this.handleRotate.bind(this)}
/>
</InputGroup.Prepend>
<Form.Control
placeholder="Latitude"
aria-label="Latitude"
size="sm"
type="number" step="any"
value={this.state.lat}
onChange={this.handleLat.bind(this)}
/>
<Form.Control
placeholder="Latitude"
aria-label="Latitude"
size="sm"
type="number" step="any"
value={this.state.lon}
onChange={this.handleLon.bind(this)}
/>
<InputGroup.Append>
<GoLocation size="sm" variant="secondary" onClick={this.go.bind(this)}>
<FontAwesomeIcon
icon={faLocationArrow}
size="lg"
className="mr-2"
/>
</GoLocation>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Row>
<Row>
<GitHubButton type="stargazers" namespace="blaze33" repo="map33.js" />
<TwitterButton href="https://twitter.com/intent/follow?region=follow_link&screen_name=maxmre&tw_p=followbutton"
target="_blank">
<i></i> Follow @maxmre
</TwitterButton>
</Row>
</Bottom>
)
}
Example #5
| Source File: CourseImportListItem.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 5 votes |
|
CourseImportListItem = ({
intl, course, libraryId, importBlocksHandler, ongoingImportState, taskPaginationParams,
}) => {
const [importState, setImportState] = useState('default');
useEffect(() => {
setImportState(ongoingImportState);
}, [ongoingImportState]);
const handleImport = () => {
importBlocksHandler({ params: { libraryId, courseId: course.id, taskPaginationParams } });
};
const importButtonProps = {
state: ongoingImportState || 'default',
variant: importState === 'error' ? 'danger' : 'primary',
labels: {
default: intl.formatMessage(messages['library.course_import.new_import.label']),
pending: intl.formatMessage(messages['library.course_import.ongoing_import.label']),
complete: intl.formatMessage(messages['library.course_import.import_scheduled.label']),
error: intl.formatMessage(messages['library.course_import.import_schedule_failed.label']),
},
icons: {
default: <FontAwesomeIcon icon={faPlus} className="icon-inline" />,
pending: <FontAwesomeIcon icon={faSpinner} className="icon-inline fa-spin" />,
complete: <FontAwesomeIcon icon={faCheck} className="icon-inline" />,
error: <FontAwesomeIcon icon={faSync} className="icon-inline" />,
},
disabledStates: ['pending', 'complete'],
className: 'btn-lg',
onClick: handleImport,
};
return (
<div className="library-link">
<Row className="h-100">
<Col xs={6} md={6} className="my-auto">
<h3 className="library-title">{course.title}</h3>
</Col>
<Col xs={6} md={6} className="my-auto text-center text-md-right">
<StatefulButton {...importButtonProps} />
</Col>
</Row>
<div className="library-metadata">
<span className="library-org metadata-item">
<span className="label">{intl.formatMessage(messages['library.course_import.list_item.organization'])}</span>
<span className="value">{course.org}</span>
</span>
<span className="library-slug metadata-item">
<span className="label">{intl.formatMessage(messages['library.course_import.list_item.id'])}</span>
<span className="value">{course.id}</span>
</span>
</div>
</div>
);
}
Example #6
| Source File: Editor.js From Reactive with MIT License | 4 votes |
|
// https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/docs/api.md
function Editor({videoUrl, timings, setTimings}) {
//Boolean state to handle video mute
const [isMuted, setIsMuted] = useState(false)
//Boolean state to handle whether video is playing or not
const [playing, setPlaying] = useState(false)
//Float integer state to help with trimming duration logic
const [difference, setDifference] = useState(0.2)
//Boolean state to handle deleting grabber functionality
const [deletingGrabber, setDeletingGrabber] = useState(false)
//State for error handling
const [currentWarning, setCurrentWarning] = useState(null)
//State for imageUrl
const [imageUrl, setImageUrl] = useState('')
//Boolean state handling trimmed video
const [trimmingDone, setTrimmingDone] = useState(false)
//Integer state to blue progress bar as video plays
const [seekerBar, setSeekerBar] = useState(0)
//Ref handling metadata needed for trim markers
const currentlyGrabbedRef = useRef({'index': 0, 'type': 'none'})
//Ref handling the trimmed video element
const trimmedVidRef = useRef()
//Ref handling the initial video element for trimming
const playVideoRef = useRef()
//Ref handling the progress bar element
const progressBarRef = useRef()
//Ref handling the element of the current play time
const playBackBarRef = useRef()
//Variable for error handling on the delete grabber functionality
const warnings = {'delete_grabber': (<div>Please click on the grabber (either start or end) to delete it</div>)}
//State handling storing of the trimmed video
const [trimmedVideo, setTrimmedVideo] = useState()
//Integer state to handle the progress bars numerical incremation
const [progress, setProgress] = useState(0)
//Boolean state handling whether ffmpeg has loaded or not
const [ready, setReady] = useState(false)
//Ref to handle the current instance of ffmpeg when loaded
const ffmpeg = useRef(null)
//Function handling loading in ffmpeg
const load = async () => {
try{
await ffmpeg.current.load()
setReady(true)
}
catch(error) {
console.log(error)
}
}
//Loading in ffmpeg when this component renders
useEffect(() => {
ffmpeg.current = createFFmpeg({
log: true,
corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js'
})
load()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
//Lifecycle handling the logic needed for the progress bar - displays the blue bar that grows as the video plays
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
if(playVideoRef.current.onloadedmetadata) {
const currentIndex = currentlyGrabbedRef.current.index
const seek = (playVideoRef.current.currentTime - timings[0].start) / playVideoRef.current.duration * 100
setSeekerBar(seek)
progressBarRef.current.style.width = `${seekerBar}%`
if((playVideoRef.current.currentTime >= timings[0].end)) {
playVideoRef.current.pause()
setPlaying(false)
currentlyGrabbedRef.current = ({'index': currentIndex + 1, 'type': 'start'})
progressBarRef.current.style.width = '0%'
progressBarRef.current.style.left = `${timings[0].start / playVideoRef.current.duration * 100}%`
playVideoRef.current.currentTime = timings[0].start
}
}
window.addEventListener('keyup', (event) => {
if(event.key === ' ') {
playPause()
}
})
//Handles the start and end metadata for the timings state
const time = timings
playVideoRef.current.onloadedmetadata = () => {
if(time.length === 0) {
time.push({'start': 0, 'end': playVideoRef.current.duration})
setTimings(time)
addActiveSegments()
}
else{
addActiveSegments()
}
}
})
//Lifecycle that handles removing event listener from the mouse event on trimmer - Desktop browser
useEffect(() => {
return window.removeEventListener('mouseup', removeMouseMoveEventListener)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
//Lifecycle that handles removing event listener from the touch/pointer event on trimmer - mobile browser
useEffect(() => {
return window.removeEventListener('pointerup', removePointerMoveEventListener)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
//Function handling the trimmer movement logic
const handleMouseMoveWhenGrabbed = (event) => {
playVideoRef.current.pause()
addActiveSegments()
let playbackRect = playBackBarRef.current.getBoundingClientRect()
let seekRatio = (event.clientX - playbackRect.left) / playbackRect.width
const index = currentlyGrabbedRef.current.index
const type = currentlyGrabbedRef.current.type
let time = timings
let seek = playVideoRef.current.duration * seekRatio
if((type === 'start') && (seek > ((index !== 0) ? (time[index - 1].end + difference + 0.2) : 0)) && seek < time[index].end - difference){
progressBarRef.current.style.left = `${seekRatio * 100}%`
playVideoRef.current.currentTime = seek
time[index]['start'] = seek
setPlaying(false)
setTimings(time)
}
else if((type === 'end') && (seek > time[index].start + difference) && (seek < (index !== (timings.length - 1) ? time[index].start - difference - 0.2 : playVideoRef.current.duration))){
progressBarRef.current.style.left = `${time[index].start / playVideoRef.current.duration * 100}%`
playVideoRef.current.currentTime = time[index].start
time[index]['end'] = seek
setPlaying(false)
setTimings(time)
}
progressBarRef.current.style.width = '0%'
}
//Function that handles removing event listener from the mouse event on trimmer - Desktop browser
const removeMouseMoveEventListener = () => {
window.removeEventListener('mousemove', handleMouseMoveWhenGrabbed)
}
//Lifecycle that handles removing event listener from the mouse event on trimmer - Mobile browser
const removePointerMoveEventListener = () => {
window.removeEventListener('pointermove', handleMouseMoveWhenGrabbed)
}
//Function handling reset logic
const reset = () => {
playVideoRef.current.pause()
setIsMuted(false)
setPlaying(false)
currentlyGrabbedRef.current = {'index': 0, 'type': 'none'}
setDifference(0.2)
setDeletingGrabber(false)
setCurrentWarning(false)
setImageUrl('')
setTimings([{'start': 0, 'end': playVideoRef.current.duration}])
playVideoRef.current.currentTime = timings[0].start
progressBarRef.current.style.left = `${timings[0].start / playVideoRef.current.duration * 100}%`
progressBarRef.current.style.width = '0%'
addActiveSegments()
}
//Function handling thumbnail logic
const captureSnapshot = () => {
let video = playVideoRef.current
const canvas = document.createElement('canvas')
// scale the canvas accordingly
canvas.width = video.videoWidth
canvas.height = video.videoHeight
// draw the video at that frame
canvas.getContext('2d')
.drawImage(video, 0, 0, canvas.width, canvas.height)
// convert it to a usable data URL
const dataURL = canvas.toDataURL()
setImageUrl({imageUrl: dataURL})
}
//Function handling download of thumbnail logic
const downloadSnapshot = () => {
let a = document.createElement('a') //Create <a>
a.href = imageUrl //Image Base64 Goes here
a.download = 'Thumbnail.png' //File name Here
a.click() //Downloaded file
}
//Function handling skip to previous logic
const skipPrevious = () => {
if(playing){
playVideoRef.current.pause()
}
// let previousIndex = (currentlyGrabbed.index !== 0) ? (currentlyGrabbed.index - 1) : (timings.length - 1)
// setCurrentlyGrabbed({currentlyGrabbed: {'index': previousIndex, 'type': 'start'}, playing: false})
// currentlyGrabbedRef.current = {'index': previousIndex, 'type': 'start'}
// progressBarRef.current.style.left = `${timings[previousIndex].start / playVideoRef.current.duration * 100}%`
// progressBarRef.current.style.width = '0%'
// playVideoRef.current.currentTime = timings[previousIndex].start
}
//Function handling play and pause logic
const playPause = () => {
if(playing){
playVideoRef.current.pause()
}
else{
if((playVideoRef.current.currentTime >= timings[0].end)) {
playVideoRef.current.pause()
setPlaying(false)
currentlyGrabbedRef.current = {'index': 0, 'type': 'start'}
playVideoRef.current.currentTime = timings[0].start
progressBarRef.current.style.left = `${timings[0].start / playVideoRef.current.duration * 100}%`
progressBarRef.current.style.width = '0%'
}
playVideoRef.current.play()
}
setPlaying(!playing)
}
//Function handling skip to next logic
const skipNext = () => {
if(playing){
playVideoRef.current.pause()
}
// let nextIndex = (currentlyGrabbed.index !== (timings.length - 1)) ? (currentlyGrabbed.index + 1) : 0
// setCurrentlyGrabbed({currentlyGrabbed: {'index': nextIndex, 'type': 'start'}, playing: false})
// currentlyGrabbedRef.current = {'index': nextIndex, 'type': 'start'}
// progressBarRef.current.style.left = `${timings[nextIndex].start / playVideoRef.current.duration * 100}%`
// progressBarRef.current.style.width = '0%'
// playVideoRef.current.currentTime = timings[nextIndex].start
}
//Function handling updating progress logic (clicking on progress bar to jump to different time durations)
const updateProgress = (event) => {
let playbackRect = playBackBarRef.current.getBoundingClientRect()
let seekTime = ((event.clientX - playbackRect.left) / playbackRect.width) * playVideoRef.current.duration
playVideoRef.current.pause()
// find where seekTime is in the segment
let index = -1
let counter = 0
for(let times of timings){
if(seekTime >= times.start && seekTime <= times.end){
index = counter
}
counter += 1
}
if(index === -1) {
return
}
setPlaying(false)
currentlyGrabbedRef.current = {'index': index, 'type': 'start'}
progressBarRef.current.style.width = '0%' // Since the width is set later, this is necessary to hide weird UI
progressBarRef.current.style.left = `${timings[index].start / playVideoRef.current.duration * 100}%`
playVideoRef.current.currentTime = seekTime
}
//Function handling adding new trim markers logic
const addGrabber = () => {
const time = timings
const end = time[time.length - 1].end + difference
setDeletingGrabber({deletingGrabber: false, currentWarning: null})
if(end >= playVideoRef.current.duration){
return
}
time.push({'start': end + 0.2, 'end': playVideoRef.current.duration})
setTimings(time)
addActiveSegments()
}
//Function handling first step of deleting trimmer
const preDeleteGrabber = () => {
if(deletingGrabber){
setDeletingGrabber({deletingGrabber: false, currentWarning: null})
}
else{
setDeletingGrabber({deletingGrabber: true, currentWarning: 'delete_grabber'})
}
}
//Function handling deletion of trimmers logic
const deleteGrabber = (index) => {
let time = timings
setDeletingGrabber({deletingGrabber: false, currentWarning: null, currentlyGrabbed: {'index': 0, 'type': 'start'}})
setDeletingGrabber({deletingGrabber: false, currentWarning: null, currentlyGrabbed: {'index': 0, 'type': 'start'}})
if(time.length === 1){
return
}
time.splice(index, 1)
progressBarRef.current.style.left = `${time[0].start / playVideoRef.current.duration * 100}%`
playVideoRef.current.currentTime = time[0].start
progressBarRef.current.style.width = '0%'
addActiveSegments()
}
//Function handling logic of time segments throughout videos duration
const addActiveSegments = () => {
let colors = ''
let counter = 0
colors += `, rgb(240, 240, 240) 0%, rgb(240, 240, 240) ${timings[0].start / playVideoRef.current.duration * 100}%`
for(let times of timings) {
if(counter > 0) {
colors += `, rgb(240, 240, 240) ${timings[counter].end / playVideoRef.current.duration * 100}%, rgb(240, 240, 240) ${times.start / playVideoRef.current.duration * 100}%`
}
colors += `, #ccc ${times.start / playVideoRef.current.duration * 100}%, #ccc ${times.end / playVideoRef.current.duration * 100}%`
counter += 1
}
colors += `, rgb(240, 240, 240) ${timings[counter - 1].end / playVideoRef.current.duration * 100}%, rgb(240, 240, 240) 100%`
playBackBarRef.current.style.background = `linear-gradient(to right${colors})`
}
// Function handling logic for post trimmed video
const saveVideo = async(fileInput) => {
let metadata = {
'trim_times': timings,
'mute': isMuted
}
console.log(metadata.trim_times)
const trimStart = metadata.trim_times[0].start
const trimEnd = metadata.trim_times[0].end
const trimmedVideo = trimEnd - trimStart
console.log('Trimmed Duration: ', trimmedVideo)
console.log('Trim End: ', trimEnd)
try{
//Disabling new-cap for FS function
// eslint-disable-next-line new-cap
ffmpeg.current.FS('writeFile', 'myFile.mp4', await fetchFile(videoUrl))
ffmpeg.current.setProgress(({ratio}) => {
console.log('ffmpeg progress: ', ratio)
if(ratio < 0) {
setProgress(0)
}
setProgress(Math.round(ratio * 100))
})
await ffmpeg.current.run('-ss', `${trimStart}`, '-accurate_seek', '-i', 'myFile.mp4', '-to', `${trimmedVideo}`, '-codec', 'copy', 'output.mp4')
//Disabling new-cap for FS function
// eslint-disable-next-line new-cap
const data = ffmpeg.current.FS('readFile', 'output.mp4')
const url = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}))
setTrimmedVideo(url)
setTrimmingDone(true)
// setLottiePlaying(false)
}
catch(error) {
console.log(error)
}
}
return (
<div className='wrapper'>
{/* Video element for the trimmed video */}
{trimmingDone ?
<div
style={{
maxHeight: '100vh',
marginTop: '50vh'
}}>
<video
style={{
width: '100%',
marginTop: '100px',
borderRadius: '20px',
border: '4px solid #0072cf'
}}
ref={trimmedVidRef}
controls
autoload='metadata'
onClick={() => console.log(trimmedVidRef.current.duration)}
>
<source src={trimmedVideo} type='video/mp4' />
</video>
</div>
: null
}
{/* Main video element for the video editor */}
<video className='video'
autoload='metadata'
muted={isMuted}
ref={playVideoRef}
onLoadedData={() => {
console.log(playVideoRef)
playPause()
}}
onClick={() => {
playPause()
}}
onTimeUpdate={() => {
setSeekerBar(progressBarRef.current.style.width)
}}
>
<source src={videoUrl} type='video/mp4' />
</video>
<div className='playback'>
{/* If there is an instance of the playVideoRef, render the trimmer markers */}
{playVideoRef.current ?
Array.from(timings).map((timing, index) => (
<div key={index}
>
<div key={'grabber_' + index}>
{/* Markup and logic for the start trim marker */}
<div id='grabberStart' className='grabber start'
style={{left: `${timings[0].start / playVideoRef.current.duration * 100}%`}}
// Events for desktop - Start marker
onMouseDown={(event) => {
if(deletingGrabber){
deleteGrabber(index)
}
else{
currentlyGrabbedRef.current = {'index': index, 'type': 'start'}
window.addEventListener('mousemove', handleMouseMoveWhenGrabbed)
window.addEventListener('mouseup', removeMouseMoveEventListener)
}
}}
//Events for mobile - Start marker
onPointerDown={() => {
if(deletingGrabber){
deleteGrabber(index)
}
else{
currentlyGrabbedRef.current = {'index': index, 'type': 'start'}
window.addEventListener('pointermove', handleMouseMoveWhenGrabbed)
window.addEventListener('pointerup', removePointerMoveEventListener)
}
}}
>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='10' height='14' viewBox='0 0 10 14' xmlSpace='preserve'>
<path className='st0' d='M1 14L1 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C2 13.6 1.6 14 1 14zM5 14L5 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C6 13.6 5.6 14 5 14zM9 14L9 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C10 13.6 9.6 14 9 14z'/>
</svg>
</div>
{/* Markup and logic for the end trim marker */}
<div id='grabberEnd' className='grabber end'
style={{left: `${timings[0].end / playVideoRef.current.duration * 100}%`}}
//Events for desktop - End marker
onMouseDown={(event) => {
if(deletingGrabber){
deleteGrabber(index)
}
else{
currentlyGrabbedRef.current = {'index': index, 'type': 'end'}
window.addEventListener('mousemove', handleMouseMoveWhenGrabbed)
window.addEventListener('mouseup', removeMouseMoveEventListener)
}
}}
//Events for mobile - End marker
onPointerDown={() => {
if(deletingGrabber){
deleteGrabber(index)
}
else{
currentlyGrabbedRef.current = {'index': index, 'type': 'end'}
window.addEventListener('pointermove', handleMouseMoveWhenGrabbed)
window.addEventListener('pointerup', removePointerMoveEventListener)
}
}}
>
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' width='10' height='14' viewBox='0 0 10 14' xmlSpace='preserve'>
<path className='st0' d='M1 14L1 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C2 13.6 1.6 14 1 14zM5 14L5 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C6 13.6 5.6 14 5 14zM9 14L9 14c-0.6 0-1-0.4-1-1V1c0-0.6 0.4-1 1-1h0c0.6 0 1 0.4 1 1v12C10 13.6 9.6 14 9 14z'/>
</svg>
</div>
</div>
</div>
))
: []}
<div className='seekable' ref={playBackBarRef} onClick={updateProgress}></div>
<div className='progress' ref={progressBarRef}></div>
</div>
<div className='controls'>
<div className='player-controls'>
<button className='settings-control' title='Reset Video' onClick={reset}><FontAwesomeIcon icon={faSync} /></button>
<button className='settings-control' title='Mute/Unmute Video' onClick={() => setIsMuted({isMuted: !isMuted})}>{isMuted ? <FontAwesomeIcon icon={faVolumeMute} /> : <FontAwesomeIcon icon={faVolumeUp} />}</button>
<button className='settings-control' title='Capture Thumbnail' onClick={captureSnapshot}><FontAwesomeIcon icon={faCamera} /></button>
</div>
<div className='player-controls'>
<button className='seek-start' title='Skip to previous clip' onClick={skipPrevious}><FontAwesomeIcon icon={faStepBackward} /></button>
<button className='play-control' title='Play/Pause' onClick={playPause} >{playing ? <FontAwesomeIcon icon={faPause} /> : <FontAwesomeIcon icon={faPlay} /> }</button>
<button className='seek-end' title='Skip to next clip' onClick={skipNext}><FontAwesomeIcon icon={faStepForward} /></button>
</div>
<div>
<button title='Add grabber' className='trim-control margined' onClick={addGrabber}>Add <FontAwesomeIcon icon={faGripLinesVertical} /></button>
<button title='Delete grabber' className='trim-control margined' onClick={preDeleteGrabber}>Delete <FontAwesomeIcon icon={faGripLinesVertical} /></button>
<button title='Save changes' className='trim-control' onClick={saveVideo}>Save</button>
</div>
</div>
{ready ?
<div></div>
:
<div>Loading...</div>
}
{currentWarning != null ? <div className={'warning'}>{warnings[currentWarning]}</div> : ''}
{(imageUrl !== '') ?
<div className={'marginVertical'}>
<img src={imageUrl} className={'thumbnail'} alt='Photos' />
<div className='controls'>
<div className='player-controls'>
<button className='settings-control' title='Reset Video' onClick={downloadSnapshot}><FontAwesomeIcon icon={faDownload} /></button>
<button className='settings-control' title='Save Video' onClick={() => {
setImageUrl('')
}}><FontAwesomeIcon icon={faEraser} /></button>
</div>
</div>
</div>
: ''}
</div>
)
}
Example #7
| Source File: index.jsx From loopring-swap with GNU General Public License v3.0 | 4 votes |
|
TokenModal = ({
loading,
open,
onClose,
onRefresh,
onChange,
supportedTokens,
balances,
selected,
loggedIn,
}) => {
const { formatMessage, formatNumber } = useIntl();
const contentRef = useRef(null);
const [searchTerm, setSearchTerm] = useState("");
const [tokenDataset, setTokenDataset] = useState(supportedTokens);
useEffect(() => {
let dataset = supportedTokens;
if (searchTerm) {
dataset = dataset.filter(({ symbol, name, address }) => {
const lowerCasedSearchTerm = searchTerm.toLowerCase();
return (
symbol.toLowerCase().includes(lowerCasedSearchTerm) ||
name.toLowerCase().includes(lowerCasedSearchTerm) ||
address.toLowerCase().includes(lowerCasedSearchTerm)
);
});
}
if (balances) {
dataset = dataset.sort(
({ address: firstAddress }, { address: secondAddress }) => {
const wrappedFirstTokenBalance = balances.find(
(balance) => balance.address === firstAddress
);
const wrappedSecondTokenBalance = balances.find(
(balance) => balance.address === secondAddress
);
const firstTokenBalance = new BigNumber(
wrappedFirstTokenBalance &&
wrappedFirstTokenBalance.balance
? wrappedFirstTokenBalance.balance
: "0"
);
const secondTokenBalance = new BigNumber(
wrappedSecondTokenBalance &&
wrappedSecondTokenBalance.balance
? wrappedSecondTokenBalance.balance
: "0"
);
return secondTokenBalance
.minus(firstTokenBalance)
.toNumber();
}
);
}
setTokenDataset(dataset);
}, [searchTerm, supportedTokens, balances]);
const getClickHandler = (token) => () => {
onChange(token);
handleLocalClose();
};
const handleLocalClose = useCallback(() => {
onClose();
setTimeout(() => {
setTokenDataset(supportedTokens);
setSearchTerm("");
}, OPEN_CLOSE_ANIMATION_DURATION);
}, [onClose, supportedTokens]);
const handleLocalCloseOnOutsideClick = useCallback(
(event) => {
if (!contentRef.current.contains(event.target)) {
handleLocalClose();
}
},
[handleLocalClose]
);
const handleSearchTermChange = useCallback((event) => {
setSearchTerm(event.target.value);
}, []);
return (
<>
<FullScreenOverlay open={open} />
<RootFlex open={open} onClick={handleLocalCloseOnOutsideClick}>
<ContentFlex
ref={contentRef}
maxWidth="440px"
flexDirection="column"
>
<SearchFlex mt="4px">
<Box mr={3}>
<FontAwesomeIcon icon={faSearch} />
</Box>
<Box flex={1}>
<Input
value={searchTerm}
onChange={handleSearchTermChange}
placeholder={formatMessage({
id: "token.modal.searchbar.placeholder",
})}
/>
</Box>
{loggedIn && (
<PointableBox ml={3} p={2} minWidth="auto">
<FontAwesomeIcon
icon={faSync}
onClick={onRefresh}
/>
</PointableBox>
)}
<PointableBox ml={3} p={2}>
<FontAwesomeIcon
icon={faTimes}
onClick={handleLocalClose}
/>
</PointableBox>
</SearchFlex>
{loading ? (
<Flex justifyContent="center" mb={4} mt={2}>
<Box>
<Spinner size={40} />
</Box>
</Flex>
) : (
<>
<ListFlex
flexDirection="column"
px="12px"
py="12px"
>
{tokenDataset.length > 0 ? (
tokenDataset.map((token) => {
const { address, symbol, name } = token;
const currentlySelected =
selected === token;
const wrappedBalance = balances.find(
(balance) =>
balance.address === address
);
const etherBalance = new BigNumber(
wrappedBalance &&
wrappedBalance.balance
? wrappedBalance.balance
: "0"
);
return (
<RowFlex
key={address}
alignItems="center"
py={16}
pl="12px"
pr="16px"
onClick={getClickHandler(token)}
selected={currentlySelected}
>
<Box mr={3}>
<TokenIcon
address={address}
size={32}
/>
</Box>
<Flex
alignItems="center"
justifyContent="space-between"
flex={1}
>
<Flex flexDirection="column">
<PrimaryTextBox
mb="2px"
selected={
currentlySelected
}
>
{symbol}
</PrimaryTextBox>
<SecondaryTextBox
selected={
currentlySelected
}
>
{name}
</SecondaryTextBox>
</Flex>
<Box>
{etherBalance.isZero()
? "-"
: formatNumber(
etherBalance,
{
style:
"decimal",
maximumSignificantDigits: 4,
}
)}
</Box>
</Flex>
</RowFlex>
);
})
) : (
<Flex
flexDirection="column"
alignItems="center"
my={3}
px={3}
>
<Box mb={3}>
<EmptyIcon
icon={faExclamationTriangle}
/>
</Box>
<EmptyTextBox textAlign="center" mb={3}>
<FormattedMessage id="token.modal.empty" />
</EmptyTextBox>
</Flex>
)}
</ListFlex>
</>
)}
</ContentFlex>
</RootFlex>
</>
);
}
