\n
\n );\n }\n}\n\n","import React, { Component } from 'react';\nimport { Message } from 'components/Message/message.component';\n\ntype SpeechRecognitionProps = {\n message: string,\n mediaDevicesStatus: string,\n isRecording: boolean\n}\n\nexport default class SpeechRecognitionComponent extends Component<{}, SpeechRecognitionProps> {\n\n private isSupported: boolean;\n private speechRecognition: any;\n\n constructor(props: any) {\n super(props);\n\n this.state = {\n message: '',\n mediaDevicesStatus: '',\n isRecording: false\n }\n\n\n this.speechRecognition = eval('new webkitSpeechRecognition()');\n this.isSupported = !!this.speechRecognition;\n\n this.onEndRecognition = this.onEndRecognition.bind(this);\n this.start = this.start.bind(this);\n this.stop = this.stop.bind(this);\n this.onStop = this.onStop.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n componentDidMount() {\n navigator.permissions.query({ name: 'microphone' })\n .then(function (permissionStatus) {\n console.log('microphone permission state is ', permissionStatus.state);\n return permissionStatus;\n })\n .then(permissionStatus => {\n this.setState({\n ...this.state,\n mediaDevicesStatus: permissionStatus.state\n });\n permissionStatus.onchange = () => this.onChangePermissionStatus(permissionStatus);\n });\n }\n\n onChangePermissionStatus(permissionStatus: PermissionStatus) {\n this.setState({\n ...this.state,\n mediaDevicesStatus: permissionStatus.state\n });\n }\n\n start() {\n this.speechRecognition.interimResults = true;\n this.speechRecognition.lang = \"en-US\";\n this.speechRecognition.continuous = true;\n\n this.setState({ isRecording: true }, () => this.speechRecognition.start());\n\n // This event happens when you talk in the microphone\n this.speechRecognition.onresult = this.onEndRecognition;\n this.speechRecognition.onend = this.onStop;\n };\n\n onStop() {\n this.setState({ isRecording: false });\n }\n\n stop() {\n this.speechRecognition.stop();\n }\n\n onEndRecognition(event: any) {\n for (let i = event.resultIndex; i < event.results.length; i++) {\n if (event.results[i].isFinal) {\n // Here you can get the string of what you told\n const content = event.results[i][0].transcript.trim();\n\n if (this.state.message !== content) {\n this.setState({ message: content });\n this.readOutLoud(content);\n }\n }\n }\n }\n\n onClick() {\n if (this.state.isRecording) {\n this.stop();\n return;\n }\n\n this.start();\n }\n\n readOutLoud(message: string) {\n var speech = new SpeechSynthesisUtterance();\n\n // Set the text and voice attributes.\n speech.text = message;\n speech.volume = 1;\n speech.rate = 1;\n speech.pitch = 1;\n\n window.speechSynthesis.speak(speech);\n }\n\n onChangeInput(e: React.FormEvent\n {this.state.message ?? 'Say something to me'}\n
\n );\n\n }\n}\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n//#2\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(\n process.env.PUBLIC_URL,\n window.location.href\n );\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport * as Sentry from '@sentry/browser';\n\nimport logo from './logo.png';\nimport './App.css';\n\nconst sentryOptions = {\n dsn: process.env.REACT_APP_SENTRY_DSN,\n release: `my-project-name@${process.env.REACT_APP_VERSION}`\n} as Sentry.BrowserOptions;\n\nSentry.init(sentryOptions);\n\nfunction App() {\n return (\n \n
\n {this.state.isRecording ? 'Stop' : 'Click and say something'}
\n\n \n ![\"logo\"](\"/pwa_icon_512-transp.png\")
\n \n Source code available\n \n \n
\n );\n}\n\nexport default App;\n","import React from 'react';\n\ntype IconProps = {\n name: string,\n alt?: string,\n style?: React.CSSProperties\n}\n\nexport const Icon = (props: IconProps & React.CSSProperties) =>\n{props.name}","import React from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport { Icon } from 'components/Icons/icons.component';\n\ntype NavigationProps = {\n history: any\n}\n\nexport const NavigationBar = (props: NavigationProps) =>\n \n \n Welcome to PWA Samples.\n
\n \n
\n","import React from 'react';\n\ntype OfflineState = {\n isOffline: boolean\n}\n\nexport default class OfflineWaring extends React.PureComponent<{}, OfflineState> {\n\n constructor(props: any) {\n super(props);\n\n this.state = {\n isOffline: !navigator.onLine\n }\n }\n\n componentDidMount(){\n\t\t// Add event listener offline to detect network loss.\n\t\twindow.addEventListener(\"offline\", () => this.onChangeNetworkState(true));\n\n\t\t// Add event listener online to detect network recovery.\n\t\twindow.addEventListener(\"online\", () => this.onChangeNetworkState(false));\n }\n \n componentWillUnmount() {\n\t\t// Remove event listener offline to detect network loss.\n\t\twindow.removeEventListener(\"offline\", () => this.onChangeNetworkState(true));\n\n\t\t// Remove event listener online to detect network recovery.\n\t\twindow.removeEventListener(\"online\", () => this.onChangeNetworkState(false));\n }\n \n onChangeNetworkState(isOffline: boolean) {\n\t\tthis.setState({isOffline});\n }\n \n render() {\n if (!this.state.isOffline) {\n return null;\n }\n\n return (\n \n signal_wifi_off You are offline\n
);\n }\n}","import React from 'react';\nimport TodoTaskModel from './todo-task.model';\n\nexport const ToDoTask = (props: TodoTaskModel) =>\n - \n {tasks}\n
\n {this.renderTasks()}\n
\n );\n }\n}\n\n","import React, { Component } from 'react';\nimport { Message } from 'components/Message/message.component';\n\nexport default class VibrateComponent extends Component<{}, {}> {\n\n randomVibrate(evt: any) {\n navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]);\n console.log('vibrate');\n }\n\n render() {\n if (!navigator.vibrate) {\n return (\n \n \n \n
\n \n
\n );\n }\n}\n\n","import React, { Component } from 'react';\nimport { Message } from 'components/Message/message.component';\n\ntype MessageProps = {\n message: string\n}\n\nexport default class TextToSpeechComponent extends Component<{}, MessageProps> {\n\n constructor(props: any) {\n super(props);\n\n this.state = {\n message: ''\n }\n\n this.readOutLoud = this.readOutLoud.bind(this);\n }\n\n readOutLoud(message: string) {\n var speech = new SpeechSynthesisUtterance();\n\n // Set the text and voice attributes.\n speech.text = message;\n speech.volume = 1;\n speech.rate = 1;\n speech.pitch = 1;\n\n window.speechSynthesis.speak(speech);\n }\n\n onChangeInput(e: React.FormEvent\n
\n Click me
\n\n \n
\n );\n\n }\n}\n","import React, { Component } from 'react';\nimport DeviceSelectionComponent from 'components/Camera/device-selection.component';\nimport { Message } from 'components/Message/message.component';\nimport { MediaRecorder, IMediaRecorder } from 'extendable-media-recorder';\n\n\ntype MicrophoneState = {\n mediaDevicesStatus: string,\n isMicrophoneSupported: boolean,\n isRecording: boolean,\n selectedMicrophone: string\n recordedAudios: string[],\n};\n\nexport default class MicrophoneComponent extends Component<{}, MicrophoneState> {\n\n private currentStream?: MediaStream;\n private isStreamming: boolean = false;\n private mediaRecorder: IMediaRecorder | undefined;\n private chunks: any[] = [];\n\n constructor(props: {}) {\n super(props);\n this.state = {\n mediaDevicesStatus: '',\n isMicrophoneSupported: !!navigator.mediaDevices,\n isRecording: false,\n selectedMicrophone: '',\n recordedAudios: []\n };\n\n this.setMediaStream = this.setMediaStream.bind(this);\n this.onChangeMicrophone = this.onChangeMicrophone.bind(this);\n this.onStop = this.onStop.bind(this);\n this.onDataAvailable = this.onDataAvailable.bind(this);\n }\n\n componentDidMount() {\n navigator.permissions.query({ name: 'microphone' })\n .then(function (permissionStatus) {\n console.log('microphone permission state is ', permissionStatus.state);\n return permissionStatus;\n })\n .then(permissionStatus => {\n this.setState({\n ...this.state,\n mediaDevicesStatus: permissionStatus.state\n });\n permissionStatus.onchange = () => this.onChangePermissionStatus(permissionStatus);\n });\n this.startStreamming();\n }\n\n componentWillUnmount() {\n if (typeof this.currentStream !== 'undefined') {\n this.stopStreamming();\n }\n\n if(!!this.mediaRecorder) {\n this.mediaRecorder.removeEventListener('stop', this.onStop);\n }\n }\n\n onChangePermissionStatus(permissionStatus: PermissionStatus) {\n this.setState({\n ...this.state,\n mediaDevicesStatus: permissionStatus.state\n });\n\n if (this.isStreamming) {\n return;\n }\n this.startStreamming();\n }\n\n async setMediaStream(stream: MediaStream) {\n\n if (stream) {\n this.currentStream = stream;\n }\n\n this.mediaRecorder = new MediaRecorder(stream); \n this.mediaRecorder.addEventListener('stop', this.onStop);\n this.mediaRecorder.ondataavailable = this.onDataAvailable;\n }\n\n onStop(e: any) {\n console.log(\"data available after MediaRecorder.stop() called.\");\n\n ;\n console.log(\"recorder stopped\");\n\n \n }\n\n onDataAvailable(e: any) {\n this.chunks.push(e.data);\n console.log(\"data available called.\");\n\n if (!this.mediaRecorder || this.mediaRecorder.state === 'recording') {\n return;\n }\n\n console.info(\"data available called after stop.\");\n this.saveRecording();\n }\n\n saveRecording() {\n const blob = new Blob(this.chunks, { 'type': 'audio/oog; codecs=opus' });\n this.chunks = [];\n const audioURL = window.URL.createObjectURL(blob);\n this.setState({ recordedAudios: [...this.state.recordedAudios, audioURL] });\n }\n\n startRecording() {\n if (!this.mediaRecorder || this.mediaRecorder.state === 'recording') {\n return;\n }\n\n // Kick off the recording.\n this.mediaRecorder.start();\n this.setState({isRecording: true});\n console.log(\"start recording\");\n }\n\n stopRecording() {\n if (!this.mediaRecorder || this.mediaRecorder.state !== 'recording') {\n return;\n }\n\n this.mediaRecorder?.stop();\n this.setState({isRecording: false});\n console.log(\"stop recording\");\n }\n\n startStreamming() {\n if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {\n navigator.mediaDevices.getUserMedia({ audio: true }).then(this.setMediaStream).catch((error) => console.warn(JSON.stringify(error)));\n this.isStreamming = true;\n }\n }\n\n stopStreamming() {\n this.currentStream?.getTracks().forEach(track => {\n track.stop();\n });\n\n this.currentStream = undefined;\n this.isStreamming = false;\n }\n\n onChangeMicrophone(evt: React.FormEvent this.readOutLoud(this.state.message)}>\n
\n Say it
\n- {audioTracks}
\n
\n );\n }\n}","import React, { Suspense, lazy } from 'react';\nimport ReactDOM from 'react-dom';\nimport { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';\nimport { createBrowserHistory } from 'history';\nimport * as Sentry from '@sentry/browser';\nimport * as serviceWorker from './serviceWorker';\n\nimport './index.scss';\nimport App from './App';\nimport { Message } from 'components/Message/message.component';\nimport { NavigationBar } from 'components/NavigationBar/navigation-bar.component';\nimport OfflineWaring from 'components/OfflineWaning/offline-waring.component';\nimport AmbientLightSensorComponent from 'components/AmbientLightSensorComponent/ambient-light-sensor.component';\nimport TodoListComponent from 'components/ToDoTask/todo-list.component';\nimport VibrateComponent from 'components/Vibrate/vibrate.component';\nimport TextToSpeechComponent from 'components/TextToSpeech/text-to-speech.component';\nimport MicrophoneComponent from 'components/Microphone/microphone.component';\nimport SpeechRecognitionComponent from 'components/SpeechRecognition/speech-recognition.component';\n\nconst GeolocationComponent = lazy(() => import('components/Geolocation/geolocation.component'));\nconst CameraComponent = lazy(() => import('components/Camera/camera.component'));\n\ndeclare global {\n interface Window { ga: any; }\n}\n\nSentry.init({dsn: process.env.REACT_APP_SENTRY_DSN, release: process.env.REACT_APP_VERSION });\nvar history = createBrowserHistory();\n\nhistory.listen((location) => {\n console.log(\"Send page view: \" + location.pathname + location.search);\n if (!window.ga)\n return;\n\n window.ga('set', 'page', location.pathname + location.search);\n window.ga('send', 'pageview');\n});\n\nReactDOM.render(\n \n {this.renderAudios()}\n
\n \n
\n