HTML Java script MYSQL programmers dev...(elmo)

Skip to content

Search

Picture in Picture Pomodoro Clock with Canvas
 boywithsilverwings profile image Agney Menon   Jan 28 ・2 min read
#javascript #beginners #showdev
Caution: This currently works only on Chrome. Firefox does not have support for programmatic PiP yet.

Can I Use - Picture in Picture

The Normal Pomodoro Timer

I'm starting off with a normal countdown pomodoro timer. I will be using AlpineJS. For the uninitiated, AlpineJS is a small JavaScript library that uses Vue/Angular like syntax to bring reactivity to the DOM. If you are familiar with Vue or Angular, then you should feel right at home with the syntax.
<main x-data="timer()" x-init="init()">
  <div>
    <p x-text="text"></p>
  </div>
  <div class="button-container">
    <button
      x-text='interval ? "Pause" : "Start"'
      @click="interval ? pause() : start()"
    >
      Start
    </button>
    <button @click="stop()">Reset</button>
  </div>
</main>
JavaScript:
const zeroPad = (num, places) => String(num).padStart(places, '0');

const formatTime({minutes, seconds}) = () => `${zeroPad(minutes, 2)} : ${zeroPad(seconds, 2)}`;

function timer() {
  return {
    interval: null,
    text: '',
    time: {
      minutes: 25,
      seconds: 0,
    },
    init() {
      this.text = formatTime(this.time);
    },
    start() {
      this.interval = setInterval(() => {
        const time = calculateTime(this.time);
        this.time = time;
        if(time.minutes === 0 && time.seconds === 0) {
          this.stop();
        }
        this.text = formatTime(time);
      }, 1000);
    },
    stop() {
      clearInterval(this.interval);
      this.interval = null;
      this.time = {
        minutes: 25,
        seconds: 0,
      }
      this.text = formatTime(this.time);
    },
    pause() {
      clearInterval(this.interval);
      this.interval = null;
    }
  }
}
You need AlpineJS needed for this. You can load it from a CDN

Picture in Picture

As a sidenote, let us talk about Picture in Picture (This is where we are going at the end, but still).

Google Developers pages have some great tutorials on picture in picture.

But by essence, you can request a video to play picture in picture with:
const videoEl = document.querySelector('#video');
videoEl.requestPictureInPicture();
You can see if a device supports Picture in Picture with:
if (!('pictureInPictureEnabled' in document)) {
  console.log('The Picture-in-Picture Web API is not available.');
} else if (!document.pictureInPictureEnabled) {
  console.log('The Picture-in-Picture Web API is disabled.');
}
Bringing Canvas into the Picture
How do we bring the canvas into this? Well, Chrome allows for any video to play Picture in Picture and luckily for us, Canvas comes with a captureStream API that allows us to capture any stream on a canvas and capture it on video all in real time.

Here is how we would do that:
const canvas = document.createElement('canvas');
// Draw something to canvas.
canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

const video = document.createElement('video');
video.muted = true;
video.srcObject = canvas.captureStream();
video.play();
All Together now


heart   unicorn   reading list   dropdown menu icon
 boywithsilverwings profile
Agney Menon
Software Developer at BigBinary. Engineer 👨‍💻 Sleeping if not Online 🤖
@boywithsilverwings   twitter agneymenon github agneym   link agney.dev

Add to the discussion
markdown guide upload image
 PREVIEW  SUBMIT
code of conduct - report abuse
Classic DEV Post from May 8 '19
Is “Defensive Programming” actually healthy?
 cubiclebuddha profile image Cubicle Buddha
I can’t solve this one, and I think I need the help of the DEV Community. So, a d...

Reactions 155  Reactions 123
 sarthology profile image
How I CRUSHED All of my 2019 Resolutions and You Can Too! 💪🏽🎉🍾
Sarthak Sharma - Jan 28
 blacksonic profile image
A simple Node.js Docker workflow
Gábor Soós - Jan 28
 gc_psk profile image
Top Reasons Why Your Angular App Is Slow
Giancarlo Buomprisco - Jan 28
 softchris profile image
Learn how YOU can add CI/CD to your app
Chris Noring - Jan 28
Home About Privacy Policy Terms of Use Contact Code of Conduct
DEV Community copyright 2016 - 2020  🔥

Resources enoslay.elmo@yahoo.com.ph