Yts fetch movie and movei details

Assets/css/movieDetails.css

@@ -0,0 +1,25 @@
+#movie_title_info>h1{
+    font-size: 2.5rem;
+    font-weight: bolder;
+}
+#movie_title_info>h2{
+    font-size: 1.25rem;
+    line-height: 24px;
+    margin-bottom: 0;
+    font-weight: bolder;
+}
+.rating_info{
+    font-size: 1.25em;
+    font-weight: bolder;
+}
+.trailer::before{
+    content: '';
+    display: block !important;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    background: url(https://yts.mx/assets/images/website/play-trailer.svg) no-repeat center center;
+}

app.js

@@ -1,4 +1,5 @@
 // java script for main.html
+const {remote,ipcRenderer} = require("electron");
 
 let movies_list_title = document.getElementById("movies_list_title");
 let list_movies = document.getElementById("list_movies");
@@ -10,7 +11,16 @@ let rating = document.getElementById("rating");
 let genre = document.getElementById("genre");
 let order_by = document.getElementById("order_by");
 
-let url = new URL("https://yts.mx/api/v2/list_movies.json");
+let url;
+
+if(remote.getGlobal("url")){
+    url = new URL(remote.getGlobal("url"));
+    setParameters(url);
+}
+else{
+    url = new URL("https://yts.mx/api/v2/list_movies.json");
+}
+
 
 search_field.addEventListener("keyup",(e)=>{
     if(e.key === "Enter"){
@@ -62,8 +72,35 @@ page_selector.addEventListener("change",()=>{
 
 getData(url);
 
+function setParameters(url){
+    if(url.searchParams.get("query_term")){
+        search_field.value = url.searchParams.get("query_term");
+    }
+
+    if(url.searchParams.get("quality")){
+        quality.value = url.searchParams.get("quality");
+    }
+
+    if(url.searchParams.get("genre")){
+        genre.value =url.searchParams.get("genre");
+    }
+
+    if(url.searchParams.get("minimum_rating")){
+        rating.value = url.searchParams.get("minimum_rating");
+    }
+
+    if(url.searchParams.get("sort_by")){
+        order_by.value = url.searchParams.get("sort_by");
+    }
+
+    if(url.searchParams.get("page")){
+        page_selector.value = url.searchParams.get("page");
+    }
+}
+
 function getData(url){
     list_movies.innerHTML=`<img src="./Assets/images/preloader.gif" alt="preloading" class="img-fluid" width="400" height="400">`;
+    ipcRenderer.send("saveUrl",url.href);
     fetch(url)
         .then(res=>{
             res.json()
@@ -113,7 +150,7 @@ function showMovies(movies) {
     for (let movie of movies) {
         movie_card = `<div class="col-3 mb-4">
     <div style="width: fit-content;" class="d-inline-block">
-        <a href="#" class="movie_link" data-id="${movie.id}">
+        <a href="./src/movieDetails.html?id=${movie.id}" class="movie_link">
             <div class="card" style="border: 5px solid white;">
                 <img class="img-fluid movie_image"
                      src="${movie.medium_cover_image}"

main.js

@@ -1,7 +1,13 @@
 // Modules
-const {app, BrowserWindow} = require('electron');
+const {app, BrowserWindow, ipcMain} = require('electron');
 const windowStateKeeper = require('electron-window-state');
 
+let mainWindow;
+
+ipcMain.on("saveUrl",(e,args)=>{
+    global.url = args;
+})
+
 // Create a new BrowserWindow when `app` is ready
 function createWindow() {
     let state = windowStateKeeper({
@@ -19,6 +25,8 @@ function createWindow() {
         webPreferences: {nodeIntegration: true}
     });
 
+    mainWindow.setBackgroundColor("#211e1e");
+
     //manage new window state
     state.manage(mainWindow);
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "yts-streaming",
+  "name": "YTS-Streaming",
   "version": "1.0.0",
   "description": "YTS Movie Streaming",
   "main": "main.js",

src/movieDetails.html

@@ -6,12 +6,30 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+
+    <link rel="stylesheet" href="../Assets/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="../Assets/css/movieDetails.css">
+
     <title>YTS-Streaming</title>
 </head>
 <body>
+    <div class="border-bottom border-secondary">
+        <div class="container">
+            <div class="m-3">
+                <div class="float-left mt-2">
+                    <span class="btn btn-outline-success" onclick="goBack()"> &larr; Back </span>
+                </div>
+                <nav class="navbar navbar-dark bg-dark justify-content-center border-0">
+                    <img src="../Assets/images/logo-YTS.svg" alt="Logo" class="d-inline-block align-top">
+                </nav>
+            </div>
+        </div>
+    </div>
+    <div id="background_content">
 
+    </div>
 </body>
 </html>
 <script>
-    require("./movieDetail");
+    require("./movieDetails");
 </script>

src/movieDetails.js

@@ -0,0 +1,139 @@
+const {remote} = require("electron");
+
+let movie_id = getParameter(window.location);
+let url = new URL("https://yts.mx/api/v2/movie_details.json?movie_id=00&with_images=true&with_cast=true");
+let details_content;
+let background_content = document.getElementById("background_content");
+
+getData(url,movie_id)
+
+function getData(url,id){
+    background_content.innerHTML=`<div class="text-center"><img src="../Assets/images/preloader.gif" alt="preloading" class="img-fluid" width="400" height="400"></div>`;
+    url.searchParams.set("movie_id",id);
+    fetch(url)
+        .then(res=>{res.json()
+            .then(data=>{
+                let movie = data.data.movie;
+                setBackground(movie);
+                generalIntro(movie);
+                screenshots(movie);
+                descriptionAndTrailer(movie);
+            })
+            .catch(err=>{
+                console.log(err);
+                goBack();
+            })
+        })
+        .catch(err=>{
+                console.log(err);
+                goBack();
+        });
+}
+
+function setBackground(movie){
+    let content = `<div style="background: linear-gradient(to bottom,rgba(33,30,30,0.65) 0,rgba(33,30,30,1) 100%), url(${movie.background_image}) no-repeat center center; background-size: cover; height: 580px; overflow: visible;">
+    <div class="container" id="details_content"></div>
+</div>`;
+    background_content.innerHTML = content;
+    details_content = document.getElementById("details_content");
+}
+
+function generalIntro(movie){
+    let content = `<div class="row pt-5 justify-content-center">
+    <div class="col-5 col-lg-3">
+        <div class="rounded" style="border:5px solid white; width: fit-content;">
+            <img src="${movie.medium_cover_image}" class="d-inline-block align-top">
+        </div>
+    </div>
+    <div class="col-1"></div>
+    <div class="col-6 col-lg-5">
+        <div id="movie_title_info">
+            <h1 class="mb-4">${movie.title}</h1>
+            <h2>${movie.year}</h2>
+            <h2>${movie.genres.toString().replace(/,/gm," / ")}</h2>
+        </div>
+        <p class="mt-4 mb-4">
+            <em class="text-white align-middle" style="font-size: 1.3em;">Available in: &nbsp;</em>
+            <a href="#" title="Watch ${movie.title} in 720p Torrent" class="btn btn-secondary border-dark">720p.WEB</a>
+            <a href="#" title="Watch ${movie.title} in 1080p Torrent" class="btn btn-secondary border-dark ml-1">1080p.WEB</a>
+            <br><br>
+            ${movie.imdb_code?`<a href="#" class="btn btn-success" title="Download subtitles for ${movie.title}" onclick="openSubtitleLink(event,'${movie.imdb_code}')">Download Subtitles</a>`:''}
+        </p>
+        <div>
+            <div class="row">
+                <div class="col-3 col-lg-2">
+                    <img src="../Assets/images/logo-imdb-svg.svg" alt="IMDb Rating">
+                </div>
+                <div class="col rating_info text-white">
+                    <span>${movie.rating}</span>
+                    <span class="text-success">&#9733</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+    details_content.innerHTML += content;
+}
+
+function screenshots(movie){
+    let content = `<div class="row mt-5 justify-content-center">
+    <div class="col-4">
+        <img src="${movie.medium_screenshot_image1}" alt="${movie.title_long} watch" class="img-fluid">
+    </div>
+    <div class="col-4">
+        <img src="${movie.medium_screenshot_image2}" alt="${movie.title_long} watch" class="img-fluid">
+    </div>
+    <div class="col-4">
+        <img src="${movie.medium_screenshot_image3}" alt="${movie.title_long} watch" class="img-fluid">
+    </div>
+</div>`;
+    details_content.innerHTML+= content;
+}
+
+function descriptionAndTrailer(movie){
+    let content = `<div class="row mt-5 mb-4 justify-content-center">
+    <div class="col-6">
+        <h3 style="font-size: 1.25em;" class="font-weight-bolder">Description :</h3>
+        <p class="text-wrap text-justify" style="font-size: 1.1em;">
+            ${movie.description_full}
+        </p>
+    </div>
+    <div class="col-6 text-center" style="height: fit-content">
+        <h3 style="font-size: 1.25em;" class="font-weight-bolder mb-4">Watch Trailer :</h3>
+        <div class="trailer">
+            <a href="#" onclick="openYoutubeLink(event,'${movie.yt_trailer_code}')">
+                <img src="${movie.medium_screenshot_image1}"
+                 alt="${movie.title}" class="img-fluid">
+            </a>
+        </div>
+    </div>
+</div>`;
+    details_content.innerHTML += content;
+}
+
+function getParameter(url){
+    url = new URL(url);
+    return url.searchParams.get("id");
+}
+
+window.goBack = ()=>{
+    window.history.back();
+}
+
+window.openYoutubeLink= (e,code)=>{
+    e.preventDefault();
+    if(code !== "") {
+        openInBrowser("https://www.youtube.com/watch?v=" + code);
+    }
+};
+
+window.openSubtitleLink= (e,code)=>{
+    e.preventDefault();
+    if(code !== "") {
+        openInBrowser("https://yifysubtitles.org/movie-imdb/" + code);
+    }
+};
+
+function openInBrowser(link){
+    remote.shell.openExternal(link)
+};