ui changed - listing - deleting files added

farhang-sa · Jul 1, 2024 · aab2334 · aab2334
1 parent 37b9593
commit aab2334
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 28 deletions.
diff --git a/development/scripts/app.js b/development/scripts/app.js
@@ -1,6 +1,8 @@
 import React, {useEffect, useState} from 'react' ;
 import { createRoot } from "react-dom/client";
 import { BsCloudDownloadFill } from "react-icons/bs";
+import { BsTrash3Fill } from "react-icons/bs";
+import { BsListCheck } from "react-icons/bs";
 import ReactLoading from 'react-loading';
 import $ from 'jquery' ;
 
@@ -10,76 +12,137 @@ window.$ = $ ;
 const App = () => {
 
 	const [isDownloading, setIsDownloading] = useState(false);
-	const [systemMessage , setSystemMessage] = useState('No Message' );
+	const [systemMessage , setSystemMessage] = useState('' );
+	const iconsStyle = {width: "1.75em", height: "1.75em", cursor: "pointer"};
+	const winBinLink = 'http://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp.exe' ;
+	const linBinLink = 'http://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp_linux' ;
 
-	const askDownload = () => {
+	window.askDelete = ( fileName ) =>{
+		setSystemMessage( 'deleting \'' + fileName + '\'' );
 		setIsDownloading( true );
-		let link = $( 'input.link-input' ).val();
-		$.post( "/api.php", {
+		$.post( window.baseName + "api.php", {
+			'link' : 'cleanfile:' + fileName
+		} , function( response ) {
+			setSystemMessage( response );
+			setIsDownloading( false );
+		});
+	}
+
+	const askDownload = ( action ) => {
+		setIsDownloading( true );
+		let link = action ? action : $( 'input.link-input' ).val();
+		$.post( window.baseName + "api.php", {
 			'link' : link
 		} , function( response ) {
 			if( response === 'yt-dlp binary not prepared' ){
 				response = 'yt-dlp binary files not available ( check internet )';
 			} else if( response === 'Download failed' ){
 				/// nothing !
+			} else if( response === 'all videos deleted' ){
+				/// nothing !
+			} else if( response === 'video deleted' ) {
+				/// nothing !
+			} else if( response.startsWith('videos-list:') ){
+				/// nothing !
+				response = response.replaceAll('videos-list:', '' );
+				if( response === '{}' )
+					response = 'no videos found' ;
+				else {
+					let responseValues = response ;
+					let html = $( "<div></div>" );
+					responseValues = JSON.parse( responseValues );
+					let co = 0 ;
+					let icoTrash = $( 'div.icon-holder-trash' ).html();
+					let icoDownload = $( 'div.icon-holder-download' ).html();
+					for( let video in responseValues ){
+						let nh = '<div class="mt-1 text-start">' + (++co ) + ". " + video + ' ';
+						nh += `<a class='btn btn-md btn-primary' href='${video}' download>${icoDownload}</a> `;
+						nh += `<span class='btn btn-md btn-danger' onclick="window.askDelete('${video}');">${icoTrash}</span><br /> `;
+						nh += "</div>" ;
+						html.append( nh );
+					}
+					response = html.html() ;
+				}
 			} else { // File Name received !
-				setTimeout(()=>{
-					let msg = $( '.system-message' );
-					let txt = msg.text();
-					let dll = $( '<div><a href="/' + txt + '" download>' + txt + '</a></div>' );
-					msg.html( dll.html() );
-				} ,500 );
+				let dll = $( '<div><a href="/' + response + '" download>' + response + '</a></div>' );
+				response = dll.html() ;
 			}
 			setSystemMessage( response );
 			setIsDownloading(false );
 		});
-		setSystemMessage( 'Download in progress , please wait' );
+		if( link === 'clean' )
+			setSystemMessage( 'deleting video files , please wait' );
+		else if( link === 'list' )
+			setSystemMessage( 'listing video files , please wait' );
+		else setSystemMessage( 'Download in progress , please wait' );
 	}
 
 	return (
 		<>
+			<div className='icon-holder-trash hidden' style={{'display':'none'}}>
+				<BsTrash3Fill/>
+			</div>
+			<div className='icon-holder-download hidden' style={{'display':'none'}}>
+				<BsCloudDownloadFill/>
+			</div>
 			<div className="container">
 				<header><h4>Welcome To YouTube Downloader</h4></header>
 				<div className="row mt-5">
 					<div className="col-12">
 						<h5>
 							See this &#160;
 							<a target="_blank"
-							    href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md">link
+							   href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md">link
 							</a>&#160; for supported sites
+							<br/><br/>
+							<BsListCheck/> list all videos - <BsTrash3Fill/> delete all videos
 						</h5>
 					</div>
 				</div>
 				<div className="row mt-4">
 					<div className="col-12 col-sm-2"></div>
 					<div className="col-12 col-sm-8">
 						<span className="input-group">
-							<input type="hidden" name="hidden1" value="hideVal1"/>
+							<span className="input-group-addon p-4">
+								<BsListCheck
+									onClick={() => askDownload('list')}
+									style={iconsStyle}/>
+							</span>
+							<span className="input-group-addon p-4">
+								<BsTrash3Fill
+									onClick={() => askDownload('clean')}
+									style={iconsStyle}/>
+							</span>
 							<input type="text"
-							   className="form-control form-control-lg link-input"
-							   placeholder="Enter link"/>
+								   className="form-control form-control-lg link-input"
+								   placeholder="Enter link"/>
 							{!isDownloading ?
 								(<span className="input-group-addon p-4">
 								<BsCloudDownloadFill
 									onClick={() => askDownload()}
-									style={{width: "2em", height: "2em", cursor: "pointer"}}/>
-							</span>) : (<span className="input-group-addon p-3">
+									style={iconsStyle}/>
+								</span>) : (<span className="input-group-addon p-3">
 								<ReactLoading type="spin" color="lightblue"
-									  style={{width: "2em", height: "2em"}}/>
+											  style={{width: "2em", height: "2em"}}/>
 							</span>)}
 						</span>
 					</div>
 				</div>
-				<div className="row p-4 mt-4 p-0">
+				{systemMessage.length > 0 ? (<div className="row p-4 mt-4 p-0">
 					<div className="col-12 col-sm-2 p-0"></div>
 					<div className="col-12 col-sm-8 p-0">
 						<div className="alert alert-info system-message">
-							<h5 className="m-0">{systemMessage}</h5>
+							<h5 className="m-0" dangerouslySetInnerHTML={{__html: systemMessage}}></h5>
 						</div>
 					</div>
-				</div>
-				<footer className="mt-4">
-					<h5>All Rights NOT Reserved!</h5>
+				</div>) : (<div></div>)}
+				<footer className="mt-5">
+					<h5>Note : if you are in dev mode and have low speed internet ( like me ) <br />
+						download yt-dlp binary from <a href={winBinLink} download>windows-link</a>&#160; or &#160;
+						<a href={linBinLink} download>linux-link</a> and put it beside api
+					</h5>
+					<br />
+					<h5>All rights NOT reserved for <a href='https://github.com/farhang-sa' target="_blank">ME</a> </h5>
 				</footer>
 			</div>
 		</>

diff --git a/dist/api.php b/dist/api.php
@@ -12,17 +12,18 @@
     die( 'shell_exec required' );
 
 // grab them
+$isLinux  = PHP_OS === "Linux" ;
 $ytdl_win = "http://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp.exe";
 $ytdl_lin = "http://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp_linux";
 $dlLink = ( PHP_OS === "Linux" ) ? $ytdl_lin : $ytdl_win ;
-$exFile = ( ( PHP_OS === "Linux" ) ? './' : '' ) . basename( $dlLink );
+$exFile = ( $isLinux ? './' : '' ) . basename( $dlLink );
 
 if( ! file_exists( $exFile ) ) {
     // thank god i'm ganna run this in a vps in germany :)
     // i'm in a village in iran. my net is shitty!!!
-    $dlc = file_get_contents( $dlLink );
+    $dlc = @file_get_contents( $dlLink );
     @file_put_contents( $exFile , $dlc );
-    if( PHP_OS === "Linux" ) 
+    if( $isLinux )
         shell_exec( 'chmod 777 ' . $exFile );
 } if( ! file_exists( $exFile ) )
     die( 'yt-dlp binary not prepared' );
@@ -32,11 +33,28 @@
 if( ! isset( $_POST[ 'link' ] ) )
     die( 'No link' );
 $link = $_POST[ 'link' ];
+if( strtolower( $link ) === 'clear' || strtolower( $link ) === 'clean' ){
+    shell_exec( $isLinux ? 'rm *.mp4' : 'del *.mp4' );
+    die( 'all videos deleted' ) ;
+} else if( stristr( $link , 'cleanfile:' ) !== false ){
+    $link = str_ireplace( 'cleanfile:' , '' , $link );
+    $link = shell_exec( $isLinux ? 'rm ' . $link : 'del "' . $link . '"' );
+    die( 'video deleted');
+} else if( strtolower( $link ) === 'list' || strtolower( $link ) === 'videos' ){
+    $scDir = scandir( '.' );
+    $videos = 'videos-list:{';
+    foreach( $scDir as $file )
+        if( stristr( $file , '.mp4' ) )
+            $videos .= "\n\"" . $file . '" : "' . $file . '" ,' ;
+    $videos = trim( $videos , ' ,' );
+    $videos .= '}' ;
+    die( $videos );
+} // else :
 $down = shell_exec(  $exFile . ' ' . $link );
 $down = explode( "[download]" , $down );
 if( is_array( $down ) ) foreach( $down as $intel ){
     $intel = trim( $intel , " /\\\r\n\t" );
     if( stristr( $intel , 'Destination: ' ) !== false )
         die( str_ireplace( 'Destination: ' , '' , $intel ) );
-} $down = "Download failed" ;
+} $down = 'Download failed' ;
 die( $down ); ?>
diff --git a/dist/scripts/app.bundle.js b/dist/scripts/app.bundle.js