COPY SOURCE CODE FOR ytvideo-search.html

After reading this post please continue reading the following one:
http://phanhung20.blogspot.com/2021/03/copy-source-code-for-ytvideo-playhtml.html

To see how this file works please go to this post:

http://phanhung20.blogspot.com/2021/02/javascript-searching-for-youtube-videos.html

Tap button COPY.
Use your ipad: open Koder code editor app and create new file ytvideo-search.html.
Tap this file name to open it and paste the code to it.
Find the line: mykey = 'PASTE-YOUR-API-KEY-HERE' and paste your key there.

Please complete following steps:

Obtain Youtube API key for yourself.
Install Koder code editor app to your ipad.
Create two files
1. ytvideo-search.html (5 KB, without help text)
2. ytvideo-play.html (25 KB)
To do that, open my blog phanhung20.blogspot.com and copy source code for those files.
Open Koder app, tap the button + in the left bottom corner to create a new file, give it the name ytvideo-search.html

NOTE: You don't see the button SAVE in Koder app, this app automatically saves anything you type!
If you make any mistake while typing, you need to immediately type undo key on the ipad keyboard.
In Koder for ipad you can:
- Select a line, sentence, or text block: Touch and hold the first word in the block, then drag the handle (small circle) to the last word. To select more precisely, drag slowly.
- Select all text of a file (html orjs file) by taping on "paper" (do not type on words). Sometimes you have to tap several times until you see the menu with the option Select All.
- In Koder you also can rename or delete file. For more details see:
https://www.koderapp.com/manual/file-man.html

Tap on the name of file to open the file ytvideo-search and paste the code there then paste your API key
Tap on Run button (image of an eye) to open ytvideo-search.html in the Koder's inner browser.
For example: search for Paul Mauriat; tap button SEARCH; wait;
In the results you will see:

Under the button COPY you see a text area.
Tap button COPY to select all this textarea and copy this selection to clipboard.
Tap the button QUIT (x) in the right top corner to quit the running file ytvideo-search.html. Tap the button + to create new file with the name objpage-paul-mauriat.js
Open this new empty file and paste there the contains from clipboard

NOTE: do not open file objpage- ...js in Koder app because it is of very big size (from 0.4 MB to 1 MB); Koder app will work slowly or even crashs.
However by using the file ytvideo-play.html you still can easily view the contains of those files.
In Koder open the file objppageAll.js
Add the name of the file just created by yourself
objpageAll = [
'objpage-franck-pourcel.js',
'objpage-paul-mauriat.js'
];
Now you can open the file ytvideo-play.html to watch all videos that you have found by using the file ytvideo-search.html.

