How use RequestFullScreen for safari? - stoppropagation

i'm trying to use RequestFullScreen in my webApp, this work fine with my android phone, but i can't do it for safari on Iphone...
And i have an other question pls. I want disable longtouch vibration on any phone, this doesn't work when i use this e.stopPropagation!
thanks you!
i use webkitRequestFullScreen for it like this :
const full = document.querySelector('.fullscreen')
full.addEventListener("click", function(){
if (full.textContent==="Plein Ecran"){
full.textContent= "Quitter Plein Ecran"
if(mydocument.requestFullscreen){
mydocument.requestFullscreen();
}
else if (mydocument.msRequestFullScreen){`
mydocument.msRequestFullScreen();`
}
else if (mydocument.mozRequestFullScreen){`
mydocument.mozRequestFullScreen();`
}
else if(mydocument.webkitRequestFullScreen){`
mydocument.webkitRequestFullScreen();`
}`
}
else
{
if(document.exitFullscreen){
document.exitFullscreen();
}
else if (document.msexitFullscreen){
document.msexitFullscreen();
}
else if (document.mozexitFullscreen){
document.exitFullscreen();
}
else if (document.webkitexitFullscreen){
document.webkitexitFullscreen();
}
full.textContent="Plein Ecran"
}
})`
and i tried this for the vibration.
`document.getElementById('body').addEventListener("touchstart", (e)=>{ e.stopPropagation(); }, { passive: true });`

Related

Get current card name with onItemsSelectedTrigger

I'm currently working on a DRIVE workspace Add-on.
I would like to know How can I get the currently displayed card when onItemsSelectedTrigger is triggered.
The card that I want to return depends on the previous card.
Manifest file:
"drive": {
"homepageTrigger": {
"runFunction": "onHomePage",
"enabled": true
},
"onItemsSelectedTrigger": {
"runFunction": "onMyDriveItemSelected"
}
}
Desired function prototype:
function onMyDriveItemSelected(e) {
var s = '';
if (e.drive.selectedItems.length > 0) {
e.drive.selectedItems.forEach(function(itm,i) {
if (i > 0) { s += '<br><br>'; }
s += Utilities.formatString(' %s<br>%s<br> ', itm.id,itm.mimeType);
});
}
// HOW to Get the current card name
// var current_card_name =
if (current_card_name === "homepage") {
return createRandomCard1(s);
}
else if (current_card_name === "infopage") {
return createRandomCard2(s);
}
else{
return cardWithNotification();
}
}
Thanks in advance for your feedback.

React Native Map (Airbnb) + Markers animation

I want to animate the React-native-maps {Google} markers.
I tried with the animated module, but the markers do not allow complex styles.
Is there any function to modify the coordinates of the marker and give it animation?, like a:
marker.setAnimation(google.maps.Animation.BOUNCE);
I have tried with:
<MapView.Marker.Animated>
But I can not create the effect. Is there a function that edits the coordinates as an animation drop?
React native map marker is by default "not animated", it can not accept gif images, sprites, animation api and so on . . However, I was able to animate it the tough way through image transition. Here is my example:
constructor(props, context) {
super(props, context);
this.state = {
startTransition: 1,
endTransition: 4,
};
}
componentDidMount() {
this.animate();
}
animate() {
const {startTransition, endTransition} = this.state;
if(startTransition < endTransition){
let currentTransition = startTransition + 1;
this.setState({startTransition: currentTransition});
} else {
this.setState({startTransition: 1});
}
let x = setTimeout(()=>{
this.animate()
}, 500);
}
renderImg(imgTrans) {
if(imgTrans === 1) {
return require('./walk1.png');
}
if(imgTrans === 2) {
return require('./walk2.png');
}
if(imgTrans === 3) {
return require('./walk3.png');
}
if(imgTrans === 4) {
return require('./walk4.png');
}
}
render() {
const {startTransition} = this.state;
return (
<MapView.Marker
coordinate={tapCoords}
image={this.renderImg(startTransition)}
>
)
}
This is how I did the animation for now.

html5 camera is blurry - getuserMedia autofocus not working

Did somebody try HTML5 video for capturing image from camera on mobile and have problem with blurry image? I try it on Samsung phone where image was sharp, and on LG G4 where image was blurry (android browser and Chrome on both mobile phones).
Has somebody this experience or can explain solution? Can some phones has these problems?
There is snippet of code which I use:
function startCamera(newSource) {
if (newSource) {
var constraints = {
audio: false,
video: {
optional: [
{ sourceId: newSource },
]
}
};
addVideoAndCanvas();
navigator.getUserMedia(constraints, onMediaSuccess, onMediaError);
}
}
function addVideoAndCanvas() {
self.video = $('<video muted autoplay>');
self.canvas = $('<canvas id="qr-canvas" class="hide">');
$('.modal-body .video-container', self.root).append(self.video).append(self.canvas);
}
function onMediaSuccess(stream) {
self.stream = stream;
self.video[0].src = (window.URL && window.URL.createObjectURL(stream)) || stream;
self.video[0].onloadeddata = function () {
self.canvas[0].height = self.video[0].videoHeight;
self.canvas[0].width = self.video[0].videoWidth;
scan();
}
}
function onMediaError(error) {
}
function scan() {
if (self.stream) {
try {
var ctx = self.canvas[0].getContext('2d');
ctx.drawImage(self.video[0], 0, 0);
} catch (e) {
setTimeout(scan, 20);
}
} else {
setTimeout(scan, 20);
}
}
Probably waiting on folowing spec: https://w3c.github.io/mediacapture-image/index.html#FocusMode

Determine DRM system supported by browser

I've trying to find out how to determine which DRM system browser is using. And in fact, only chrome say it is use 'com.widevine.alpha' where IE & Safari (Win) throw error on 'requestMediaKeySystemAccess', and firefox do not even try to say it use 'com.adobe.acccess' =]
function isKeySystemSupported(keySystem) {
var dfd = Q.defer();
console.log('check: ', keySystem);
navigator.requestMediaKeySystemAccess(keySystem, [{contentType: 'video/webm; codecs="vp9"'}]).then(function() {
dfd.resolve(true);
}, function() { dfd.resolve(false); } );
return dfd.promise;
}
is there any solution, like Modernizr or similar to get which keySystem I should use?
There are several websites offering such a check, like dash-player.com/browser-capabilities/ After having a closer look at how it is done, one can use something similar to:
// EME Check
var keySystems = {
widevine: ['com.widevine.alpha'],
playready: ['com.microsoft.playready', 'com.youtube.playready'],
clearkey: ['webkit-org.w3.clearkey', 'org.w3.clearkey'],
primetime: ['com.adobe.primetime', 'com.adobe.access'],
fairplay: ['com.apple.fairplay']
};
var keySystemsCount = (function () {
var count = 0;
for (keysys in keySystems) {
if (keySystems.hasOwnProperty(keysys)) {
count += keySystems[keysys].length;
}
}
return count;
})();
var testVideoElement = document.createElement('video');
var supportedSystems = [];
var unsupportedSystems = [];
var supportsEncryptedMediaExtension = function () {
if (!testVideoElement.mediaKeys) {
if (window.navigator.requestMediaKeySystemAccess) {
if (typeof window.navigator.requestMediaKeySystemAccess === 'function') {
console.log('found default EME');
hasEME = true;
var isKeySystemSupported = function (keySystem) {
var config = [{initDataTypes: ['cenc']}];
if (window.navigator.requestMediaKeySystemAccess) {
window.navigator.requestMediaKeySystemAccess(keySystem, config).then(function (keySystemAccess) {
supportedSystems.push(keySystem);
}).catch(function () {
unsupportedSystems.push(keySystem);
});
}
};
var keysys, dummy, i;
for (keysys in keySystems) {
if (keySystems.hasOwnProperty(keysys)) {
for (dummy in keySystems[keysys]) {
isKeySystemSupported(keySystems[keysys][dummy]);
}
}
}
}
} else if (window.MSMediaKeys) {
if (typeof window.MSMediaKeys === 'function') {
console.log('found MS-EME');
hasEME = true;
var keysys, dummy, i;
for (keysys in keySystems) {
if (keySystems.hasOwnProperty(keysys)) {
for (dummy in keySystems[keysys]) {
if (MSMediaKeys.isTypeSupported(keySystems[keysys][dummy])) {
supportedSystems.push(keySystems[keysys][dummy]);
} else {
unsupportedSystems.push(keySystems[keysys][dummy]);
}
}
}
}
}
} else if (testVideoElement.webkitGenerateKeyRequest) {
if (typeof testVideoElement.webkitGenerateKeyRequest === 'function') {
console.log('found WebKit EME');
hasEME = true;
var keysys, dummy, i;
for (keysys in keySystems) {
if (keySystems.hasOwnProperty(keysys)) {
for (dummy in keySystems[keysys]) {
if (testVideoElement.canPlayType('video/mp4', keySystems[keysys][dummy])) {
supportedSystems.push(keySystems[keysys][dummy]);
} else {
unsupportedSystems.push(keySystems[keysys][dummy]);
}
}
}
}
}
} else {
console.log('no supported EME implementation found');
hasEME = false;
}
}
}
Simply run supportsEncryptedMediaExtension() and supportedSystems will be filled with the desired information.
Note that the config object should be extended to include the specific codec claims respective to your particular media. It isn't enough to just detect the key system as codec support sometimes depends on Guest OS dependencies.
var config = [{
"initDataTypes": ["cenc"],
"audioCapabilities": [{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\""
}],
"videoCapabilities": [{
"contentType": "video/mp4;codecs=\"avc1.42E01E\""
}]
}];
In addition to the information listed here, I want to mention that in Chrome, whether you are using https or not will affect the availability of navigator.requestMediaKeySystemAccess function.
In your development environment that probably is running on http, navigator.requestMediaKeySystemAccess will return undefined for Chrome whereas the same code will return a function in Firefox.
In your prod environment that has https, navigator.requestMediaKeySystemAccess will return a function both in Chrome and Firefox.
I had to give videoCapabilities flags to make this work.
function testEME() {
// https://shaka-player-demo.appspot.com/support.html
var keySysConfig = [{
"initDataTypes": ["cenc"]
//,"persistentState": "required" // don't use or MacSafari "not supported"
//,"persistentState": "required", "distinctiveIdentifier": "required"
//,"audioCapabilities": [{
// "contentType": "audio/mp4;codecs=\"mp4a.40.2\""
//}]
,"videoCapabilities": [{
"contentType": "video/mp4;codecs=\"avc1.4D401E\"" // avc1.42E01E = ConstrainedLevel3, 4D401E=MainLevel3
//,"robustness": "3000"
}]
}];
var keySystems = {
playready: ['com.microsoft.playready.recommendation', 'com.microsoft.playready'
, 'com.microsoft.playready.hardware', 'com.youtube.playready'],
clearkey: ['webkit-org.w3.clearkey', 'org.w3.clearkey'],
widevine: ['com.widevine.alpha'],
primetime: ['com.adobe.primetime', 'com.adobe.access'],
fairplay: ['com.apple.fairplay','com.apple.fps'
, 'com.apple.fps.1_0', 'com.apple.fps.2_0', 'com.apple.fps.3_0']
};
for(keyArr in keySystems) {
for(forItemIdx in keySystems[keyArr]) {
let keySys = keySystems[keyArr][forItemIdx];
try {
navigator.requestMediaKeySystemAccess(keySys, keySysConfig).
then(function(mediaKeySystemAccess) {
//let mkConfig = mediaKeySystemAccess.getConfiguration();
//let sFlags = "persistentState="+mkConfig.persistentState
// + ", distinctiveIdentifier="+mkConfig.distinctiveIdentifier;
console.log(keySys + " supported"); //+" ("+sFlags+")");
}).catch(function(ex) {
console.log(keySys+" not supported (" + ex.name+" "+ex.message+")." );
});
} catch (ex) {
console.log(keySys+" not supported (" + ex.name+" "+ex.message+").." );
}
}
}
}

How to change the mode dynamically in codemirror on encounter of a particular expression?

In the textarea whenever '<' is encountered the mode should be html and for '<#' or '<#' or '$', the mode should be ftl. In the code that I have written
function determineCodeMirrorType(cm) {
if (cm.getOption('mode') == 'text/ftl') {
checkAndSwitchToHTML(cm, cm.getValue());
} else if (cm.getOption('mode') == 'text/html') {
checkAndSwitchToFTL(cm, cm.getValue());
}
}
function checkAndSwitchToHTML(cm, val) {
if (/^\s*</.test(val)) {
cm.setOption("mode", "text/html");
}
}
function checkAndSwitchToFTL(cm, val) {
if (/[<#|<#|$]/.test(val)) {
cm.setOption("mode", "text/ftl");
}
}
function buildCMInstance(mode, value) {
var cm = CodeMirror.fromTextArea(document.getElementById("code"), {
mode:mode,
value:value,
lineNumbers:true,
onChange:function(cmInstance){
determineCodeMirrorType(cmInstance); //The call to this function is not made.
})
});
return cm;
}
$(document).ready(function(){
var cm = buildCMInstance("text/ftl")
});
I want to know is there any option that can be initiated which allows the code to change dynamically by making a call to the function "determineCodeMirrorType".
onChange does not exist in recent CodeMirror versions. You have to register the event handler by calling cm.on("change", function(cm, change) { .... }).