Subject: »[ok] HTML 2D match engine don't work on safari Mac

Match-viewer show the line-up, but doesn't launch the match.

safari Version 13.1.3 (15609.4.1) Mac Os — "Plus" sokker user.

Same problem

up for the devs :-p

Yes, I coundn't watch a single match this year other than using the Flash viewer, yet in my case using Windows and Firefox (yet other users in national forum have reported the same using Chrome too)

HTML 2D shows the line-ups... and it stays so, forever.
(edited)

Remove cache/cookies... and normally the problem should be fixed...

remove cache and cookies dont work for me.

Remove cache/cookies... and normally the problem should be fixed...

no

That's the very first thing I did.

As today, I can't see the matches. Once The 'Flash 2D' option dissapear, I won't be able to see the matches at all.

I hoped the new visor would focus in maximizing simplicity, compatibility and would aim to a huge spectre of users, not imposing the use of some specicical browser, update, or technology.

Since, with my current browser, version and specifications:

- I can view the Flash matches (and nearly everything in the web, from the latest youtube videos to new online games).

- I can not view the new HTML matches.

-> something not good is happening, as it seems.


Is it mandatory to have updated to a specific version the browser, or to have installed some specific pluging, or something? If so, which ones?

do you use the last version of browser?

No. In theory you dont need any plugins or any specific browser and version. The developers didn't mention any particular specifications.

The problem with HTML is that in practice, the more animations and interactions we have, the more compatibility problems occurs.

What I know is that it does not work on Safari Mac or IOS, at least for the moment. In the meantime, we can install and test another browser.

My last match

I can see only goals, players and ball. Where is the field and stadium and so on? 8-}

hahah

for me it is same...just backround picture and players, ball and goals xD

with flash it is ok though...

Me, I can see all matches, except this one:

https://sokker.org/comment/matchID/38006188

When I click on 2D, picture changes to green field as normal, but then it stops at "loading 99%"
Flash-animation works fine.

Manager of away team asked me why he could not see his match... and he reported the same: He can watch all matches, except the linked match above.
We tried with Firefox and Opera, on W7 and on W10, same result in any combination, "loading 99%"...

(Any DEV reading?)

not a DEV, but can You show messages from FF console window if there are any (ctrl+shift+j) after clicking on that match (clear the console window before clicking)

Warnings:

00:38:18.879 This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. 38006188
00:38:21.034
Some cookies are misusing the recommended “SameSite“ attribute 28
00:38:28.728 This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. matchview
00:38:38.658 Cannot play media. No decoders for requested formats: audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg, audio/mpeg matchview

-----------------------------------------

Errors
00:38:18.874 Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. background.js:63
webNavigationListener moz-extension://dc53efbd-a7e7-4ca9-bf88-368fdae5d51c/src/background.js:63
00:38:28.750 Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. background.js:63
webNavigationListener moz-extension://dc53efbd-a7e7-4ca9-bf88-368fdae5d51c/src/background.js:63
00:38:29.003 SyntaxError: expected expression, got ',' matchview:114:24
00:38:48.812 Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. background.js:63
webNavigationListener moz-extension://dc53efbd-a7e7-4ca9-bf88-368fdae5d51c/src/background.js:63
00:38:49.526 TypeError: result.range is undefined ViewSourcePageChild.jsm:373:11
findLocation resource://gre/actors/ViewSourcePageChild.jsm:373
goToLine resource://gre/actors/ViewSourcePageChild.jsm:228
onPageShow resource://gre/actors/ViewSourcePageChild.jsm:181
handleEvent resource://gre/actors/ViewSourcePageChild.jsm:100


-----------------------------------------

Debug

00:38:18.980 allowing https://connect.facebook.net/en_US/all.js#xfbml=1 shims.js:17:19
00:38:20.069 allowing https://ssl.google-analytics.com/ga.js shims.js:17:19
00:38:20.251 allowing https://connect.facebook.net/en_US/sdk.js shims.js:17:19
00:38:20.518 allowing https://connect.facebook.net/en_US/all.js?hash=1673c8a067befdcb62b34da503a96d3c shims.js:17:19


-----------------------------------------

and when I clicked on "Warnings" on last linked "matchview", I got this:

view-source:https://sokker.org/matchview?id=38006188

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MatchViewer2D</title>
<link href="///files.sokker.org/static/css/skin/default/default.css" rel="stylesheet">
<link href="///files.sokker.org/static/css/background/field/field.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
#matchViewer2D {
margin: auto;
position: relative;
}

canvas {
margin: auto;
box-shadow: 0 0 1em #679a67;
}

#match-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

#match-overlay-squads {
background-color: rgb(127, 168, 2);
width: 100%;
height: 100%;
margin: auto;
font-size: 16px;
color: white;
font-family: "Roboto", sans-serif;
box-shadow: 0 0 1em #679a67;
}

#match-overlay-squads h3 {
font-size: 32px;
font-weight: bolder;
color: white;
}

.list-unstyled li {
line-height: 1.6em;
}

[v-cloak] {
display: none;
}
.fullscreen {
position:fixed;
margin: auto;
width: 100%;
top: 0;
left: 0;
}
.fixed-control {
position: fixed;
z-index: 100;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<header>
<div id="indexHeadContainer" class="container">
<img src="//files.sokker.org/static/pic/logo-shade.png" alt="Sokker logo">
<ul class="list-inline fixed-control">
<li><a href="/matchview?id=38006188&view=flash" class="btn btn-sm btn-default">Flash 2D</a></li>
<li><a href="/team" class="btn btn-sm btn-default">X</a></li>
</ul>
</div>
</header>
<div class="container">
<div id="matchViewer2D">
<canvas class="canvas img-responsive static" id="canvas" data-url="/match_video" data-assets-path="/static/viewer-2d"></canvas>
<p class="text-center text-muted margin-top-l">
<span class="label">⇦ normal speed</span>
<span class="label">⇩ pause</span>
<span class="label">⇨ faster</span>
<a class="label" href="javascript:startFullscreen()"><i class="fa fa-expand"></i> fullscreen</a>
</p>
<div id="match-overlay" v-cloak>
<div id="match-overlay-squads" v-if="showOverlay">
<div class="row">
<div class="col-xs-6 text-right"><h3>{{ squads.teamA.name }}</h3></div>
<div class="col-xs-6"><h3>{{ squads.teamB.name }}</h3></div>
<div class="col-xs-6 text-right">
<ul class="list-unstyled">
<li v-for="player in squads.teamA.players">{{ player.name }} {{ player.number }}</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
<li v-for="player in squads.teamB.players">{{ player.number }} {{ player.name }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://files.sokker.org/viewer-2d/bundle.js?v=20210120"></script>
<script src="https://unpkg.com/vue@3.0.4/dist/vue.global.prod.js"></script>
<script>
const Overlay = {
data() {
return {
squads: ,
showOverlay: false,
};
},

mounted() {
this.showOverlay = true;
document.addEventListener('matchLoaded', (e) => {
e.detail.start();
this.showOverlay = false;
});

document.addEventListener('matchEnded', (e) => {
console.log(e);
})
},
}

Vue.createApp(Overlay).mount('#match-overlay');

function startFullscreen() {
const canvas = document.getElementById('canvas');
canvas.className = canvas.className.replace('static', 'fullscreen');
}
function stopFullscreen() {
const canvas = document.getElementById('canvas');
canvas.className = canvas.className.replace('fullscreen', 'static');
}
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) {
e.preventDefault();
stopFullscreen();
return false;
}
}, true);

</script>
</body>
</html>

btw, can you watch the match I linked in html5?