Merge branch 'dev'

src/App.vue

@@ -1,13 +1,16 @@
 <template>
   <div id="app">
-    <div class="pause"></div>
-    <to-do-list></to-do-list>
-    <div class="aside">
-      <div class="ytb" v-show="displayYoutube">
-        <iframe width="100%" height="388" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
-                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                id="youtube_video">
-        </iframe>
+    <div id="container">
+      <div id="todo-container">
+        <to-do-list></to-do-list>
+      </div>
+      <div id="right-side">
+        <div id="pomodoro">
+          <pomodoro></pomodoro>
+        </div>
+        <div id="ytb-player">
+          <ytb-player></ytb-player>
+        </div>
       </div>
     </div>
     <footer>Made with <a href="https://github.com/RemiSaurel/todoapp" target="_blank" class="name">💙</a> by <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="name">Rémi Saurel</a> </footer>
@@ -16,15 +19,15 @@
 
 <script>
 import ToDoList from "@/components/ToDoList";
+import Pomodoro from "@/components/Pomodoro";
+import YtbPlayer from "@/components/YtbPlayer";
+
 export default {
   name: 'App',
   components: {
     ToDoList,
-  },
-  data() {
-    return {
-      displayYoutube: true
-    }
+    Pomodoro,
+    YtbPlayer
   }
 }
 
@@ -43,9 +46,8 @@ a {
 }
 
 body {
-  background: -webkit-linear-gradient(  0deg, rgba(255, 253, 226, 1) 0%, rgba(255, 228, 164, 1) 50%, rgba(255, 217, 153, 1) 100%);
+  background: #fdde95;
 }
-
 footer {
   text-align: center;
   margin-top: 16px;
@@ -53,10 +55,45 @@ footer {
   width: 100%;
 }
 
-.ytb {
-  margin-left: 32px;
-  margin-right: 32px;
-  margin-top: 16px;
+#container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+@media (max-width: 380px) {
+  #ytb-player {
+    display: none;
+  }
+}
+
+@media (max-width: 330px) {
+  #ytb-player {
+    display: block;
+  }
+}
+
+@media (max-width: 330px) {
+  #right-side {
+    display: none;
+  }
+}
+
+@media (min-width: 330px) {
+  #right-side {
+    display: flex;
+    width: 50%;
+    flex-direction: column;
+    margin-right: 32px;
+    margin-left: 32px;
+  }
+}
+
+
+#todo-container {
+  width: 50%;
+  margin-right: 16px;
+  max-width: 500px;
 }
 
 /* TEXT UNDERLINE */

src/components/Pomodoro.vue

@@ -15,15 +15,15 @@
       </div>
     </div>
     <div id="time">
-      <span id="minutes">{{minutes}}</span>
+      <div id="minutes">
+        <div><i @click="this.addMinutes" class="arrow up"></i></div>
+        <span>{{minutes}}</span>
+        <div><i @click="this.substractMinutes" class="arrow down"></i></div>
+      </div>
       <span id="colon">:</span>
       <span id="seconds">{{seconds}}</span>
     </div>
     <div id="params">
-      <div id="presetTime">
-        <button @click="setMinutes(25)">25'</button>
-        <button @click="setMinutes(45)">45'</button>
-      </div>
       <div id="startStop">
         <button @click="startSession" id="start">▶️</button>
         <button @click="pauseSession" id="pause" disabled>⏸</button>
@@ -35,6 +35,7 @@
 
 <script>
 const MINUTES = 25;
+const RANGE_MINUTES = 5;
 const SECONDS = 0;
 const SHORT_PAUSE = 5;
 const LONG_PAUSE = 30;
@@ -48,21 +49,48 @@ export default {
       sessionStarted: false,
       nbSessionsFinished: 0,
       isRestingTime: false,
-      customTimer: MINUTES
+      customTimer: MINUTES,
     }
   },
   methods: {
-    setMinutes(value) {
-      this.minutes = value.toString();
-      this.customTimer = value;
+    lockArrows() {
+      const arrows = document.querySelectorAll(".arrow");
+      arrows.forEach(arrow => {
+        arrow.style.pointerEvents = "none";
+      });
+    },
+    unlockArrows() {
+      const arrows = document.querySelectorAll(".arrow");
+      arrows.forEach(arrow => {
+        arrow.style.pointerEvents = "auto";
+      });
+    },
+    addMinutes() {
+      this.minutes += RANGE_MINUTES;
+      this.handleLimits()
+      this.customTimer = this.minutes;
+    },
+    substractMinutes() {
+      this.minutes -= RANGE_MINUTES;
+      this.handleLimits()
+      this.customTimer = this.minutes;
+    },
+    handleLimits() {
+      if (this.minutes < 10) {
+        this.minutes = 10;
+      } else if (this.minutes > 60) {
+        this.minutes = 60;
+      }
     },
     startSession() {
       if (!this.sessionStarted) {
+        this.lockArrows()
         this.countDownTimer();
         this.sessionStarted = true;
       }
       if (!this.isRestingTime) {
         this.enableButton("pause");
+        this.enableButton("reset");
       }
       this.disableButton("start");
       let all = document.querySelectorAll("#presetTime button");
@@ -91,6 +119,7 @@ export default {
       let all = document.querySelectorAll("#presetTime button, #start");
       for (let el of all) { el.disabled = false; }
       this.disableButton("pause")
+      this.unlockArrows()
     },
     countDownTimer: function () {
       if (this.minutes === "00" && this.seconds === "00") {
@@ -164,14 +193,19 @@ export default {
 }
 
 #time {
+  display: flex;
+  justify-content: center;
   font-weight: 800;
-  font-size: 8vw;
+  font-size: 5vw;
   text-align: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 #startStop > button{
   font-size: 32px;
   width: 120px;
+  text-align: center;
 }
 
 #params {
@@ -182,37 +216,97 @@ export default {
   margin: 8px;
   font-size: 24px;
   width: 62px;
+  text-align: center;
 }
 
 #seconds {
   display: inline-block;
   width: 10vw;
+  padding-top: 18px;
 }
+
+#colon {
+  padding-top: 15px;
+}
+
 #minutes {
+  display: flex;
+  flex-direction: column;
+}
+
+#minutes > div {
+  display: flex;
+  justify-content: center;
+}
+
+#minutes > span {
   display: inline-block;
   width: 10vw;
 }
 
