Refactor video implementation: Replace complex VideoJS setup with clean minimal implementation. Fixes HLS video playback on all pages, improves server MIME type configuration, removes unnecessary files and scripts.
ci/woodpecker/push/woodpecker Pipeline was successful Details

This commit is contained in:
Leopere 2025-03-08 11:57:32 -05:00
parent adaec67969
commit 376784527f
42 changed files with 210 additions and 328 deletions

View File

@ -20,7 +20,7 @@
@tsFiles {
path *.ts
}
header @m3u8Files Content-Type "application/vnd.apple.mpegurl"
header @m3u8Files Content-Type "application/x-mpegURL"
header @tsFiles Content-Type "video/MP2T"
# Security headers

View File

@ -0,0 +1 @@

View File

@ -13,4 +13,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/research/ title=Research tabindex=0>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1>Components</h1><a href=# class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" data-upgraded=,MaterialButton>Showerloop Kit Component List 2018</a><section><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><h2>Production</h2><p>Made in Finland - for the most part. We've been doing our best to source materials as locally as possible. Sadly it's harder and harder to producers here in Finland or if we can it's just too expensive for us until we can produce more component inhouse.</p><p>The main components of the filter and electronics are, however, made here in Finland with the help of tools and expertise from Aalto Fablab in Helsinki, Varia vocational school & AIRO Island Ry.</p></div><div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><dl><dt>Main Features</dt><dd>Showerloop can be be integrated into existing showers<br>Water can be diverted to a storage/ grey water tank<br>Fully 12 V DC off-grid system is possible</dd><dt>Dimensions</dt><dd>23 cm x 45 cm x 150 cm*<br>35 kg<br>( + 10 kg packaging )</dd><dt>Filtrate</dt><dd>Nilsilän Quartz Sand<br>Activated Carbon<br>Geotextile</dd><dt>Fasteners</dt><dd>Varios screws<br>3d printed valve hoder<br>3d printer hose fasters<br>3d printed filter fastener</dd></dl></div><div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><dl><dt>Pump</dt><dd>12 V DC self-priming membrane pump<br>The pump can be placed almost anywhere and
can run dry, pumps up to 3.3 bar.</dd><dt>Piping & Valves</dt><dd>21 mm transparent hose<br>Brass T's, 90 bends and quick connectors<br>Plastic quick connectors for maintenance</dd><dt>Filters</dt><dd>10mm CNC milled lids<br>200mm transparent acrylic tube<br>3 mm laser cut spacers<br>M8 stainless steel metal rods</dd><dt>*Smart Shower & Sensors</dt><dd>In the future</dd></dl></div><div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><dl><dt>Heater & Thermostat</dt><dd>-3 kW resistive heater<br>NPT 10k Temperature probe<br>and Thermostat<br>Solid State Optocouple<br>Brass piping for thermostat</dd><dt>UVIR</dt><dd>240V AC [26W]<br>[ 7 cm diam. x 55</dd><dt>Switch board & power housing</dt><dd>IP67 Waterproof containers for electrical devices<br>8- channel relay module<br>Ground Fault Circuit Interruptor<br>Fuses 10A and 2A<br>12V DC Motor Controller PWM<br>230V AC - 12V DC Transformer [150W]</dd></dl></div></div></section></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
can run dry, pumps up to 3.3 bar.</dd><dt>Piping & Valves</dt><dd>21 mm transparent hose<br>Brass T's, 90 bends and quick connectors<br>Plastic quick connectors for maintenance</dd><dt>Filters</dt><dd>10mm CNC milled lids<br>200mm transparent acrylic tube<br>3 mm laser cut spacers<br>M8 stainless steel metal rods</dd><dt>*Smart Shower & Sensors</dt><dd>In the future</dd></dl></div><div class="mdl-cell mdl-cell--4-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><dl><dt>Heater & Thermostat</dt><dd>-3 kW resistive heater<br>NPT 10k Temperature probe<br>and Thermostat<br>Solid State Optocouple<br>Brass piping for thermostat</dd><dt>UVIR</dt><dd>240V AC [26W]<br>[ 7 cm diam. x 55</dd><dt>Switch board & power housing</dt><dd>IP67 Waterproof containers for electrical devices<br>8- channel relay module<br>Ground Fault Circuit Interruptor<br>Fuses 10A and 2A<br>12V DC Motor Controller PWM<br>230V AC - 12V DC Transformer [150W]</dd></dl></div></div></section></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

File diff suppressed because one or more lines are too long

View File

