├── .gitattributes
├── Reset.png
├── Design.png
├── YoScott.m4a
├── playButton.png
├── pauseButton.png
├── pauseButton4x.png
├── playButton4x.png
├── resetButton.png
├── resetButton4x.png
├── readme
    ├── 03_Setup.jpg
    ├── 03_Setup.png
    ├── 04_Interact.jpg
    ├── 05_Interact_Buttons.jpg
    ├── 02_Name_Browser_Source.jpg
    └── 01_Create_Browser_Source.jpg
├── style.css
├── index.html
├── README.md
└── countdown.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/Reset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/Reset.png


--------------------------------------------------------------------------------
/Design.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/Design.png


--------------------------------------------------------------------------------
/YoScott.m4a:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/YoScott.m4a


--------------------------------------------------------------------------------
/playButton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/playButton.png


--------------------------------------------------------------------------------
/pauseButton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/pauseButton.png


--------------------------------------------------------------------------------
/pauseButton4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/pauseButton4x.png


--------------------------------------------------------------------------------
/playButton4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/playButton4x.png


--------------------------------------------------------------------------------
/resetButton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/resetButton.png


--------------------------------------------------------------------------------
/resetButton4x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/resetButton4x.png


--------------------------------------------------------------------------------
/readme/03_Setup.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/03_Setup.jpg


--------------------------------------------------------------------------------
/readme/03_Setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/03_Setup.png


--------------------------------------------------------------------------------
/readme/04_Interact.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/04_Interact.jpg


--------------------------------------------------------------------------------
/readme/05_Interact_Buttons.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/05_Interact_Buttons.jpg


--------------------------------------------------------------------------------
/readme/02_Name_Browser_Source.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/02_Name_Browser_Source.jpg


--------------------------------------------------------------------------------
/readme/01_Create_Browser_Source.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akashgiricse/Custom-Pomodoro-Countdown/HEAD/readme/01_Create_Browser_Source.jpg


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   background-color: #355068;
 3 |   display:flex;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 |   height:75px;
 7 |   width:360px;
 8 |   border:8px solid #d5d5ce;
 9 | }
10 | 
11 | #tomato {
12 |   font-size: 50px;
13 |   position: relative;
14 |   bottom: 5px;
15 |   background:transparent;
16 | }
17 | 
18 | #countdown {
19 |   text-align: center;
20 |   font-size: 50px;
21 |   font-family: "Glacial Indifference";
22 |   font-weight: 600;
23 |   color: white;
24 |   margin-left: 10px;
25 |   margin-right: 20px;
26 | }
27 | 
28 | button {
29 |   background-color: #355068;
30 |   border: 0;
31 |   padding-left: 0px;
32 |   padding-right: 0px;
33 | }
34 | 
35 | .imageContainer {
36 |   height: 40px;
37 |   width: 40px;
38 | }
39 | 
40 | .imageContainer img {
41 |   width:auto;
42 |   height:100%;
43 | }
44 | 
45 | #resetButton {
46 |   margin-right: 15px;
47 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |   <link rel="stylesheet" href="style.css">
 7 |   <title>Pomodoro widget</title>
 8 | 
 9 |     <!-- Search engine SEO meta tags -->
