feat: added remote-control server code and template

4gray · Oct 8, 2024 · 5a4cdd8 · 5a4cdd8
1 parent 4589adc
commit 5a4cdd8
Show file tree

Hide file tree

Showing 7 changed files with 168 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ preload.js
 shared/*.js
 playwright-report
 .nx
+server.js
 
 # dependencies
 /node_modules

diff --git a/electron/main.ts b/electron/main.ts
@@ -4,6 +4,7 @@ import * as path from 'path';
 import * as url from 'url';
 import { Api } from './api';
 import { AppMenu } from './menu';
+import { Server } from './server';
 
 const fixPath = require('fix-path');
 const {
@@ -120,6 +121,7 @@ try {
         const menu = new AppMenu(win);
         Menu.setApplicationMenu(menu.getMenu());
         api.setMainWindow(win);
+        new Server(3000, api);
 
         // create hidden window for epg worker
         createEpgWorkerWindow();

diff --git a/electron/remote-control/index.sqrl b/electron/remote-control/index.sqrl
@@ -0,0 +1,85 @@
+<html>
+  <head>
+    <title>{{it.title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      header {
+        width: 100%;
+        background-color: #f8f9fa;
+        padding: 10px 0;
+        text-align: center;
+      }
+      header h1 {
+        margin: 0;
+        font-size: 24px;
+      }
+      .button-container {
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+        margin-top: 20px;
+      }
+      button {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 5px;
+        font-size: 16px;
+        cursor: pointer;
+        color: white;
+      }
+      .up-channel {
+        background-color: #007bff;
+      }
+      .down-channel {
+        background-color: #28a745;
+      }
+      footer {
+        margin-top: 30px;
+        text-align: center;
+      }
+      footer p {
+        font-size: 14px;
+        color: #6c757d;
+      }
+    </style>
+    <script>
+      // AJAX isteği yapmak için fetch API kullanımı
+      function callAjax(url) {
+        fetch(url)
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return response.json();
+          })
+          .then(data => {
+            console.log('Success:', data);
+            alert('AJAX request successful! Check console for data.');
+          })
+          .catch((error) => {
+            console.error('There was a problem with your fetch operation:', error);
+          });
+      }
+    </script>
+  </head>
+  <body>
+    <header>
+      <h1>{{it.headerText}}</h1>
+    </header>
+
+    <div class="button-container">
+      <button class="up-channel" onclick="callAjax('{{it.upChannelUrl}}')">{{it.upChannelText}}</button>
+      <button class="down-channel" onclick="callAjax('{{it.downChannelUrl}}')">{{it.downChannelText}}</button>
+    </div>
+
+    <footer>
+      <p>{{it.footer}}</p>
+    </footer>
+  </body>
+</html>
diff --git a/electron/server.ts b/electron/server.ts
@@ -0,0 +1,58 @@
+import { IncomingMessage, ServerResponse } from "http";
+
+const http = require('http');
+const Sqrl = require('squirrelly');
+const fs = require('fs');
+const path = require('path');
+
+export class Server {
+    /** Server instance */
+    server: any;
+    /** Port number */
+    port: number;
+    /** Api instance */
+    api: any;
+
+    /**
+     * Creates a new server instance
+     * @param port port number
+     * @param api application instance
+     */
+    constructor(_port: number, _api: any) {
+        this.api = _api;
+        this.port = _port;
+        this.server = http.createServer(this.requestListener.bind(this));
+        this.server.listen(this.port);
+    }
+
+    async requestListener(request: IncomingMessage, response: ServerResponse) {
+        const currentPage = request.url?.split('?')[0]?.split('/').splice(-1)[0];
+        console.log(this.api.store);
+        switch (currentPage) {
+            case '': {
+                const indexFile = await fs.promises.readFile(path.join(__dirname, './remote-control/', 'index.sqrl'), 'utf-8');
+                const renderedHtml = Sqrl.render(indexFile, {
+                    headerText: 'My Dynamic Header',
+                    upChannelText: 'Up Channel',
+                    downChannelText: 'Down Channel',
+                    upChannelUrl: '/upChannel',
+                    downChannelUrl: '/downChannel',
+                    title: 'IPTVNator'
+                  });
+                response.writeHead(200, { 'Content-Type': 'text/html' });
+                response.end(renderedHtml);
+                break; 
+            }
+            case 'upChannel': {
+                // this.api.upChannel();
+                response.writeHead(200, { 'Content-Type': 'text/html' });
+                response.end('Up Channel');
+                break;
+            }
+            default:
+                response.writeHead(404, { 'Content-Type': 'text/html' });
+                response.end('404');
+                break;
+        }
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
         "node-mpv": "github:4gray/Node-MPV",
         "rxjs": "7.8.1",
         "semver": "7.5.2",
+        "squirrelly": "9.1.0",
         "uuid": "9.0.0",
         "video.js": "7.20.3",
         "videojs-contrib-quality-levels": "2.2.0",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -283,5 +283,12 @@
     "STREAM_URL_COPIED": "Stream URL copied to clipboard",
     "COPY_STREAM_URL": "Copy Stream URL"
   },
-  "INFORMATION": "Information"
+  "INFORMATION": "Information",
+  "REMOTE_CONTROL": {
+    "TITLE": "Remote control",
+    "UP_CHANNEL": "Up channel",
+    "DOWN_CHANNEL": "Down channel",
+    "HEADER": "IPTVNator Remote Control",
+    "FOOTER": "IPTVNator Remote Control"
+  }
 }