@ -16,4 +16,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
=> <strong>LOOP</strong></span><p>After passing through the filters the water is clear, clean and bacteria free and ready to be pumped back into the shower head. A small electrical resistor can be used to reheat the water to your set temperature. When you are done the water goes down the drain like normal or you can use the water for something else, like doing your laundry or flushing the toilet to save even more water.</p></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><img class=responsive-img src=/images/showerspin.webp alt="Shower Loop system in action showing water filtering and recycling through the circular system"></div><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><img class=responsive-img src=/images/complete_waterloop_for_household.webp alt="Diagram showing water flow through a complete household: shower water recycled to toilet and laundry, with filtration systems"><p>Here's a little preview of how we imagine a complete household water loop to look like. By reusing the same water from one process to another we can dramatically decrease water consumption without having to sacrifice. We are building the system piece by piece but we need parts. If you make things like plumbing components, valves, pumps, ultra violet systems and filters let's work together. If you have spare parts feel free to send them to us :)</p><img class=responsive-img src=/images/Schematic555.webp alt="Technical schematic of ShowerLoop system showing pump, filters, UV sterilization, and water flow paths">
<img class=responsive-img src=/images/shower-loop1.webp alt="Complete ShowerLoop installation showing filtration unit connected to a standard shower system"></div></div></section><section><h2>How It Will Work</h2>Get in the shower and select your desired water temperature on a small screen. Once you press start, water begins to flow just like in a normal shower, the difference is that instead of the water being wasted by letting it go down the drain, it's collected and pumped though several filters:</section><section><h2>Automate, Monitor, Re-program, Customise</h2><p>Multiple sensors and a micro-controller are used to allow for complete monitoring and control of the system so you can understand more about your own behavior and personalize the shower to fit your needs (e.g. tell you when to get out of the shower in case you're in a hurry). You can set your ideal showering conditions like flow rate, water temperature, ambiance and to automatically wash the filters once you've left the shower so that the filters last longer before requiring manual maintenance. By measuring use and changes in flow rate it can inform you when to change filters.</p><img class=responsive-img src=/images/webp/monitor.webp alt="Digital monitoring display showing water usage, temperature, and filter status of the ShowerLoop system">
<img class=responsive-img src=/images/showerloop+future+ui.webp alt="Concept design of future ShowerLoop user interface with touchscreen controls for temperature, flow rate, and water savings statistics"><p>Currently we are using a simple two-row, two-color LCD screen (below) but in the future the interface could look more like this and be programmed by your smart phone (it's just a draft so don't get caught up on the numbers - it's only an example).</p></section><section><h2>Improvement</h2><div class=mdl-grid><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=side-by-side-image-container><img class=responsive-img src=/images/20150918_MOREL_MG_0012_Small_poc21.webp alt="The POC21 Model of ShowerLoop with copper pipes and manually controlled filtration system"></div><h3>The POC21 Model</h3><p>(See the DIY instructions) made with copper pipes and without the automated control system and slightly smaller filters for a lower flow rate.
This is more closely resembles the final product but the placement and look of the filters can be modified by the user.</p></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=side-by-side-image-container><img class=responsive-img src=/images/sloopdesign+%2871+of+75%29.webp alt="Fully operational ShowerLoop prototype with automated piping system and 10 l/min water flow capacity"></div><h3>The fully operational prototype</h3><p>The shower built for 10 l/min and automated piping. Drinking water hose pipe was used for testing and fast iterations.</p></div></div></section><section><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><h2>The Only Challenge</h2><p>The water needs to be collected for the pump which needs to be placed at the lowest point of the shower, ideally under the basin. If you have an Italian-style shower you can build a new basin instead of tearing the floor apart. We are also working on a way to hack your existing drain and using self-priming pumps so that you can plug the drain during loop mode and suck the water out of the small collection basin.</p><img class=responsive-img src=/images/challenge.webp alt="Illustration of drainage basin installation challenges showing how to modify existing shower floors for water collection"></div></section></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
This is more closely resembles the final product but the placement and look of the filters can be modified by the user.</p></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div class=side-by-side-image-container><img class=responsive-img src=/images/sloopdesign+%2871+of+75%29.webp alt="Fully operational ShowerLoop prototype with automated piping system and 10 l/min water flow capacity"></div><h3>The fully operational prototype</h3><p>The shower built for 10 l/min and automated piping. Drinking water hose pipe was used for testing and fast iterations.</p></div></div></section><section><div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><h2>The Only Challenge</h2><p>The water needs to be collected for the pump which needs to be placed at the lowest point of the shower, ideally under the basin. If you have an Italian-style shower you can build a new basin instead of tearing the floor apart. We are also working on a way to hack your existing drain and using self-priming pumps so that you can plug the drain during loop mode and suck the water out of the small collection basin.</p><img class=responsive-img src=/images/challenge.webp alt="Illustration of drainage basin installation challenges showing how to modify existing shower floors for water collection"></div></section></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -1,9 +1,26 @@
<!doctype html><html lang=en><head><meta name=generator content="Hugo 0.143.1"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><title>Home | ShowerLoop</title>
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="ShowerLoop - Real-time filtration, purification, recycling & heat recovery system for showers. Open source and sustainable water conservation technology."><script>let liveReloadSocket=null;const OriginalWebSocket=window.WebSocket;window.WebSocket=function(e,t){if(e.includes("/__livereload")){if(document.readyState==="complete"){liveReloadSocket=new OriginalWebSocket(e,t);const n={onmessage:null,onclose:null};return Object.defineProperty(liveReloadSocket,"onmessage",{set:function(e){n.onmessage=e},get:function(){return n.onmessage}}),Object.defineProperty(liveReloadSocket,"onclose",{set:function(e){n.onclose=e},get:function(){return n.onclose}}),liveReloadSocket.addEventListener("message",function(e){n.onmessage&&n.onmessage(e)}),liveReloadSocket.addEventListener("close",function(e){liveReloadSocket=null,n.onclose&&n.onclose(e)}),liveReloadSocket}return{send:function(){},close:function(){},addEventListener:function(){},removeEventListener:function(){},set onmessage(e){},set onclose(e){}}}return new OriginalWebSocket(e,t)};for(const e in OriginalWebSocket)OriginalWebSocket.hasOwnProperty(e)&&(window.WebSocket[e]=OriginalWebSocket[e]);window.WebSocket.prototype=OriginalWebSocket.prototype,document.addEventListener("pageshow",function(e){if(e.persisted){console.log("Page restored from bfcache");const e=window.location.protocol==="https:"?"wss:":"ws:";liveReloadSocket=new OriginalWebSocket(`${e}//${window.location.host}/__livereload`),liveReloadSocket.onmessage=function(e){e.data==="reload"&&window.location.reload()}}}),window.addEventListener("pagehide",function(){liveReloadSocket&&(liveReloadSocket.onclose=null,liveReloadSocket.close(),liveReloadSocket=null)})</script><link rel=preload href=/css/vendor/material-icons.css as=style><link rel=preload href=/images/logo2.webp as=image><link rel=stylesheet href=/css/vendor/material-icons.css><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css></noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css></noscript><script type=module>
import * as utils from '/js/utils.modern.min.js';
window.utilsModule = utils;
</script><script type=module src=/js/app.modern.min.js defer></script><script type=module src=/js/video-init.modern.min.js defer></script><script type=module src=/js/skip-to-content.modern.min.js defer></script><script type=module src=/js/material.modern.min.js defer></script><script nomodule src=/js/app.min.js defer></script><script nomodule src=/js/video-init.min.js defer></script><script nomodule src=/js/skip-to-content.min.js defer></script><script nomodule src=/js/material.min.js defer></script><link rel=stylesheet type=text/css href=/css/app.min.css><link rel=stylesheet type=text/css href=/css/custom.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/custom.css></noscript><link rel=icon href=/static/favicon.svg type=image/svg+xml><link rel=icon href=/static/favicon.ico type=image/x-icon></head><body class=page><body class=page><div class="mdl-layout mdl-js-layout
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="ShowerLoop - Real-time filtration, purification, recycling & heat recovery system for showers. Open source and sustainable water conservation technology."><script>let liveReloadSocket=null;const OriginalWebSocket=window.WebSocket;window.WebSocket=function(e,t){if(e.includes("/__livereload")){if(document.readyState==="complete"){liveReloadSocket=new OriginalWebSocket(e,t);const n={onmessage:null,onclose:null};return Object.defineProperty(liveReloadSocket,"onmessage",{set:function(e){n.onmessage=e},get:function(){return n.onmessage}}),Object.defineProperty(liveReloadSocket,"onclose",{set:function(e){n.onclose=e},get:function(){return n.onclose}}),liveReloadSocket.addEventListener("message",function(e){n.onmessage&&n.onmessage(e)}),liveReloadSocket.addEventListener("close",function(e){liveReloadSocket=null,n.onclose&&n.onclose(e)}),liveReloadSocket}return{send:function(){},close:function(){},addEventListener:function(){},removeEventListener:function(){},set onmessage(e){},set onclose(e){}}}return new OriginalWebSocket(e,t)};for(const e in OriginalWebSocket)OriginalWebSocket.hasOwnProperty(e)&&(window.WebSocket[e]=OriginalWebSocket[e]);window.WebSocket.prototype=OriginalWebSocket.prototype,document.addEventListener("pageshow",function(e){if(e.persisted){console.log("Page restored from bfcache");const e=window.location.protocol==="https:"?"wss:":"ws:";liveReloadSocket=new OriginalWebSocket(`${e}//${window.location.host}/__livereload`),liveReloadSocket.onmessage=function(e){e.data==="reload"&&window.location.reload()}}}),window.addEventListener("pagehide",function(){liveReloadSocket&&(liveReloadSocket.onclose=null,liveReloadSocket.close(),liveReloadSocket=null)});</script><link rel=preload href=/css/vendor/material-icons.css as=style><link rel=preload href=/images/logo2.webp as=image><link rel=stylesheet href=/css/vendor/material-icons.css><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css></noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css></noscript>
<link rel=stylesheet href=/css/vendor/video-js.min.css>
<script src=/js/videojs/video.min.js></script>
<script src=/js/videojs/videojs-http-streaming.min.js></script>
<script type=module>
import * as utils from '/js/utils.modern.min.js';
window.utilsModule = utils;
</script><script type=module src=/js/app.modern.min.js defer></script><script type=module src=/js/material.modern.min.js defer></script><script nomodule src=/js/app.min.js defer></script><script nomodule src=/js/material.min.js defer></script><link rel=stylesheet type=text/css href=/css/app.min.css><link rel=stylesheet type=text/css href=/css/custom.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/custom.css></noscript><link rel=icon href=/static/favicon.svg type=image/svg+xml><link rel=icon href=/static/favicon.ico type=image/x-icon>
<style>
.video-container {
position: relative;
width: 100%;
margin-bottom: 2rem;
}
.video-js {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
</style>
</head><body class=page><body class=page><div class="mdl-layout mdl-js-layout
mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div class=mdl-layout__header-row><a href=/ class=mdl-layout-title><img class=logo src=/images/logo2.webp height=50 width=auto alt="ShowerLoop Logo"></a><div class=mdl-layout-spacer></div><nav class="mdl-navigation mdl-layout--large-screen-only"><a class=mdl-navigation__link href=/ title=Home>Home</a>
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works">How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research>Research</a>
@ -12,12 +29,25 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works" tabindex=0>How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research tabindex=0>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><div class=chocolate-hero-section style=background-image:url(/images/material-bg.webp)><div class=hero-row-group><div class=hero-row><div class="hero-row-item hero-text-info"><h1 class=mdl-typography--display-3>Shower Loop</h1><h2>Open Source - Open Hardware - Ecological - Economical.</h2><p>Real-time filtration, purification, recycling & heat recovery system for showers. Made in Finland, for Earth.</p></div><div class="hero-row-item hero-video"><div class=video-container><video id=video-hero-1741362614 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=none width=100% height=auto poster=/videos/thumbnails/video1.webp data-setup='{"fluid": true, "responsive": true, "html5": {"vhs": {"overrideNative": true, "enableLowInitialPlaylist": true, "limitRenditionsByPlayerDimensions": true}}, "controlBar": {"pictureInPictureToggle": false}, "playbackRates": [0.75, 1, 1.25, 1.5, 2], "preload": "none"}'>
<source src=/videos/hls/video1/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that <a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div></div></div></div></div><div class=cta><div class=cta-row-group><div class=cta-row><div class=cta-row-item><p class="mdl-typography--headline mdl-typography--font-thin">Looking to make a change? Want to support the project?</p><a href=/components class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Check Out our Components</a></div></div></div></div><main><div class=homepage-content><div class=home-introduction><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class=mdl-typography--display-2>Shower Loop vs Normal Shower</h2><p class=intro-description>90% reduction in water usage and 70-90% in energy reduction for a 10 minute shower with a flow rate of 10 l/min. Savings are dependant on user behaviour and can vary. Use Just one bucket of water for a shower of any length. See the savings section for more information.</p><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save Water</h3><p>Capture, Filter, Reuse</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Saving Energy</h3><p>By reusing warm water.</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save The Planet</h3><p>Save Money</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Open Hardware</h3><p>Copy, improve, adapt, share</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Assemble It Yourself</h3><p>With manufactured and off-shell components</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Enjoy Better Showers</h3><p>The single pump provides stable water pressure and the thermostat and heater keep water nice and warm</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Off - Grid Ready</h3><p>The entire system can run on a 12V DC</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>No Plumber Needed</h3><p>Shower Loop is like a standalone appliance without connecting to water mains</p></div></div></div></div></div></div></div><div class=home-works><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">How It Works</h2><p class=intro-description>Showers are great, but pouring hot and almost drinkable water down the drain is not. Besides the obvious costs to the environment and your bills, there is also a conscious on unconscious psychological cost any time you create waste. To solve this problem we created Showerloop. It's a shower that collects, cleans and reuses the water in real time while you are showering. So now you can shower for as long as you like but with a reduced ecological impact.</p><div class="mdl-grid videos" style=justify-content:center><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video2 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video2/poster.webp data-setup='{"fluid": true}'>
<source src=/videos/hls/video2/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video2")})</script></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video3 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video3/poster.webp data-setup='{"fluid": true}'>
<source src=/videos/hls/video3/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video3")})</script></div></div></div></div></div></div><div class=recent-posts><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">Recent News</h2><p class=blog-description></p><div class=mdl-grid><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone blog-post mdl-card mdl-shadow--2dp"><div class=mdl-card__title><h3 class=mdl-card__title-text>2 Ways to Be Economical When Showering With an Injury</h3></div><div class=mdl-card__supporting-text><p><p>It's extremely challenging to lead your daily life while sustaining an injury. And yet, dealing with sports injuries is something that most of us will have to go through, with nearly 2 million sports-related injuries affecting high school athletes alone per year. Most of us know the feeling of attempting to take a shower or bath when your arm is wrapped in a cast and cannot get wet. It's a defeated feeling, and it can quickly take away the motivation to shower or bathe in the first place. After all, wouldn't it be easier to not deal with the challenge? Furthermore, you may also be concerned that showering with your sports-related injury will be a longer process than a normal shower, making the entire ordeal less environmentally friendly. While there are ways to make sure you are being economical while showering, like being conscientious of what you put down the drain, you may not always be thinking about the environment when trying to avoid getting your injury wet in the shower. Fortunately, there are two ways you can be economical about your water usage while showering with an injury, including:</p></p></div><div class="mdl-card__actions mdl-card--border"><a href=/posts/blog4/ class="mdl-button mdl-button--colored mdl-button mdl-js-button mdl-button--raised mdl-button--colored" tabindex=0 aria-label="Read more about 2 Ways to Be Economical When Showering With an Injury">Read Article: 2 Ways to Be Economical When Showering With an Injury</a></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone blog-post mdl-card mdl-shadow--2dp"><div class=mdl-card__title><h3 class=mdl-card__title-text>Don't Put These Things Down The Shower Drain!</h3></div><div class=mdl-card__supporting-text><p><p>Natural water in Finland is some of the most polluted water in Europe (read the discussions in the article). You might be contributing to its pollution without realizing it, such as if you're putting things down the drain that you really shouldn't. Making your shower eco-friendly should be about saving water as well as preventing water contamination. Here's what you can do to be greener and cleaner!</p><p>In Finland, people use an average of 140 liters of water every day. By installing a product such as Showerloop into your shower, you can save water and energy. Showerloop reuses water while you shower so that it doesn't go to waste and you don't have to feel guilty about taking longer showers. However, that's just Step One to ensuring a more eco-friendly shower. Step Two involves preventing toxins from ending up in water systems and the environment. That means you can enjoy showering without worrying about how you're harming the water and wildlife.</p></p></div><div class="mdl-card__actions mdl-card--border"><a href=/posts/blog3/ class="mdl-button mdl-button--colored mdl-button mdl-js-button mdl-button--raised mdl-button--colored" tabindex=0 aria-label="Read more about Don't Put These Things Down The Shower Drain!">Read Article: Don't Put These Things Down The Shower Drain!</a></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script src="/js/video-init-fixed.min.js"></script></body></html>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><div class=chocolate-hero-section style=background-image:url(/images/material-bg.webp)><div class=hero-row-group><div class=hero-row><div class="hero-row-item hero-text-info"><h1 class=mdl-typography--display-3>Shower Loop</h1><h2>Open Source - Open Hardware - Ecological - Economical.</h2><p>Real-time filtration, purification, recycling & heat recovery system for showers. Made in Finland, for Earth.</p></div><div class="hero-row-item hero-video"><div class=video-container>
<video id="video-hero" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" poster="/videos/thumbnails/video1.webp">
<source src="/videos/hls/video1/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div></div></div></div></div><div class=cta><div class=cta-row-group><div class=cta-row><div class=cta-row-item><p class="mdl-typography--headline mdl-typography--font-thin">Looking to make a change? Want to support the project?</p><a href=/components class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Check Out our Components</a></div></div></div></div><main><div class=homepage-content><div class=home-introduction><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class=mdl-typography--display-2>Shower Loop vs Normal Shower</h2><p class=intro-description>90% reduction in water usage and 70-90% in energy reduction for a 10 minute shower with a flow rate of 10 l/min. Savings are dependant on user behaviour and can vary. Use Just one bucket of water for a shower of any length. See the savings section for more information.</p><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save Water</h3><p>Capture, Filter, Reuse</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Saving Energy</h3><p>By reusing warm water.</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Save The Planet</h3><p>Save Money</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Open Hardware</h3><p>Copy, improve, adapt, share</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Assemble It Yourself</h3><p>With manufactured and off-shell components</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Enjoy Better Showers</h3><p>The single pump provides stable water pressure and the thermostat and heater keep water nice and warm</p></div></div></div><div class="mdl-grid reasons"><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>Off - Grid Ready</h3><p>The entire system can run on a 12V DC</p></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"><div><i class="far fa-lightbulb"></i></div><div><h3>No Plumber Needed</h3><p>Shower Loop is like a standalone appliance without connecting to water mains</p></div></div></div></div></div></div></div><div class=home-works><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">How It Works</h2><p class=intro-description>Showers are great, but pouring hot and almost drinkable water down the drain is not. Besides the obvious costs to the environment and your bills, there is also a conscious on unconscious psychological cost any time you create waste. To solve this problem we created Showerloop. It's a shower that collects, cleans and reuses the water in real time while you are showering. So now you can shower for as long as you like but with a reduced ecological impact.</p><div class="mdl-grid videos" style=justify-content:center><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="video-container">
<video id="video2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="/videos/hls/video2/poster.webp">
<source src="/videos/hls/video2/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div>
</div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="video-container">
<video id="video3" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="/videos/hls/video3/poster.webp">
<source src="/videos/hls/video3/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div>
</div></div></div></div></div><div class=recent-posts><div class=chocolate-container><div class=mdl-grid><div class="mdl-cell mdl-cell--12-col"><h2 class="mdl-typography--display-2 section-title">Recent News</h2><p class=blog-description></p><div class=mdl-grid><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone blog-post mdl-card mdl-shadow--2dp"><div class=mdl-card__title><h3 class=mdl-card__title-text>2 Ways to Be Economical When Showering With an Injury</h3></div><div class=mdl-card__supporting-text><p><p>It's extremely challenging to lead your daily life while sustaining an injury. And yet, dealing with sports injuries is something that most of us will have to go through, with nearly 2 million sports-related injuries affecting high school athletes alone per year. Most of us know the feeling of attempting to take a shower or bath when your arm is wrapped in a cast and cannot get wet. It's a defeated feeling, and it can quickly take away the motivation to shower or bathe in the first place. After all, wouldn't it be easier to not deal with the challenge? Furthermore, you may also be concerned that showering with your sports-related injury will be a longer process than a normal shower, making the entire ordeal less environmentally friendly. While there are ways to make sure you are being economical while showering, like being conscientious of what you put down the drain, you may not always be thinking about the environment when trying to avoid getting your injury wet in the shower. Fortunately, there are two ways you can be economical about your water usage while showering with an injury, including:</p></p></div><div class="mdl-card__actions mdl-card--border"><a href=/posts/blog4/ class="mdl-button mdl-button--colored mdl-button mdl-js-button mdl-button--raised mdl-button--colored" tabindex=0 aria-label="Read more about 2 Ways to Be Economical When Showering With an Injury">Read Article: 2 Ways to Be Economical When Showering With an Injury</a></div></div><div class="mdl-cell mdl-cell--6-col mdl-cell--12-col-tablet mdl-cell--12-col-phone blog-post mdl-card mdl-shadow--2dp"><div class=mdl-card__title><h3 class=mdl-card__title-text>Don't Put These Things Down The Shower Drain!</h3></div><div class=mdl-card__supporting-text><p><p>Natural water in Finland is some of the most polluted water in Europe (read the discussions in the article). You might be contributing to its pollution without realizing it, such as if you're putting things down the drain that you really shouldn't. Making your shower eco-friendly should be about saving water as well as preventing water contamination. Here's what you can do to be greener and cleaner!</p><p>In Finland, people use an average of 140 liters of water every day. By installing a product such as Showerloop into your shower, you can save water and energy. Showerloop reuses water while you shower so that it doesn't go to waste and you don't have to feel guilty about taking longer showers. However, that's just Step One to ensuring a more eco-friendly shower. Step Two involves preventing toxins from ending up in water systems and the environment. That means you can enjoy showering without worrying about how you're harming the water and wildlife.</p></p></div><div class="mdl-card__actions mdl-card--border"><a href=/posts/blog3/ class="mdl-button mdl-button--colored mdl-button mdl-js-button mdl-button--raised mdl-button--colored" tabindex=0 aria-label="Read more about Don't Put These Things Down The Shower Drain!">Read Article: Don't Put These Things Down The Shower Drain!</a></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div>
<script src="/js/videojs/video-init.min.js"></script>
</body></html>

View File

@ -1 +0,0 @@
import t from"video.js/dist/video.es.js";const n=function(){const n=t,o=["httpStreaming"],e=n.registerPlugin;return n.registerPlugin=function(t,i){return o.includes(t)?e.call(this,t,i):n},n}();export{n as default};//# sourceMappingURL=custom-videojs.modern.min.js.map

View File

@ -1 +0,0 @@
{"version":3,"file":"custom-videojs.modern.min.js","sources":["../../src/js/custom-videojs.js"],"sourcesContent":["// Import only what we need from Video.js\nimport videojs from 'video.js/dist/video.es.js';\nimport 'videojs-http-streaming';\n\n// Remove unused components\nconst minimalVideoJS = (function() {\n // Store a reference to the original VideoJS\n const vjsOriginal = videojs;\n \n // Only register the plugins we actually use\n const usedPlugins = ['httpStreaming'];\n \n // Filter registered plugins\n const originalRegisterPlugin = vjsOriginal.registerPlugin;\n vjsOriginal.registerPlugin = function(name, plugin) {\n if (usedPlugins.includes(name)) {\n return originalRegisterPlugin.call(this, name, plugin);\n }\n // Skip registration for unused plugins\n return vjsOriginal;\n };\n \n return vjsOriginal;\n})();\n\n// Export the minimal version\nexport default minimalVideoJS; "],"names":["videojs","minimalVideoJS","vjsOriginal","usedPlugins","originalRegisterPlugin","registerPlugin","name","plugin","includes","call","this"],"mappings":"OAAAA,MAAA,4BAKK,MAACC,EAAiB,WAErB,MAAMC,EAAcF,EAGdG,EAAc,CAAC,iBAGfC,EAAyBF,EAAYG,eAS3C,OARAH,EAAYG,eAAiB,SAASC,EAAMC,GAC1C,OAAIJ,EAAYK,SAASF,GAChBF,EAAuBK,KAAKC,KAAMJ,EAAMC,GAG1CL,CACX,EAESA,CACR,CAlBsB,UAkBtBD"}

View File

@ -0,0 +1,33 @@
document.addEventListener('DOMContentLoaded', function() {
// Wait for jQuery to be defined
function checkJQuery() {
if (window.jQuery) {
initSkipToContent(jQuery);
} else {
setTimeout(checkJQuery, 50);
}
}
checkJQuery();
});
function initSkipToContent($) {
$('.skip-to-content').click(function (e){
skipTo();
e.preventDefault();
});
$(".skip-to-content").keyup(function (e){
if(e.which == '13'){
skipTo();
e.preventDefault();
}
});
function skipTo(){
$('main').attr("tabindex",0).focus();
$('html,body').animate({
scrollTop: ($('main').offset().top)
});
}
}

View File

@ -0,0 +1 @@
document.addEventListener("DOMContentLoaded",(function(){function checkJQuery(){if(window.jQuery){initSkipToContent(jQuery)}else{setTimeout(checkJQuery,50)}}checkJQuery()}));function initSkipToContent($){$(".skip-to-content").click((function(e){skipTo();e.preventDefault()}));$(".skip-to-content").keyup((function(e){if(e.which=="13"){skipTo();e.preventDefault()}}));function skipTo(){$("main").attr("tabindex",0).focus();$("html,body").animate({scrollTop:$("main").offset().top})}}

View File

@ -0,0 +1,36 @@
/**
* Skip to content functionality with modern ES syntax
*/
document.addEventListener('DOMContentLoaded', () => {
// Wait for jQuery to be defined
const checkJQuery = () => {
if (window.jQuery) {
initSkipToContent(jQuery);
} else {
setTimeout(checkJQuery, 50);
}
};
checkJQuery();
});
function initSkipToContent($) {
$('.skip-to-content').click(e => {
skipTo();
e.preventDefault();
});
$('.skip-to-content').keyup(e => {
if (e.which === 13) {
skipTo();
e.preventDefault();
}
});
function skipTo() {
$('main').attr('tabindex', 0).focus();
$('html,body').animate({
scrollTop: $('main').offset().top
});
}
}

View File

@ -0,0 +1 @@
import{onDOMReady as t,$ as n,addEvent as i}from"./utils.js";t((function(){const t=n(".skip-to-content"),o=n("#main-content, main, .main-content, article");t&&o&&(o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),i(t,"click",(t=>{t.preventDefault(),o.focus(),o.scrollIntoView({behavior:"smooth",block:"start"})})))}));//# sourceMappingURL=skip-to-content.modern.min.js.map

View File

@ -1,77 +0,0 @@
/**
* Enhanced video.js initialization script
*
* This script handles video initialization across different browsers,
* properly supporting HLS playback regardless of MIME types.
*/
document.addEventListener('DOMContentLoaded', function() {
// Initialize video.js on all video elements with the video-js class
const videoElements = document.querySelectorAll('video.video-js');
if (videoElements && videoElements.length > 0) {
console.log('Found ' + videoElements.length + ' video elements to initialize');
videoElements.forEach(function(videoElement) {
// Only initialize if not already initialized
if (!videoElement.classList.contains('vjs-has-started')) {
try {
// Get sources and detect HLS by filename pattern regardless of MIME type
const sourceElements = videoElement.querySelectorAll('source');
let hlsSource = null;
sourceElements.forEach(function(source) {
const src = source.getAttribute('src');
// Detect HLS by the .m3u8 extension in URL even if the MIME type is different
if (src && src.includes('.m3u8')) {
hlsSource = src;
}
});
// Initialize with appropriate settings
const player = videojs(videoElement.id, {
fluid: true,
responsive: true,
html5: {
vhs: {
overrideNative: !videojs.browser.IS_SAFARI,
enableLowInitialPlaylist: true,
limitRenditionsByPlayerDimensions: true,
useBandwidthFromLocalStorage: true
},
nativeAudioTracks: videojs.browser.IS_SAFARI,
nativeVideoTracks: videojs.browser.IS_SAFARI
},
playbackRates: [0.75, 1, 1.25, 1.5, 2]
});
// Force HLS source if detected regardless of MIME type
if (hlsSource) {
console.log('HLS source detected for ' + videoElement.id + ': ' + hlsSource);
player.src({
src: hlsSource,
type: 'application/x-mpegURL'
});
}
// Handle errors
player.on('error', function() {
console.error('Video player error:', player.error());
// Try to recover by forcing MP4 fallback if available
sourceElements.forEach(function(source) {
if (!source.src.includes('.m3u8')) {
player.src(source.src);
player.play();
return;
}
});
});
} catch (e) {
console.error('Error initializing video ' + videoElement.id + ':', e);
}
} else {
console.log('Video ' + videoElement.id + ' already initialized');
}
});
}
});

View File

@ -1 +0,0 @@
document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll("video.video-js");e&&e.length>0&&(console.log("Found "+e.length+" video elements to initialize"),e.forEach(function(e){if(e.classList.contains("vjs-has-started"))console.log("Video "+e.id+" already initialized");else try{const o=e.querySelectorAll("source");let r=null;o.forEach(function(e){const o=e.getAttribute("src");o&&o.includes(".m3u8")&&(r=o)});const t=videojs(e.id,{fluid:!0,responsive:!0,html5:{vhs:{overrideNative:!videojs.browser.IS_SAFARI,enableLowInitialPlaylist:!0,limitRenditionsByPlayerDimensions:!0,useBandwidthFromLocalStorage:!0},nativeAudioTracks:videojs.browser.IS_SAFARI,nativeVideoTracks:videojs.browser.IS_SAFARI},playbackRates:[.75,1,1.25,1.5,2]});r&&(console.log("HLS source detected for "+e.id+": "+r),t.src({src:r,type:"application/x-mpegURL"})),t.on("error",function(){console.error("Video player error:",t.error()),o.forEach(function(e){if(!e.src.includes(".m3u8"))return t.src(e.src),void t.play()})})}catch(o){console.error("Error initializing video "+e.id+":",o)}}))}));