10 |     <meta
11 |     name="keywords"
12 |     content="Pomodoro Timer, Pomodoro Widget, Pomodoro, OBS Pomodoro, OBS Timer, OBS Studio,akashgiri.com,Akash Giri,akashgiri,akashgiricse,Akash,Giri,Software Engineer,Software Developer, Online Educator"
13 |     />
14 |     <meta
15 |       name="description"
16 |       content="Pomodoro timer widget for OBS studio."
17 |     />
18 |     <meta name="author" content="Akash Giri" />
19 | 
20 | </head>
21 | <body>
22 |   <script src="countdown.js"></script>
23 | 
24 |   <div class="container">
25 |       <button id="tomato" type="button" onclick="updateDuration()">
26 |         🍅
27 |       </button>
28 | 
29 |     <div id="countdown"><a id="start-timer-display">50</a>:00</div>
30 | 
31 |     
32 |     <div class="buttons">
33 |       <button type="button" onclick="playPauseCountdown()">
34 |         <div class="imageContainer">
35 |           <img id="playPause" src="playButton4x.png">
36 |         </div>
37 |       </button>
38 |       <button type="button" onclick="restartCountdown()">
39 |         <div class="imageContainer" id="resetButton">
40 |           <img src="resetButton4x.png">
41 |         </div>
42 |       </button>
43 |     </div>
44 | 
45 |     <audio id="yoScottAudio">
46 |       <source src="YoScott.m4a" type="audio/mpeg">
47 |     </audio>
48 |   </div>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <br />
 2 | <p align="center">
 3 |   <a href="https://github.com/hellomayuko/Pomodoro-Countdown">
 4 |     🍅
 5 |   </a>
 6 | 
 7 |   <h3 align="center">Pomodoro Countdown Timer</h3>
 8 | 
 9 |   <p align="center">
