new widdgets | removed concepts

project-oneui · Oct 23, 2023 · be04054 · be04054
1 parent 7607254
commit be04054
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 205 deletions.
diff --git a/main.js b/main.js
@@ -29,21 +29,18 @@ if (fs.existsSync(backgroundServicePath)) {
 }
 
 // declares the variables so the app doesnt outputs many error 
-let settingsWindow = null;
 let musicWidget = null;
 let batteryWidget = null;
 let deviceCareWidget = null;
 let weatherWidget = null;
 let topStoriesWidget = null;
 let flightWidget = null;
-let smartThingsWidget = null;
 let calendarWidget = null;
-let countdownWidget = null;
 let quickNotesWidget = null;
 let untisWidget = null;
 let digitalClockWidget = null;
 let forecastWidget = null;
-let upcomingMovies = null;
+let upcomingMoviesWidget = null;
 
 const folderPath = path.join(os.homedir(), 'AppData', 'Local', 'Samsung-Widgets');
 
@@ -59,15 +56,13 @@ const positionData = {
     deviceCareWidget: { y: "400", x: "75" },
     weatherWidget: { y: "550", x: "75" },
     flightWidget: { y: "700", x: "75" },
-    smartThingsWidget: { y: "300", x: "475" },
     topStoriesWidget: { y: "75", x: "475" },
     calendarWidget: { y: "300", x: "475" },
-    countdownWidget: { y: "550", x: "475" },
-    quickNotesWidget: { y: "750", x: "475" },
+    quickNotesWidget: { y: "550", x: "475" },
     untisWidget: { y: "900", x: "75" },
     digitalClockWidget: { y: "75", x: "875" },
-    forecastWidget: { y: "200", x: "875" },
-    forecastWidget: { y: "375", x: "875" },
+    forecastWidget: { y: "750", x: "475" },
+    upcomingMoviesWidget: { y: "200", x: "875" },
 };
 
 const stateData = {
@@ -77,14 +72,12 @@ const stateData = {
     weatherWidget: { show: "true" },
     topStoriesWidget: { show: "false" },
     flightWidget: { show: "false" },
-    smartThingsWidget: { show: "false" },
     calendarWidget: { show: "true" },
-    countdownWidget: { show: "false" },
     quickNotesWidget: { show: "true" },
     untisWidget: { show: "false" },
     digitalClockWidget: { show: "true" },
     forecastWidget: { show: "false" },
-    upcomingMovies: { show: "false" },
+    upcomingMoviesWidget: { show: "false" },
 };
 
 const weatherData = {
@@ -137,13 +130,12 @@ const widgetsData = {
         { name: "weatherWidget", width: 390, height: 125, html: "./src/widgets/weather/weather.html", "clickthrough": true },
         { name: "topStoriesWidget", width: 390, height: 200, html: "./src/widgets/news/topStories.html", "clickthrough": true },
         { name: "flightWidget", width: 390, height: 175, html: "./src/widgets/wallet/flight.html", "clickthrough": true },
-        { name: "smartThingsWidget", width: 390, height: 125, html: "./src/widgets/smartThings/smartThings.html", "clickthrough": true },
         { name: "calendarWidget", width: 390, height: 225, html: "./src/widgets/calendar/calendar.html", "clickthrough": true },
-        { name: "countdownWidget", width: 390, height: 175, html: "./src/widgets/calendar/countdown.html", "clickthrough": true },
         { name: "quickNotesWidget", width: 390, height: 175, html: "./src/widgets/notes/quickNotes.html", "clickthrough": false },
         { name: "untisWidget", width: 390, height: 125, html: "./src/widgets/untis.html", "clickthrough": true },
         { name: "digitalClockWidget", width: 390, height: 100, html: "./src/widgets/clock/digitalClock.html", "clickthrough": true },
-        { name: "forecastWidget", width: 390, height: 175, html: "./src/widgets/videoPlayer/upcomingMovies.html", "clickthrough": true },
+        { name: "forecastWidget", width: 390, height: 175, html: "./src/widgets/weather/forecast.html", "clickthrough": true },
+        { name: "upcomingMoviesWidget", width: 390, height: 200, html: "./src/widgets/videoPlayer/upcomingMovies.html", "clickthrough": true },
     ],
 };
 
@@ -196,6 +188,8 @@ app.on('ready', () => {
 
                 widgetWindow.loadFile(path.join(__dirname, widget.html));
 
+                widgetWindow.webContents.openDevTools()
+
                 // sets the variable again to null when its closed
                 widgetWindow.on('closed', () => {
                     eval(`${widget.name} = null`);

diff --git a/src/css/widgets/calendar/countdown.css b/src/css/widgets/calendar/countdown.css
diff --git a/src/css/widgets/smartThings/smartThings.css b/src/css/widgets/smartThings/smartThings.css
diff --git a/src/css/widgets/videoPlayer/upcomingMovies.css b/src/css/widgets/videoPlayer/upcomingMovies.css
@@ -12,7 +12,7 @@ body {
     padding: 5px 15px 5px 15px;
     box-sizing: border-box;
     align-items: center;
-    justify-content: center;
+    justify-content: space-evenly;
     flex-direction: column;
 }
 
@@ -28,6 +28,29 @@ header {
 
 #container-movies {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.movie-container {
+    flex-direction: column;
+    display: flex;
     align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.poster {
+    height: 120px;
+    border-radius: 12px;
+}
+
+.name {
+    font-size: 12px;
+    width: 66px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
diff --git a/src/js/calendar/countdown.js b/src/js/calendar/countdown.js
diff --git a/src/js/smartThings/smartThings.js b/src/js/smartThings/smartThings.js
diff --git a/src/js/videoPlayer/upcomingMovies.js b/src/js/videoPlayer/upcomingMovies.js
@@ -37,4 +37,25 @@ window.addEventListener("DOMContentLoaded", () => {
     containerMain.style.color = textColor;
 
     containerMain.style.background = `linear-gradient(135deg, rgb(${colorData.red}, ${colorData.green}, ${colorData.blue}) 0%, rgb(${colorData.red - 35}, ${colorData.green - 35}, ${colorData.blue - 35}) 100%)`;
+
+    async function setMovies() {
+        const posters = document.getElementsByClassName('poster')
+        const names = document.getElementsByClassName('name')
+
+        const movieResponse = await fetch('https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1', {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYTJlZTcyZjhkYjRhMWQyMTgwY2Q1YzUzM2E0ODlhMCIsInN1YiI6IjY1MjZhMzJmZmQ2MzAwNWQ3OGQ3ODY2ZCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.TyvVBN5Lw6lp84n-hoTrhLBQMsad92mmuBZ7RU4Ir7A"
+            }
+        })
+
+        const movieData = await movieResponse.json()
+
+        for (i = 0; i < 4; i++) {
+            names[i].innerHTML = movieData.results[i].title
+            posters[i].src = `https://image.tmdb.org/t/p/original${movieData.results[i].poster_path}`
+            console.log(`https://image.tmdb.org/t/p/original${movieData.results[i].poster_path}`)
+        }
+    }
+    setMovies()
 })
diff --git a/src/widgets/calendar/countdown.html b/src/widgets/calendar/countdown.html
diff --git a/src/widgets/smartThings/smartThings.html b/src/widgets/smartThings/smartThings.html
diff --git a/src/widgets/videoPlayer/upcomingMovies.html b/src/widgets/videoPlayer/upcomingMovies.html
@@ -18,23 +18,24 @@
         </header>
 
         <container id="container-movies">
-            <container id="movie-container">
-                <span>Avengers: Endgame</span>
+            <container class="movie-container">
+                <img class="poster">
+                <span class="name">Avengers: Endgame</span>
             </container>
 
-            <container id="movie-container">
-                <span>Avengers: Endgame</span>
-
+            <container class="movie-container">
+                <img class="poster">
+                <span class="name">Avengers: Endgame</span>
             </container>
 
-            <container id="movie-container">
-                <span>Avengers: Endgame</span>
-
+            <container class="movie-container">
+                <img class="poster">
+                <span class="name">Avengers: Endgame</span>
             </container>
 
-            <container id="movie-container">
-                <span>Avengers: Endgame</span>
-
+            <container class="movie-container">
+                <img class="poster">
+                <span class="name">Avengers: Endgame</span>
             </container>
         </container>
     </container>