\r\n Je hebt in totaal {total} keer naar Bob geluisterd ! \r\n\r\n \r\n \r\n \r\n \r\n {createNormalButtons(originalAudioFiles)}\r\n \r\n \r\n \r\n \r\n {createNormalButtons(mashupAudioFiles)}\r\n \r\n \r\n\r\n\r\n\r\n {history.length > 0 &&\r\n Geluisterd naar: \r\n }\r\n\r\n
);\r\n}\r\n","import React, { useState } from 'react';\r\nimport {originalAudioFiles} from '../audioFiles';\r\nimport playAudio from '../playAudio';\r\nimport useStateWithLocalStorage from '../useStateWithLocalStorage';\r\nimport { TextBlock } from './TextBlock';\r\n\r\nexport function IsHetBierTijd() {\r\n const [lastPlayedTitle, setLastPlayedTitle] = useState(null);\r\n const [total, setTotal] = useStateWithLocalStorage('SoundBoard.IsHetBierTijd.total', 0);\r\n\r\n const handleClick = () => {\r\n var randomItem = originalAudioFiles[Math.floor(Math.random() * originalAudioFiles.length)];\r\n setLastPlayedTitle(randomItem.title);\r\n setTotal(total + 1);\r\n playAudio(randomItem.src);\r\n }\r\n\r\n return (\r\n \r\n {createMandButtons(mandAudioFiles)}\r\n
\r\n - \r\n {historyReversedCopy.map((value, index) =>\r\n
- \r\n
{value} \r\n \r\n )}\r\n
\r\n Bob zegt: {lastPlayedTitle} \r\n }\r\n Bob heeft in totaal {total} keer je vraag beantwoord ! \r\n
\r\n );\r\n}","import React from 'react';\r\nimport './YoutubeIFrame.scss';\r\n\r\nexport function YoutubeIFrame(props) {\r\n let src = \"https://www.youtube.com/embed/\" + props.embedId;\r\n if (props.startAt) {\r\n src += \"?start=\" + props.startAt;\r\n }\r\n return (\r\n \r\n \r\n
\r\n {lastPlayedTitle !== null &&\r\n\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport './AppBackground.scss';\r\nimport backgroundImg from './background.jpg'\r\nimport backgroundLaserImg from './background-laser.jpg'\r\n\r\nexport function AppBackground(props) {\r\n // restart rotating bob head on click, using double animation technique from https://css-tricks.com/restart-css-animation/\r\n // fun effect when browser does not show lasers (mobile firefox?)\r\n // update: Removed this because it still does not work in FF mobile, maybe the event is not fired? see App.js\r\n // and laser img replacement also resets animation\r\n return (\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport './ShareButtons.scss';\r\n\r\n// from https://www.flaticon.com/packs/social-networks-logos-2\r\nimport whatsappLogo from './whatsapp.svg';\r\nimport facebookLogo from './facebook.svg';\r\nimport twitterLogo from './twitter.svg';\r\nimport { TextBlock } from '../TextBlock';\r\n\r\nconst buttons = [\r\n {\r\n name: \"Whatsapp\",\r\n logo: whatsappLogo,\r\n url: \"https://wa.me/?text=\" + encodeURI(\"Wat zegt Huisbaas Bob? \" + window.location.href)\r\n },\r\n {\r\n name: \"Facebook\",\r\n logo: facebookLogo,\r\n url: \"https://www.facebook.com/sharer/sharer.php?u=\" + encodeURI(window.location.href)\r\n },\r\n {\r\n name: \"Twitter\",\r\n logo: twitterLogo,\r\n url: `https://twitter.com/intent/tweet?text=${encodeURI(\"Wat zegt Huisbaas Bob?\")}&url=${encodeURI(window.location.href)}`\r\n },\r\n];\r\n\r\nexport function ShareButtons() {\r\n\r\n return (\r\n \r\n {/* \r\n preload laser image so it works the first time \r\n https://serversideup.net/how-to-preload-css-background-images/ \r\n */}\r\n 
\r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n Deel Bob met de wereld ! \r\n
\r\n );\r\n}","import React, { useState, useEffect } from 'react';\r\nimport Button from 'react-bootstrap/Button';\r\nimport Modal from 'react-bootstrap/Modal';\r\nimport ProgressBar from 'react-bootstrap/ProgressBar';\r\nimport Spinner from 'react-bootstrap/Spinner';\r\nimport { preloadAllAudio } from '../playAudio';\r\n\r\n\r\nexport function PreloadAudio(props) {\r\n\r\n const [show, setShow] = useState(true);\r\n const [progress, setProgress] = useState(null);\r\n\r\n const handleClose = () => setShow(false);\r\n //const handleShow = () => setShow(true);\r\n\r\n const preloadProgressCallback = progress => {\r\n // create copy of obj to change state\r\n setProgress({ ...progress });\r\n if (progress.getIsLoaded()) {\r\n setTimeout(() => {\r\n // comment this line to keep showing modal\r\n setShow(false);\r\n }, 250);\r\n }\r\n }\r\n useEffect(() => {\r\n preloadAllAudio(preloadProgressCallback);\r\n // [] param: ensure the useEffect only runs once https://css-tricks.com/run-useeffect-only-once/\r\n }, []);\r\n\r\n if (progress === null) {\r\n // prevent null exceptions in template below\r\n return (null);\r\n }\r\n\r\n return (\r\n \r\n {buttons.map(button =>\r\n \r\n \r\n {button.name}\r\n \r\n )}\r\n
\r\n
\r\n \r\n {error}\r\n
\r\n )}\r\n {/*\r\n {JSON.stringify(progress, null, \" \")}\r\n */}\r\n handlePointerDown(e)} onPointerUp={e => handlePointerUp(e)}>\r\n
);\r\n}\r\n\r\nexport default App;","// 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\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is 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\nexport function register(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(process.env.PUBLIC_URL, window.location.href);\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, 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, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\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.then(registration => {\n registration.unregister();\n });\n }\n}\n","// ------------- support IE11 voor Bé :) -------------\n// https://www.npmjs.com/package/react-app-polyfill \n// https://stackoverflow.com/questions/55967048/how-do-i-support-ie-11-with-create-react-app-3-0 \n// These must be the first lines in src/index.js\nimport 'react-app-polyfill/ie11';\nimport 'react-app-polyfill/stable';\n// --------------------------------------------------\n\n\n// General styles for index and App (including bootstrap), NOT for components\nimport './css/index.scss';\n\n\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n//import './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n {/* \r\n
\r\n \r\n Wil je weten waar Bob nu is? \r\n {/* Rickroll :D */}\r\n \r\n Klik hier voor de video !\r\n \r\n
\r\n \r\n
*/}\r\n \r\n \r\n Doe Jos eens 5 euro's geven!\r\n
\r\n