10 |     A Pomodoro Countdown widget for my Twitch/YouTube streams!
11 |   </p>
12 | 
13 |   <h4>Original Base Repository (forked from): https://github.com/hellomayuko/Pomodoro-Countdown</h4>
14 | </p>
15 | 
16 | ## About The Project
17 | 
18 | An interactive Pomodoro Counter widget for OBS.
19 | 
20 | ![Pomo Counter](Design.png)
21 | 
22 | ## 🔗 [YouTube tutorial to use the wigdet](https://youtu.be/hnHysObx9ek?t=176) ▶️
23 | 
24 | <!-- ## Installation
25 | 
26 | 1. Clone the repo or download the zip [here](https://github.com/hellomayuko/Pomodoro-Countdown/archive/master.zip)
27 | 
28 |    ```sh
29 |    git clone https://github.com/hellomayuko/Pomodoro-Countdown.git
30 |    ```
31 | 
32 | 2. Store files wherever you wish. -->
33 | 
34 | ## Set up in OBS
35 | 
36 | 1. Create a browser source in your scene.
37 |    ![01 -  Create Browser Source](readme/01_Create_Browser_Source.jpg)
38 | 
39 | 2. Name your browser source _(ex. PomodoroTimerWidget)_
40 |    ![02 - Name Browser Source](readme/02_Name_Browser_Source.jpg)
41 | 
42 | 3. Setup as seen in image
43 |    ```
44 |    URL - https://akashgiri.com/Custom-Pomodoro-Countdown/
45 |    Width - 380
46 |    Height - 90
47 |    ```
48 |    ![03 - Setup Browser Source](readme/03_Setup.png)
49 | 
50 | ## How to use
51 | 
52 | 1. Right-click the timer in Sources and press `Interact`
53 |    ![Interact with Widget](readme/04_Interact.jpg)
54 | 
55 | 2. Interact with the buttons!
56 |    ```
57 |    1. Change the timer between break and focus time periods
58 |    2. Resume/Pause timer
59 |    3. Reset timer
60 |    ```
61 |    ![Interact buttons](readme/05_Interact_Buttons.jpg)
62 | 


--------------------------------------------------------------------------------
/countdown.js:
--------------------------------------------------------------------------------
  1 | const secondsInaMinute = 60;
  2 | let input_focus_time = window.prompt("Enter FOCUS time in minutes");
  3 | let input_break_time = window.prompt("Enter BREAK time in minutes");
  4 | const break_time = secondsInaMinute * input_break_time;
  5 | const focus_time = secondsInaMinute * input_focus_time;
  6 | const seconds_10 = 10; //for testing
  7 | 
  8 | let interval;
  9 | let isPaused = true;
 10 | let countdownWasStarted = false;
 11 | let pomodoroDuration = focus_time; //by default
 12 | let timeLeftInSeconds = 0;
 13 | 
 14 | window.onload = function () {
 15 |   //when the document is finished loading, replace everything
 16 |   //between the <a ...> </a> tags with the value of splitText
 17 |   document.getElementById("start-timer-display").innerHTML = input_focus_time;
 18 | };
 19 | 
 20 | // Button Handlers
 21 | function updateDuration() {
 22 |   //The pomodoro duration is by default 50, but we can change to 15!
 23 |   if (pomodoroDuration == focus_time) {
 24 |     pomodoroDuration = break_time;
 25 |   } else {
 26 |     pomodoroDuration = focus_time;
 27 |   }
 28 | 
 29 |   timeLeftInSeconds = pomodoroDuration;
 30 |   updateTimeString();
 31 | }
 32 | 
 33 | function playPauseCountdown() {
 34 |   isPaused = !isPaused;
 35 | 
 36 |   updatePlayPauseButton();
 37 | 
 38 |   if (!countdownWasStarted) {
 39 |     //This function could be called after initiating the timer,
 40 |     //so we need to differentiate when its start vs pause vs resume
 41 |     resetCountdown();
 42 |     updateTimeString();
 43 |   }
 44 | 
 45 |   countdownWasStarted = true;
 46 | 
 47 |   if (isPaused) {
 48 |     stopCountdown();
 49 |   } else {
 50 |     // Update the count down every 1 second
 51 |     interval = setInterval(updateCountdown, 1000);
 52 |   }
 53 | }
 54 | 
 55 | function restartCountdown() {
 56 |   //When we reset the countdown, stop the interval and reset things back to normal
 57 |   stopCountdown();
 58 |   resetCountdown();
 59 | 
 60 |   isPaused = true;
 61 |   updatePlayPauseButton();
 62 |   updateTimeString();
 63 | }
 64 | 
 65 | // Biz Logic
 66 | function updateCountdown() {
 67 |   if (isPaused) {
 68 |     return;
 69 |   }
 70 | 
 71 |   timeLeftInSeconds--;
 72 | 
 73 |   updateTimeString();
 74 | 
 75 |   if (timeLeftInSeconds == 0) {
 76 |     playYoScott();
 77 |     stopCountdown();
 78 |     isPaused = true;
 79 |     updatePlayPauseButton();
 80 |   }
 81 | }
 82 | 
 83 | function pauseCountdown() {
 84 |   isPaused = !isPaused;
 85 | }
 86 | 
 87 | function stopCountdown() {
 88 |   clearInterval(interval);
 89 | }
 90 | 
 91 | function resetCountdown() {
 92 |   isPaused = false;
 93 |   timeLeftInSeconds = pomodoroDuration;
 94 | }
 95 | 
 96 | // View Updates
 97 | function updatePlayPauseButton() {
 98 |   let playPauseImageSrc;
 99 |   if (isPaused) {
100 |     playPauseImageSrc = "playButton4x.png";
101 |   } else {
102 |     playPauseImageSrc = "pauseButton4x.png";
103 |   }
104 |   document.getElementById("playPause").src = playPauseImageSrc;
105 | }
106 | 
107 | function updateTimeString() {
108 |   let minutes = Math.floor(timeLeftInSeconds / secondsInaMinute);
109 |   let seconds = timeLeftInSeconds % secondsInaMinute;
110 | 
111 |   if (seconds < 10) {
112 |     secondsString = "0" + seconds;
113 |   } else {
114 |     secondsString = seconds;
115 |   }
116 | 
117 |   // Output the result in an element with id="demo"
118 |   document.getElementById("countdown").innerHTML =
119 |     minutes + ":" + secondsString;
120 | }
121 | 
122 | function playYoScott() {
123 |   var yoScottAudio = document.getElementById("yoScottAudio");
124 |   yoScottAudio.play();
125 | 
126 |   document.getElementById("countdown").innerHTML = "YOO";
127 | }
128 | 


--------------------------------------------------------------------------------