View File

@ -1,19 +0,0 @@
/**
* Initialize Video.js players
*/
document.addEventListener('DOMContentLoaded', function() {
// Wait for Video.js to be loaded
function checkVideoJS() {
if (window.videojs) {
// Initialize any video players on the page
var players = document.querySelectorAll('.video-js');
players.forEach(function(player) {
videojs(player.id);
});
} else {
setTimeout(checkVideoJS, 50);
}
}
checkVideoJS();
});

View File

@ -1 +0,0 @@
document.addEventListener("DOMContentLoaded",(function(){function checkVideoJS(){if(window.videojs){var players=document.querySelectorAll(".video-js");players.forEach((function(player){videojs(player.id)}))}else{setTimeout(checkVideoJS,50)}}checkVideoJS()}));

View File

@ -1,18 +0,0 @@
/**
* Initialize Video.js players with modern ES syntax
*/
document.addEventListener('DOMContentLoaded', () => {
const checkVideoJS = () => {
if (window.videojs) {
// Initialize any video players on the page
const players = document.querySelectorAll('.video-js');
players.forEach(player => {
videojs(player.id);
});
} else {
setTimeout(checkVideoJS, 50);
}
};
checkVideoJS();
});

View File

@ -1 +0,0 @@
import{onDOMReady as o,$$ as n}from"./utils.js";const i=new Map;let t=!1,e=!1;async function s(){if(!t&&!e){e=!0,console.debug("Loading VideoJS dynamically");try{if(window.videojs)return t=!0,void(e=!1);const o=document.createElement("link");o.rel="stylesheet",o.href="/css/vendor/video-js.min.css",document.head.appendChild(o);const s=document.createElement("script");s.src="/js/videojs/video.min.js";const a=new Promise((o=>{s.onload=o}));document.head.appendChild(s),await a;const r=document.createElement("script");r.src="/js/videojs/videojs-http-streaming.min.js";const d=new Promise((o=>{r.onload=o}));document.head.appendChild(r),await d,t=!0,e=!1,function(){const o=n(".video-js");0!==o.length&&o.forEach((o=>{const n=o.getBoundingClientRect();n.top<window.innerHeight&&n.bottom>0&&!i.has(o.id)&&c(o)}))}()}catch(o){console.error("Error loading VideoJS:",o),e=!1}}}async function c(o){if(!i.has(o.id))if(window.videojs||(await s(),window.videojs))if(o.classList.contains("vjs-has-started")||o.classList.contains("vjs-paused")||o.classList.contains("vjs-playing"))console.debug(`Player "${o.id}" already initialized by VideoJS`);else try{const n=window.videojs(o.id,{fluid:!0,responsive:!0,html5:{vhs:{enableLowInitialPlaylist:!0,limitRenditionsByPlayerDimensions:!0,useBandwidthFromLocalStorage:!0}},playbackRates:[.75,1,1.25,1.5,2]});i.set(o.id,n)}catch(n){console.debug(`Error initializing player "${o.id}": ${n.message}`)}else console.warn("Failed to load VideoJS")}function a(){i.forEach(((o,n)=>{try{o&&"function"==typeof o.dispose&&o.dispose()}catch(o){console.debug(`Error disposing player ${n}: ${o.message}`)}})),i.clear()}o((()=>{!function(){const o=n(".video-js");if(0===o.length)return;let i=!1;const a=()=>{i||(i=!0,setTimeout((()=>{s()}),1e3),["click","touchstart","scroll"].forEach((o=>{document.removeEventListener(o,a)})))};["click","touchstart","scroll"].forEach((o=>{document.addEventListener(o,a)}));const r=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(t||e||!i||s(),t&&c(o.target))}))}),{rootMargin:"0px",threshold:.1});o.forEach((o=>{r.observe(o)}))}(),window.addEventListener("beforeunload",a)}));//# sourceMappingURL=video-init.modern.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,31 @@
/**
* Simple VideoJS Initialization
* Initializes VideoJS for all video elements with class 'video-js'
*/
document.addEventListener('DOMContentLoaded', function() {
// Find all video elements with video-js class
const videoElements = document.querySelectorAll('video.video-js');
if (!videoElements || videoElements.length === 0) {
return;
}
// Initialize each video player
videoElements.forEach(function(video) {
if (video.id) {
const player = videojs(video.id, {
fluid: true,
responsive: true,
html5: {
vhs: {
overrideNative: !videojs.browser.IS_SAFARI,
enableLowInitialPlaylist: true,
limitRenditionsByPlayerDimensions: true
},
nativeAudioTracks: videojs.browser.IS_SAFARI,
nativeVideoTracks: videojs.browser.IS_SAFARI
}
});
}
});
});