READING SOURCE CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial;
            font-size: 12pt;
            margin: 0px;
            padding: 0px;
        }
        button {
            font-size: 16pt
        }
        body,
        textarea {
            font-size: 12pt;
        }
        #progress1 {
            color: red;
            font-size: 16;
            font-weight: bold;
        }
        a {
            color: blue;
            text-decoration: none;
        }
        .codeSp{color:#CC6600}
    </style>
</head>
<body>

    <div align="center">
	   <button id="helpBut">HELP (?)</button>
	  <br>
	   <div id="helpDiv" style="display:none;width:590px;height:600px;overflow:auto;background-color:#ffffe0;text-align:left;padding:10px;line-height:150%; font-size:14pt; border:1px solid gray; margin-top:10px">
	<p style="color:red">After reading you can tap button 
	<button>HELP (?)</button>
	once again to hide this help contain.</p>
      Please complete following steps:
       <ol>
       <li>Obtain Youtube API key for yourself.</li>
       <li>Install Koder code editor app to your ipad.<br>
        <img width="60%" src="IMG_4568.jpg" style="border:1px solid gray">
	  </li>
      
	  <li>Create two files
			<ol>
			<li>ytvideo-search.html (5 KB, without help text)</li>
			<li>ytvideo-play.html (25 KB)</li>
			</ol>
			To do that, open my blog <span style="color:#1C86EE">phanhung20.blogspot.com</span> and copy source code for those files.
	  </li>
	  <!-- In the lower left corner -->
	  <li>Open Koder app, tap the button + in the left bottom corner to create a new file, give it the name ytvideo-search.html</li>
	  <span style="color:green">NOTE: You don't see the button SAVE in Koder app, this app automatically saves anything you type!<br>
	  If you make any mistake while typing, you need to immediately type undo key on the ipad keyboard.<br>
	  In Koder for ipad you can:<br>
	  - Select a line, sentence, or text block: Touch and hold the first word in the block, then drag the handle (small circle) to the last word. To select more precisely, drag slowly.<br>
	  - Select all text of a file (html or js file) by taping on "paper" (do not type on words). Sometimes you have to tap several times until you see the menu with the option Select All.<br>
	  - In Koder you also can rename or delete file. For more details see:<br>
	  https://www.koderapp.com/manual/file-man.html<br>
	  </span>
	   <li>Tap on the name of file to open the file ytvideo-search. Find the line:<br>
	   mykey = 'PASTE-YOUR-API-KEY';<br>
	and <span style="color:red">paste your API key there</span></li>
	  <li>Tap on Run button (image of an eye) to open ytvideo-search.html in the Koder's inner browser.<br>
	       For example: search for Paul Mauriat; tap button SEARCH; wait;<br>
	 In the results you will see:<br>
	  <img width="100%" src="IMG_4566.jpg" style="border:1px solid gray">
	  <br>
	       Under the button COPY you see a text area.<br>
	       Tap button COPY to select all this textarea and copy this selection to clipboard.
	  </li>
	  <li>Tap the button QUIT (x) in the right top corner to quit the running file ytvideo-search.html. Tap the button + to create new file with the name objpage-paul-mauriat.js</li>
	  <li>Open this new empty file and paste there the contains from clipboard<br>
	  <img width="100%" src="IMG_4567.jpg" style="border:1px solid gray">
	  <br>
	   <span style="color:green"><i>
	   NOTE: do not open file objpage- ...js in Koder app because it is of very big size (from 0.4 MB to 1 MB); Koder app will work slowly or even crashs.<br>
	   However by using the file ytvideo-play.html you still can easily view the contains of those files.
	  </i></span>
	  </li>
	  <li>In Koder open the file objppageAll.js<br>
	  Add the name of the file just created by yourself<br>
	  <span class="codeSp">
	  objpageAll = [<br>
	  'objpage-franck-pourcel.js',<br>
	  'objpage-paul-mauriat.js'<br>
	   ];
	  </span>
	  <li>Now you can open the file ytvideo-play.html to watch all videos that you have found by using the file ytvideo-search.html.
	  </li>
       </ol>
	  </div>
<br>
        <input type="text" value="Franck Pourcel" id="searchtext1" size="42" style="font-size:14pt">
        <button onclick="begin1()">SEARCH</button>
        <br>
        <span id="progress1">0</span>
        <br><br>
               <div id="tip" style ="width:590px;height:120px; overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%; font-size:12pt; border:1px solid gray">
      <b>Travel:</b> 
      <a href="#" onclick="readyTerm('Gate1Travel'); return false">Gate1Travel</a>, 
      <a href="#" onclick="readyTerm('Expoza Travel'); return false">Expoza Travel</a>, 
      <!----------------------------------------------------------------------->
      <br>
      <b>English:</b> 
      <a href="#" onclick="readyTerm('Mark Kulek'); return false">Mark Kulek</a>, 
      <!----------------------------------------------------------------------->
      <br>
      <b>Music:</b> 
      <a href="#" onclick="readyTerm('101 Strings'); return false">101 Strings</a>, 
      <a href="#" onclick="readyTerm('Abba'); return false">Abba</a>, 
      <a href="#" onclick="readyTerm('Bee Gees'); return false">Bee Gees</a>, 
      <a href="#" onclick="readyTerm('Bert Kaempfert'); return false">Bert Kaempfert</a>, 
      <a href="#" onclick="readyTerm('Billy Vaughn'); return false">Billy Vaughn</a>, 
      <a href="#" onclick="readyTerm('Caravelli'); return false">Caravelli</a>, 
      <a href="#" onclick="readyTerm('Carpenters'); return false">Carpenters</a>, 
      <a href="#" onclick="readyTerm('Cecil Gonzalez instrumental'); return false">
      Cecil Gonzalez instrumental</a>, 
      <a href="#" onclick="readyTerm('Enrique Chia'); return false">Enrique Chia</a>, 
      <a href="#" onclick="readyTerm('Francisco Garcia guitarist'); return false">
      Francisco Garcia guitarist</a>, 
      <a href="#" onclick="readyTerm('Franck Pourcel'); return false">Franck Pourcel</a>, 
      <a href="#" onclick="readyTerm('Frank Chacksfield'); return false">Frank Chacksfield</a>, 
      <a href="#" onclick="readyTerm('Guitar Mood'); return false">Guitar Mood</a>, 
      <a href="#" onclick="readyTerm('Helmut Zacharias'); return false">Helmut Zacharias</a>, 
      <a href="#" onclick="readyTerm('Hugo Montenegro'); return false">Hugo Montenegro</a>, 
      <a href="#" onclick="readyTerm('Hugo Strasser'); return false">Hugo Strasser</a>, 
      <a href="#" onclick="readyTerm('James Last'); return false">James Last</a>, 
      <a href="#" onclick="readyTerm('Klaus Wunderlich'); return false">Klaus Wunderlich</a>, 
      <a href="#" onclick="readyTerm('Manuel & The Music of the Mountains'); return false">
      Manuel & The Music of the Mountains</a>, 
      <a href="#" onclick="readyTerm('Maximo Spodek'); return false">Maximo Spodek</a>, 
      <a href="#" onclick="readyTerm('Nicolas de Angelis'); return false">Nicolas de Angelis</a>, 
      <a href="#" onclick="readyTerm('Paul Mauriat'); return false">Paul Mauriat</a>, 
      <a href="#" onclick="readyTerm('Ray Anthony'); return false">Ray Anthony</a>, 
      <a href="#" onclick="readyTerm('Ray Conniff'); return false">Ray Conniff</a>, 
      <a href="#" onclick="readyTerm('Richard Clayderman'); return false">Richard Clayderman</a>, 
      <a href="#" onclick="readyTerm('Ricky King'); return false">Ricky King</a>, 
      <a href="#" onclick="readyTerm('Romantic Guitar'); return false">Romantic Guitar</a>, 
      <a href="#" onclick="readyTerm('The Shadows'); return …false">The Shadows</a>, 
     <a href="#" onclick="readyTerm('Herald Wingkler'); return false">Herald Winkler</a>, 

      </div>
        <br>
        Do not change the following contain from Youtube<br>
        The text inside /* and */ is comment (for helping) written by me.<br><br>
<span style="font-weight:bold">
Remember this file name:&nbsp;<span id="remember" style="color:red"></span>
</span><br>
        <button onclick="copy('area1')">COPY</button>
        <br><br>
        <textarea id="area1" style="width:580px; height:300px">
</textarea>
        <br>
This it the last json page. It does not have an item.
<br>
          <textarea id="area10" style="width:580px; height:250px">
</textarea>
        <br><br>
    </div>

    <script>
$(document).ready(function(){
$('#helpBut').click(function() {
  $('#helpDiv').toggle('slow');
});
});

searchText = '';

        function begin1() {
            nb1 = 0;
            $('#progress1').html(0);
            $('#area1').val('');
            interval1 = setInterval(calling1, 1500);
        }

        nb1 = 0

        function calling1() {
            nb1++
            $('#progress1').html('Wait! ' + nb1);
            search1(PageToken)
        }

        mykey = 'PASTE-YOUR-API-KEY-HERE';

        var PageToken;

        function search1(PageToken) {
            searchText = $('#searchtext1').val();
            $.get(
                "https://www.googleapis.com/youtube/v3/search", {
                    part: 'snippet',
                    q: searchText,
                    maxResults: 50,
                    pageToken: PageToken,
                    key: mykey
                },
                myCallback1
            ).fail(function() {
                alert('Failure! Quota exceeded.' +
                    'Wait until Midnight Pacific Standard Time');
                clearInterval(interval1);
            });
        }

        pageArr1 = [];
        
        function myCallback1(response) {
            jSt = JSON.stringify(response, null, 2);
            pageArr1.push(jSt);
            PageToken = response.nextPageToken;
            len = response.items.length;
            if ((len == 0)){
			// alert('DONE! We got to the last json page.');
			st = JSON.stringify(response, null, 2);
		 	$('#area10').val(st);
                clearInterval(interval1);
                $('#progress1').html('DONE! We got to the last json page.');
                objpageSt = '';
                alen = pageArr1.length;
                for (z = 0; z < alen; z++) {
                    objpageSt += pageArr1[z];
                    if (z < (alen - 1)) {
                        objpageSt += ', \n';
                    }
                }
                searchText1 = searchText.toLowerCase();
                arr = searchText1.split(' ');
                if(arr.length >= 2){
                		fname = 'objpage-' + arr[0] + '-' + arr[1] + '.js';
                }else{
					fname = 'objpage-' + searchText1 + '.js';
			 }
			 
			 $('#remember').html(fname);
			 helpSt = '/* 1- Tap the button COPY to copy this contain to clipboard.\n' +
			'2- Tap the button x in top right corner to quit this working file\n' +
			'3- Tap the button + in the bottom left to' +
			' create a new javascript file with the name:\n' +
			fname  + '\n' +
			'4- Tap the name of this new file to open it ' +
			'and paste there the contain from clipboard.\n' +
			'5- Open the file objpage-all.js and add \'' + fname + '\' to the array objselect:\n' +
			'objselect = [\n' + '... ,\n... ,\n' + fname + '\n];\n\n' +
                '6- Open the file ytvideo-play.html and enjoy playing videos.' + 
			 ' */\n\n';
			
                objpageSt = helpSt + 'objpage = {"page":[\n' + 
			 objpageSt + ']}'
                $('#area1').val(objpageSt);
            }
        }

        function readyTerm(term) {
            $("#searchtext1").val(term);
        }

        //////////// COPY THE CONTENT OF AN AREA //////////////
        var copy = function(elementId) {
            var input = document.getElementById(elementId);
            var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
            if (isiOSDevice) {
                var editable = input.contentEditable;
                var readOnly = input.readOnly;
                input.contentEditable = true;
                input.readOnly = false;
                var range = document.createRange();
                range.selectNodeContents(input);
                var selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                input.setSelectionRange(0, 999999);
                input.contentEditable = editable;
                input.readOnly = readOnly;
            } else {
                input.select();
            }
            document.execCommand('copy');
        }
    </script>
</body>
</html>

JAVASSCRIPT ON IPAD (to see the list click ← then click ≡ and ⌄)