Native WebView "touch/tap" events?

Solar2D General Questions/Discussion
#1

Hello need help with native.webview…
im playing an embedded youtube using it on my app.
I heally need to know if there is a way for me to get a feedback if the user made a touch or tap inside the webview. Even better if i can know if the user clicked play on the embedded video inside it.
Is there a way to know if there was a touch event in the webview location? i tried to get a feedback from an object behind it but the native webview blocked everything.

Or if there is another way to put an embedded youtubevideo on the app, without leaving it, and if i can control it better, it would be even better.

Many thanks!
My best regards

youtube embedded
#2

Why dont you put object in front so it wouldnt be blocked by webview. Just dont “return true” in your touch event listener to let touch pass trought… I used very small all-transparent png image for something similar (I believe that objects with “isVisible = false” or “alpha = 0” property dont register touch events…).

#3

Native objects are always in front of everything. They dont respect the hierarchy. So there is no way to put another object in front of it.

#4

xRash has guided me to a solution on discord, so i ill share what i learned here.
My solution is for youtube embeded, and i can extract all events made on the player, using webview.

HTML CODE in LUA:

local videoID = "YOURyoutubeVideoID"

local path = system.pathForFile( "story.html", system.TemporaryDirectory )
-- io.open opens a file at path. returns nil if no file found
local fh, errStr = io.open( path, "w" )
    if fh then
    	print( "Created file" )
    	fh:write("<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">")
    	fh:write("<meta name=\"viewport\" content=\"width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\"/>\n")
    	fh:write("<style type=\"text/css\">\n html { -webkit-text-size-adjust: none; font-family: HelveticaNeue-Light, Helvetica, Droid-Sans, Arial, san-serif; font-size: 1.0em; } h1 {font-size:1.25em;} p {font-size:0.9em; } </style>\n")
    	fh:write("</head>\n<body>\n")
fh:write([[
	<div id="player"></div>
	
	<script>
	  // Load the IFrame Player API code asynchronously.
	  //Holds a reference to the YouTube player
	  var tag = document.createElement('script');
	  tag.src = "https://www.youtube.com/iframe_api";
	  var firstScriptTag = document.getElementsByTagName('script')[0];
	  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	  // Replace the 'ytplayer' element with an <iframe> and
	  // YouTube player after the API code downloads.
	  var player;
	  function newContent() {
		  document.open();
		  document.write("<h1>Out with the old, in with the new!</h1>");
		  document.close();
		}
	  function onYouTubeIframeAPIReady() {
		  //creates the player object --> ik_player_iframe
		  player = new YT.Player('player', {
			  height: '200',
			  width: '100%',
			  videoId: ']]..videoID..[[',
			  events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			  }
		  }); 
		  console.log('Video API is loaded');
	  }
	  function onPlayerReady(event) {
		console.log('Video is ready to play');
	  }
	  var done = false;
	  function onPlayerStateChange(event) {
		console.log('Video state changed');
		console.log(event.data);
		console.log(YT.PlayerState.PLAYING);
		//newContent();
		location.href='#' + event.data + '#';
	  }

	</script>]])

fh:write( "\n</body>\n</html>\n" )
io.close( fh )
else
      print( "Create file failed!" )
end

LUA WEBVIEW AND LISTENER

local YoutubeVideoState = nil

local function webListener( event )
	if event.url then
		print( "You are visiting: " .. event.url )
		function listenerWebViewChanges()
		
			YoutubeVideoState = string.match(event.url,"#(.+)#")
		end
	end
  
	if event.type then
		print( "The event.type is " .. event.type ) -- print the type of request
	end
  
	if event.errorCode then
		native.showAlert( "Error!", event.errorMessage, { "OK" } )
	end
end
local video = native.newWebView(0, 71, 600, 400)
video.x = W/2
video.y = H/2
video:request("story.html", system.TemporaryDirectory)
video:addEventListener( "urlRequest", webListener )

Runtime:addEventListener("enterFrame",listenerWebViewChanges)