View File

@ -0,0 +1 @@
document.addEventListener("DOMContentLoaded",function(){const e=document.querySelectorAll("video.video-js");e&&e.length>0&&e.forEach(function(e){if(e.id){const n=videojs(e.id,{fluid:!0,responsive:!0,html5:{vhs:{overrideNative:!videojs.browser.IS_SAFARI,enableLowInitialPlaylist:!0,limitRenditionsByPlayerDimensions:!0},nativeAudioTracks:videojs.browser.IS_SAFARI,nativeVideoTracks:videojs.browser.IS_SAFARI}})}})});

File diff suppressed because one or more lines are too long

View File

@ -12,4 +12,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works" tabindex=0>How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research tabindex=0>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1></h1><h1>The key to open source hardware and software is an open heart</h1><h2>CERN OHL BY-SA:</h2><a href=https://ohwr.org/project/licenses/wikis/home>CERN Open Hardware License</a><p>If you with to republish, credit modify and/or commercialize Showerloop or aspects of Showerloop tech under the licence agreement you must, in a nutshell:</p><ul><li><strong>By:</strong> Give credit to Showerloop by linking to our website, refering to the documentation and it's makers</li><li><strong>Share Alike</strong>Share your documentation in a similar fashion, a.k.a if you make a derivative (modified version) of Showerloop or any of the technologies developed within the Showerloop community you must also share the plans as open hardware. This includes components, manufacturing methods, modifications, plans and diagrams, CAD and STL files and of course documentation to explain it all.</li></ul><hr><h2>Software Licence:</h2><h3>Digital content: CC-BY-SA 4.0</h3><a href=https://creativecommons.org/licenses/by-sa/4.0/legalcode>Creative Commons License Attribution Sharealike 4.0</a><ul><li><strong>By:</strong> Give credit to Shower Loop by linking to our website, refering to the documentation and it's makers</li><li><strong>Share Alike:</strong> Share your documentation in a similar fashion. This includes components, manufacturing methods, modifications etc.</li></ul><h3>Shower Loop Trademark</h3><p>We would love it if you used the Shower Loop brand. In order to use it we would be super happy to get a tiny payment for its use but more importantly we use the fee to certify that what you are developing meets the required quality, safety and environmental standards. Please <a href=/components>get in touch via our Components page</a> for more information.</p><hr><a href=https://ohwr.org/project/licenses/wikis/home><h2>CERN Open Hardware License v1.2</h2></a><p>2013-09-06 - CERN, Geneva, Switzerland</p><hr><a href=https://creativecommons.org/licenses/by-sa/4.0/legalcode><h2>Creative Commons-BY-SA 4.0</h2></a><p>Creative Commons Attribution-ShareAlike 4.0 International Public License</p></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1></h1><h1>The key to open source hardware and software is an open heart</h1><h2>CERN OHL BY-SA:</h2><a href=https://ohwr.org/project/licenses/wikis/home>CERN Open Hardware License</a><p>If you with to republish, credit modify and/or commercialize Showerloop or aspects of Showerloop tech under the licence agreement you must, in a nutshell:</p><ul><li><strong>By:</strong> Give credit to Showerloop by linking to our website, refering to the documentation and it's makers</li><li><strong>Share Alike</strong>Share your documentation in a similar fashion, a.k.a if you make a derivative (modified version) of Showerloop or any of the technologies developed within the Showerloop community you must also share the plans as open hardware. This includes components, manufacturing methods, modifications, plans and diagrams, CAD and STL files and of course documentation to explain it all.</li></ul><hr><h2>Software Licence:</h2><h3>Digital content: CC-BY-SA 4.0</h3><a href=https://creativecommons.org/licenses/by-sa/4.0/legalcode>Creative Commons License Attribution Sharealike 4.0</a><ul><li><strong>By:</strong> Give credit to Shower Loop by linking to our website, refering to the documentation and it's makers</li><li><strong>Share Alike:</strong> Share your documentation in a similar fashion. This includes components, manufacturing methods, modifications etc.</li></ul><h3>Shower Loop Trademark</h3><p>We would love it if you used the Shower Loop brand. In order to use it we would be super happy to get a tiny payment for its use but more importantly we use the fee to certify that what you are developing meets the required quality, safety and environmental standards. Please <a href=/components>get in touch via our Components page</a> for more information.</p><hr><a href=https://ohwr.org/project/licenses/wikis/home><h2>CERN Open Hardware License v1.2</h2></a><p>2013-09-06 - CERN, Geneva, Switzerland</p><hr><a href=https://creativecommons.org/licenses/by-sa/4.0/legalcode><h2>Creative Commons-BY-SA 4.0</h2></a><p>Creative Commons Attribution-ShareAlike 4.0 International Public License</p></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -12,4 +12,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works" tabindex=0>How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research tabindex=0>Research</a>
<a class=mdl-navigation__link href=/posts/ title=Posts tabindex=0>Posts</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1></h1><div class=content-container><h1 class="mdl-typography--display-2 text-center">Build Your Own ShowerLoop</h1><p class=text-center>The ShowerLoop is an open-source project. Get the plans and build your own!</p><div class="make-it-container text-center"><div class=make-it-box><h3>I Want To Build It</h3><p>Get access to building plans, materials list, and join our community of builders creating sustainable shower systems around the world.</p><div class=button-container><a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href="mailto:info@showerloop.org?subject=I%20Want%20To%20Build%20It">Get Started</a></div></div></div><p class=text-center>For more information about building your own ShowerLoop system, please <a href=/contact-us>contact us</a>.</p></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1></h1><div class=content-container><h1 class="mdl-typography--display-2 text-center">Build Your Own ShowerLoop</h1><p class=text-center>The ShowerLoop is an open-source project. Get the plans and build your own!</p><div class="make-it-container text-center"><div class=make-it-box><h3>I Want To Build It</h3><p>Get access to building plans, materials list, and join our community of builders creating sustainable shower systems around the world.</p><div class=button-container><a class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href="mailto:info@showerloop.org?subject=I%20Want%20To%20Build%20It">Get Started</a></div></div></div><p class=text-center>For more information about building your own ShowerLoop system, please <a href=/contact-us>contact us</a>.</p></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -1,94 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Native Video Test</title>
<style>
body {
margin: 20px;
font-family: Arial, sans-serif;
}
.video-container {
max-width: 800px;
margin: 0 auto 40px;
}
h1, h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>Native Video Test</h1>
<div class="video-container">
<h2>Direct MP4 Test (Video 1)</h2>
<video controls width="100%">
<source src="/videos/video1.mp4.f136.mp4" type="video/mp4">
<source src="/videos/video1.mp4.mkv" type="video/mkv">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<h2>Direct MP4 Test (Video 2)</h2>
<video controls width="100%">
<source src="/videos/video2.mp4.f398.mp4" type="video/mp4">
<source src="/videos/video2.mp4.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<h2>Direct MP4 Test (Video 3)</h2>
<video controls width="100%">
<source src="/videos/video3.mp4.f136.mp4" type="video/mp4">
<source src="/videos/video3.mp4.mkv" type="video/mkv">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<h2>HLS Test (Video 1)</h2>
<video controls width="100%">
<source src="/videos/hls/video1/index.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="video-container">
<h2>HLS Test with VideoJS</h2>
<link href="/css/vendor/video-js.min.css" rel="stylesheet">
<script src="/js/videojs/video.min.js"></script>
<script src="/js/videojs/videojs-http-streaming.min.js"></script>
<video id="test-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360">
<source src="/videos/hls/video1/index.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (typeof videojs === 'undefined') {
console.error('VideoJS is not loaded');
return;
}
try {
var player = videojs('test-video', {
html5: {
vhs: {
overrideNative: true
}
}
});
player.on('error', function() {
console.error('Video error:', player.error());
});
} catch (e) {
console.error('Error initializing video:', e);
}
});
</script>
</div>
<script src="/js/video-init-fixed.min.js"></script></body>
</html>