-#message {
-  font-size: 1.6rem;
+@media (max-width: 490px) {
+  #message {
+    display: none;
+  }
 }
 
-.dot {
-  height: 25px;
-  width: 25px;
-  background-color: lightslategrey;
-  border-radius: 50%;
-  margin: 12px 4px 12px 4px;
-  display: inline-block;
+@media (min-width: 490px) {
+  #message {
+    font-size: 1.6rem;
+  }
 }
 
-.active {
-  height: 25px;
-  width: 25px;
-  background-color: mediumseagreen;
-  border-radius: 50%;
-  margin: 12px 4px 12px 4px;
+@media (max-width: 390px) {
+  .dot {
+    display: none;
+  }
+
+  .active {
+    display: none;
+  }
+}
+
+@media (min-width: 390px) {
+  .dot {
+    height: 25px;
+    width: 25px;
+    background-color: lightslategrey;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
+  }
+
+  .active {
+    height: 25px;
+    width: 25px;
+    background-color: mediumseagreen;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
+  }
+}
+
+.arrow {
+  border: solid black;
+  border-width: 0 6px 6px 0;
+  font-size: 1rem;
   display: inline-block;
+  padding: 6px;
+}
+
+.arrow:hover {
+  border: solid mediumseagreen;
+  border-width: 0 6px 6px 0;
+}
+
+.up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
 }
 
 </style>

src/components/ToDoList.vue

@@ -16,22 +16,14 @@
         </div>
       </div>
     </div>
-
-    <div id="pomodoro">
-      <pomodoro></pomodoro>
-    </div>
   </div>
 </template>
 
 <script>
 
-import Pomodoro from "@/components/Pomodoro";
 
 export default {
   name: "ToDoList",
-  components: {
-    Pomodoro
-  },
   data() {
     return {
       item: "",
@@ -62,14 +54,15 @@ export default {
   }
 
   #pomodoro {
-    width: 60%;
+    width: 50%;
+    margin-right: 32px;
   }
 
   #todolist {
     display: flex;
     flex-direction: column;
     margin-left: 32px;
-    width: 40%;
+    width: 100%;
   }
 
   #todo_input {

src/components/YtbPlayer.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="ytb-container">
+    <div class="ytb" v-show="displayYoutube">
+      <iframe width="100%" height="360" src="https://www.youtube-nocookie.com/embed/MCkTebktHVc?autoplay=1&mute=1" title="YouTube video player" frameborder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+              id="youtube_video">
+      </iframe>
+    </div>
+    <div class="params">
+      <button @click="prevPlaylist" id="prev">⏮</button>
+      <button @click="nextPlaylist" id="next">⏭</button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "YtbPlayer",
+  data() {
+    return {
+      displayYoutube: true,
+      livesId: [],
+      songId: 0
+    }
+  },
+  methods: {
+    readFileAndStore()
+    {
+      let lofi = require("../data/lofi.json");
+      this.livesId = lofi.id;
+    },
+    nextPlaylist()
+    {
+      this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId;
+      let id = this.livesId[this.songId];
+      let ytb = document.getElementById("youtube_video")
+      ytb.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
+    },
+    prevPlaylist()
+    {
+      --this.songId === -1 ? this.songId = this.livesId.length - 1: this.songId;
+      console.log(this.songId)
+      console.log(this.livesId.length)
+      let id = this.livesId[this.songId];
+      let ytb = document.getElementById("youtube_video")
+      ytb.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
+    }
+  },
+  created() {
+    this.readFileAndStore();
+  }
+}
+</script>
+
+<style scoped>
+
+.ytb {
+  margin-top: 24px;
+  width: 100%;
+}
+
+.params {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.params > * {
+  width: 80px;
+  font-size: 24px;
+}
+
+</style>

src/data/lofi.json

@@ -0,0 +1,11 @@
+{
+  "id": [
+    "MCkTebktHVc",
+    "7NOSDKb0HlU",
+    "-5KAN9_CzSA",
+    "jfKfPfyJRdk",
+    "SIt21jdTYKk",
+    "XDh0JcxrbPM",
+    "GDQnA1LVCWA"
+  ]
+}