View File

@ -22,7 +22,7 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<img class=responsive-img src=/images/PCBBasic2_8.webp alt="Testing the control board with multimeter to verify electrical connections">
<img class=responsive-img src=/images/PCBBasic2_9.webp alt="Final control board mounted in enclosure with cable connections">
<link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video3 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video3/poster.webp data-setup='{"fluid": true}'>
<source src=/videos/hls/video3/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
<source src=/videos/hls/video3/index.m3u8 type=video/mp4><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video3")})</script><img class=responsive-img src=/images/PCBBasic2_10.webp alt="Control panel installed and connected to the ShowerLoop system showing operational status">
<img class=responsive-img src=/images/PCBBasic2_11.webp alt="Complete ShowerLoop control system with the new electronics board fully wired and functional"></div><span>Tags:</span>
@ -30,4 +30,4 @@ web browser that
</span><span class=share><span>Share:</span>
<a target=_blank href="https://www.facebook.com/sharer/sharer.php?u=http://localhost:1313/posts/blog1/"><i class="fab fa-facebook-square"></i>
</a><a target=_blank href="http://twitter.com/share?url=http://localhost:1313/posts/blog1/"><i class="fab fa-twitter-square"></i>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog1/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog1/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -20,4 +20,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
</span><span class=share><span>Share:</span>
<a target=_blank href="https://www.facebook.com/sharer/sharer.php?u=http://localhost:1313/posts/blog2/"><i class="fab fa-facebook-square"></i>
</a><a target=_blank href="http://twitter.com/share?url=http://localhost:1313/posts/blog2/"><i class="fab fa-twitter-square"></i>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog2/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog2/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -19,4 +19,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
</span><span class=share><span>Share:</span>
<a target=_blank href="https://www.facebook.com/sharer/sharer.php?u=http://localhost:1313/posts/blog3/"><i class="fab fa-facebook-square"></i>
</a><a target=_blank href="http://twitter.com/share?url=http://localhost:1313/posts/blog3/"><i class="fab fa-twitter-square"></i>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog3/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog3/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -19,4 +19,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
</span><span class=share><span>Share:</span>
<a target=_blank href="https://www.facebook.com/sharer/sharer.php?u=http://localhost:1313/posts/blog4/"><i class="fab fa-facebook-square"></i>
</a><a target=_blank href="http://twitter.com/share?url=http://localhost:1313/posts/blog4/"><i class="fab fa-twitter-square"></i>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog4/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
</a><a target=_blank href="http://www.reddit.com/submit?url=http://localhost:1313/posts/blog4/"><i class="fab fa-reddit-square"></i></a></span></div></div></div></div></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

View File

@ -28,4 +28,4 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<i class="fas fa-circle"></i>
<span class="d-none d-sm-block col-sm-2 mt-auto offset-sm-2 text-right"><time class=post-date datetime=2017-03-09T00:00:00Z>Mar 9, 2017</time>
</span><i class="fas fa-circle"></i>
<span class=nowrap><span class=ph1>post</span></span></footer></div></div></article></div></div><div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src="/js/video-init-fixed.min.js"></script></body></html>
<span class=nowrap><span class=ph1>post</span></span></footer></div></div></article></div></div><div class="mdl-cell mdl-cell--3-col mdl-cell--12-col-tablet mdl-cell--12-col-phone"></div></div></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div></footer></div><script>document.addEventListener("DOMContentLoaded",function(){setTimeout(function(){if(!window.__bfcacheLiveReloadActive){const e=window.location.protocol==="https:"?"wss:":"ws:",t=`${e}//${window.location.host}/__livereload`;try{if(window.OriginalWebSocket){const e=new window.OriginalWebSocket(t);e.onmessage=function(e){e.data==="reload"&&window.location.reload()},window.__bfcacheLiveReloadActive=!0}}catch(e){console.warn("LiveReload connection error:",e)}}},500)})</script><script src=/js/video-init-fixed.min.js></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
import t from"video.js/dist/video.es.js";const n=function(){const n=t,o=["httpStreaming"],e=n.registerPlugin;return n.registerPlugin=function(t,i){return o.includes(t)?e.call(this,t,i):n},n}();export{n as default};//# sourceMappingURL=custom-videojs.modern.min.js.map

View File

@ -1 +0,0 @@
{"version":3,"file":"custom-videojs.modern.min.js","sources":["../../src/js/custom-videojs.js"],"sourcesContent":["// Import only what we need from Video.js\nimport videojs from 'video.js/dist/video.es.js';\nimport 'videojs-http-streaming';\n\n// Remove unused components\nconst minimalVideoJS = (function() {\n // Store a reference to the original VideoJS\n const vjsOriginal = videojs;\n \n // Only register the plugins we actually use\n const usedPlugins = ['httpStreaming'];\n \n // Filter registered plugins\n const originalRegisterPlugin = vjsOriginal.registerPlugin;\n vjsOriginal.registerPlugin = function(name, plugin) {\n if (usedPlugins.includes(name)) {\n return originalRegisterPlugin.call(this, name, plugin);\n }\n // Skip registration for unused plugins\n return vjsOriginal;\n };\n \n return vjsOriginal;\n})();\n\n// Export the minimal version\nexport default minimalVideoJS; "],"names":["videojs","minimalVideoJS","vjsOriginal","usedPlugins","originalRegisterPlugin","registerPlugin","name","plugin","includes","call","this"],"mappings":"OAAAA,MAAA,4BAKK,MAACC,EAAiB,WAErB,MAAMC,EAAcF,EAGdG,EAAc,CAAC,iBAGfC,EAAyBF,EAAYG,eAS3C,OARAH,EAAYG,eAAiB,SAASC,EAAMC,GAC1C,OAAIJ,EAAYK,SAASF,GAChBF,EAAuBK,KAAKC,KAAMJ,EAAMC,GAG1CL,CACX,EAESA,CACR,CAlBsB,UAkBtBD"}

View File

@ -1,19 +0,0 @@
/**
* Initialize Video.js players
*/
document.addEventListener('DOMContentLoaded', function() {
// Wait for Video.js to be loaded
function checkVideoJS() {
if (window.videojs) {
// Initialize any video players on the page
var players = document.querySelectorAll('.video-js');
players.forEach(function(player) {
videojs(player.id);
});
} else {
setTimeout(checkVideoJS, 50);
}
}
checkVideoJS();
});

View File

@ -1 +0,0 @@
document.addEventListener("DOMContentLoaded",(function(){function checkVideoJS(){if(window.videojs){var players=document.querySelectorAll(".video-js");players.forEach((function(player){videojs(player.id)}))}else{setTimeout(checkVideoJS,50)}}checkVideoJS()}));

View File

@ -1,18 +0,0 @@
/**
* Initialize Video.js players with modern ES syntax
*/
document.addEventListener('DOMContentLoaded', () => {
const checkVideoJS = () => {
if (window.videojs) {
// Initialize any video players on the page
const players = document.querySelectorAll('.video-js');
players.forEach(player => {
videojs(player.id);
});
} else {
setTimeout(checkVideoJS, 50);
}
};
checkVideoJS();
});

View File

@ -1 +0,0 @@
import{onDOMReady as o,$$ as n}from"./utils.js";const i=new Map;let t=!1,e=!1;async function s(){if(!t&&!e){e=!0,console.debug("Loading VideoJS dynamically");try{if(window.videojs)return t=!0,void(e=!1);const o=document.createElement("link");o.rel="stylesheet",o.href="/css/vendor/video-js.min.css",document.head.appendChild(o);const s=document.createElement("script");s.src="/js/videojs/video.min.js";const a=new Promise((o=>{s.onload=o}));document.head.appendChild(s),await a;const r=document.createElement("script");r.src="/js/videojs/videojs-http-streaming.min.js";const d=new Promise((o=>{r.onload=o}));document.head.appendChild(r),await d,t=!0,e=!1,function(){const o=n(".video-js");0!==o.length&&o.forEach((o=>{const n=o.getBoundingClientRect();n.top<window.innerHeight&&n.bottom>0&&!i.has(o.id)&&c(o)}))}()}catch(o){console.error("Error loading VideoJS:",o),e=!1}}}async function c(o){if(!i.has(o.id))if(window.videojs||(await s(),window.videojs))if(o.classList.contains("vjs-has-started")||o.classList.contains("vjs-paused")||o.classList.contains("vjs-playing"))console.debug(`Player "${o.id}" already initialized by VideoJS`);else try{const n=window.videojs(o.id,{fluid:!0,responsive:!0,html5:{vhs:{enableLowInitialPlaylist:!0,limitRenditionsByPlayerDimensions:!0,useBandwidthFromLocalStorage:!0}},playbackRates:[.75,1,1.25,1.5,2]});i.set(o.id,n)}catch(n){console.debug(`Error initializing player "${o.id}": ${n.message}`)}else console.warn("Failed to load VideoJS")}function a(){i.forEach(((o,n)=>{try{o&&"function"==typeof o.dispose&&o.dispose()}catch(o){console.debug(`Error disposing player ${n}: ${o.message}`)}})),i.clear()}o((()=>{!function(){const o=n(".video-js");if(0===o.length)return;let i=!1;const a=()=>{i||(i=!0,setTimeout((()=>{s()}),1e3),["click","touchstart","scroll"].forEach((o=>{document.removeEventListener(o,a)})))};["click","touchstart","scroll"].forEach((o=>{document.addEventListener(o,a)}));const r=new IntersectionObserver((o=>{o.forEach((o=>{o.isIntersecting&&(t||e||!i||s(),t&&c(o.target))}))}),{rootMargin:"0px",threshold:.1});o.forEach((o=>{r.observe(o)}))}(),window.addEventListener("beforeunload",a)}));//# sourceMappingURL=video-init.modern.min.js.map

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,22 @@
<!doctype html><html lang=en><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><title>ShowerLoop Videos | ShowerLoop</title>
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Watch videos demonstrating how the ShowerLoop system works and how it was developed"><link rel=preload href=/css/vendor/material-icons.css as=style><link rel=preload href=/css/vendor/video-js.min.css as=style><link rel=preload href=/images/logo2.webp as=image><link rel=stylesheet href=/css/vendor/material-icons.css><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css></noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css></noscript><link rel=stylesheet href=/css/vendor/video-js.min.css><script src=/js/videojs/video.min.js></script><script src=/js/videojs/videojs-http-streaming.min.js></script><script src=/js/video-init.js></script><script src=/js/vendor/jquery.min.js defer></script><script src=/js/material.min.js defer></script><link rel=stylesheet type=text/css href=/css/app.min.css><link rel=stylesheet type=text/css href=/css/custom.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/custom.css></noscript></head><body class=page><div class=skip-to-content role=button tabindex=0>Skip to Content</div><style>.mdl-navigation .mdl-button.mdl-navigation__link{display:flex;align-items:center;justify-content:center;height:36px;line-height:36px;padding:0 16px;margin:8px 0}.logo{height:50px;width:auto;max-width:150px;transition:none!important}</style><div class="mdl-layout mdl-js-layout
<meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Watch videos demonstrating how the ShowerLoop system works and how it was developed"><link rel=preload href=/css/vendor/material-icons.css as=style><link rel=preload href=/images/logo2.webp as=image><link rel=stylesheet href=/css/vendor/material-icons.css><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/material.indigo-pink.min.css></noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/vendor/fontawesome.min.css></noscript>
<link rel=stylesheet href=/css/vendor/video-js.min.css>
<script src=/js/videojs/video.min.js></script>
<script src=/js/videojs/videojs-http-streaming.min.js></script>
<script src=/js/vendor/jquery.min.js defer></script><script src=/js/material.min.js defer></script><link rel=stylesheet type=text/css href=/css/app.min.css><link rel=stylesheet type=text/css href=/css/custom.css media=print onload='this.media="all"'><noscript><link rel=stylesheet href=/css/custom.css></noscript>
<style>
.video-container {
position: relative;
width: 100%;
margin-bottom: 2rem;
}
.video-js {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
</style>
</head><body class=page><div class=skip-to-content role=button tabindex=0>Skip to Content</div><style>.mdl-navigation .mdl-button.mdl-navigation__link{display:flex;align-items:center;justify-content:center;height:36px;line-height:36px;padding:0 16px;margin:8px 0}.logo{height:50px;width:auto;max-width:150px;transition:none!important}</style><div class="mdl-layout mdl-js-layout
mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div class=mdl-layout__header-row><a href=/ class=mdl-layout-title><img class=logo src=/images/logo2.webp height=50 width=auto alt="ShowerLoop Logo"></a><div class=mdl-layout-spacer></div><nav class="mdl-navigation mdl-layout--large-screen-only"><a class=mdl-navigation__link href=/ title=Home>Home</a>
<a class=mdl-navigation__link href=/how-it-works/ title="How It Works">How It Works</a>
<a class=mdl-navigation__link href=/research/ title=Research>Research</a>
@ -14,13 +31,35 @@ mdl-layout--fixed-header"><header class="mdl-layout__header site-header"><div cl
<a class=mdl-navigation__link href=/videos/ title=Videos tabindex=0>Videos</a>
<a class=mdl-navigation__link href=/contact-us/ title="Contact Us" tabindex=0>Contact Us</a>
<a class=mdl-navigation__link href=/components/ title=Components tabindex=0>Components</a>
<a class="mdl-navigation__link mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href=/make-it/ title="Make It" tabindex=0>Make It</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1>ShowerLoop Videos</h1><h1 id=showerloop-videos>ShowerLoop Videos</h1><p>Below are some videos demonstrating the ShowerLoop system and its components.</p><h2 id=video-1-showerloop-explanation>Video 1: ShowerLoop Explanation</h2><p>This video provides an overview of how ShowerLoop works and its benefits for water conservation.</p><link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video1 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video1/poster.jpg data-setup='{"fluid": true}'>
<source src=/videos/hls/video1/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video1")})</script><h2 id=video-2-showerloop-installation>Video 2: ShowerLoop Installation</h2><p>This video shows how to install the ShowerLoop system in your bathroom.</p><link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video2 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video2/poster.jpg data-setup='{"fluid": true}'>
<source src=/videos/hls/video2/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video2")})</script><h2 id=video-3-showerloop-electronics>Video 3: ShowerLoop Electronics</h2><p>This video demonstrates the electronics and control systems of the ShowerLoop.</p><link href=/css/vendor/video-js.min.css rel=stylesheet><script src=/js/videojs/video.min.js></script><div class=responsive-video-container><video id=video3 class="video-js vjs-default-skin vjs-big-play-centered" controls preload=auto width=640 height=360 poster=/videos/hls/video3/poster.jpg data-setup='{"fluid": true}'>
<source src=/videos/hls/video3/index.m3u8 type=application/x-mpegurl><p class=vjs-no-js>To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href=https://videojs.com/html5-video-support/ target=_blank>supports HTML5 video</a></p></video></div><style>.responsive-video-container{position:relative;width:100%;margin-bottom:2rem}.video-js{width:100%;height:auto;aspect-ratio:16/9}</style><script>document.addEventListener("DOMContentLoaded",function(){var e=videojs("video3")})</script></div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div><script src=/js/app.min.js></script><script src=/js/skip-to-content.js></script></footer></div><script src="/js/video-init-fixed.min.js"></script></body></html>
<a class="mdl-navigation__link mdl-button mdl-js-button mdl-button--raised mdl-button--colored" href=/make-it/ title="Make It" tabindex=0>Make It</a></nav></div><main aria-role=main><div class=subpage-content><div class=chocolate-container><h1>ShowerLoop Videos</h1><h1 id=showerloop-videos>ShowerLoop Videos</h1><p>Below are some videos demonstrating the ShowerLoop system and its components.</p>
<h2 id=video-1-showerloop-explanation>Video 1: ShowerLoop Explanation</h2>
<p>This video provides an overview of how ShowerLoop works and its benefits for water conservation.</p>
<div class=video-container>
<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="/videos/hls/video1/poster.jpg">
<source src="/videos/hls/video1/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div>
<h2 id=video-2-showerloop-installation>Video 2: ShowerLoop Installation</h2>
<p>This video shows how to install the ShowerLoop system in your bathroom.</p>
<div class=video-container>
<video id="video2" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="/videos/hls/video2/poster.jpg">
<source src="/videos/hls/video2/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div>
<h2 id=video-3-showerloop-electronics>Video 3: ShowerLoop Electronics</h2>
<p>This video demonstrates the electronics and control systems of the ShowerLoop.</p>
<div class=video-container>
<video id="video3" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="/videos/hls/video3/poster.jpg">
<source src="/videos/hls/video3/index.m3u8" type="application/x-mpegURL">
Your browser does not support HTML5 video.
</video>
</div>
</div></div></main><footer class="mdl-mini-footer site-footer"><div class=mdl-mini-footer__left-section>&copy 2020 Shower Loop | All Rights Reserved</div><div class=mdl-mini-footer__right-section></div><script src=/js/app.min.js></script></footer></div>
<script src="/js/videojs/video-init.min.js"></script>
</body></html>