mojs / mojs-player Goto Github PK

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #4 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #5 via ZenHub

Add the onToggleHide callback that will be called with a boolean indicating the visibility state of the player. This callback should be called after user taps on the button:

Player's constructor with the callback:

new MojsPlayer({
  add: timeline,
  onToggleShow(isHidden) {
    if (isHidden) { // do something when player is invisiblie }
    else { // do something when player is visiblie }
  }
});

Please let me know is you are want to help and have any question.

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

When I import mojs-player by parcel-bunder, I got the following error.

⚠️  Could not load existing sourcemap of "../../node_modules/@mojs/player/build/mojs-player.js".
🚨  /project-path/node_modules/@mojs/player/build/mojs-player.js:6822:84: Unterminated regular expression (6822:84)
  6820 |                if(sourceMap) {
  6821 |                        // http://stackoverflow.com/a/26603875
> 6822 |                        css += "\n + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
       |                                                                                                        ^
  6823 |                }
  6824 | 
  6825 |                var blob = new Blob([css], { type: "text/css" });
⚠️  Could not load existing sourcemap of "../../node_modules/@mojs/player/build/mojs-player.js".

If I delete if (sourceMap) {...}, I can import it normally.

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

Would be great if the link https://github.com/legomushroom/mojs-player in the bottom right of the player opens in a new tab (target="_blank").

Error on CodePen when clicking on the mojs logo:
Refused to display 'https://github.com/legomushroom/mojs-player' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

Currently mojs-player creates an element in the top of body that looks like this:

<div id="icons">
  <svg ...>
    <path id="play-icon-shape" d="...">
    ...
  </svg>
</div>

This is for using svg elements as icons in the player controller.

Problem
When using mulitple instances of mojs-player on the same page, we get dublicates of these elements.

Solution
Should be easy to check if the element already excist in the dom before creating it again.

it looks weird

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #4 via ZenHub

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

Hey,

Let me start by saying this library and workflow tools are unlike anything I've ever seen before in terms of what's available for web animation libraries and you guys should be super proud of what you've accomplished! Props and thanks, makes me life as a dev much easier.

I'm using this tool in a React project (not sure if this has anything to do with React or not, but it seemed worth mentioning), as well as taking advantage of the mojs player and mojs curve editor. The curve editor works like magic, no problems there.

The player's start, stop and looping functionality are work as they should, but the progress indicator doesn't move when the animation is playing. It does however let me change the point in time in the animation if I click on it.

I attached a screenshot of what I'm seeing, and you can see the curve editor progress is accurately represented, but the player progress indicator isn't.

Any thoughts on what's going on here?

Here are some code snippets of my implementation:

import {Component} from 'react'
import ReactDOM from 'react-dom'
import mojs from 'mo-js';
import MojsPlayer from 'mojs-player';
import MojsCurveEditor from 'mojs-curve-editor';


class Animation extends Component {

	componentDidMount() {
		this.stage = ReactDOM.findDOMNode(this.refs.stage);
		this.square = ReactDOM.findDOMNode(this.refs.square);
		this.shadow = ReactDOM.findDOMNode(this.refs.shadow);

		const squareChild = this.square.firstElementChild;


		const FILLS = this.props.inverted
			? [
					'rgba(176,198,216, 0.8)',
					'rgba(0,0,0, 0.3)',
					'rgba(176,198,216, 0.5)',
					'rgba(0,0,0, 0.1)'
				]
			: [
					'rgba(255,255,255, 0.8)',
					'rgba(0,0,0, 0.3)',
					'rgba(255,255,255, 0.5)',
					'rgba(0,0,0, 0.1)'
				];
		const DURATION = 1000;

		const scalePath = mojs.easing.path(
			'M0, 0 C0, 0 16.857142857142854, -5.248486282060085e-15 31.142857142857142, 0 C30.80272108843543, -113.14285714285715 50, -100 50, -100 C50, -100 65.31357300419697, -100.13604825191986 70, -0.2857142857142857 C84.28506645158541, -0.14966603379441404 100, 0 100, 0 '
		);


		const yCurve = new MojsCurveEditor({
			name: 'Y curve editor'
		});
		const angleZCurve = new MojsCurveEditor({
			name: 'Angle Z curve editor'
		});
		const xScale = new MojsCurveEditor({
			name: 'X scale curve editor'
		});
		const yScale = new MojsCurveEditor({
			name: 'Y scale curve editor'
		});
		const square = new mojs.Html({
			el: this.square,
			customProperties: {
				originY: 50,
				draw(el, props) {
					el.style.transformOrigin = `50% ${props.originY}%`;
				}
			},
			y: {
				['0vh']: '-80vh',
				curve: yCurve.getEasing()
			},
			scaleX: {
				1: 1,
				curve: xScale.getEasing()
			},
			scaleY: {
				1: 1,
				curve: yScale.getEasing({
					transform: function(k) {
						return 1 + (1 - scalePath(k)) / 1.3;
					}
				})
			},
			angleZ: {
				[-180]: 0,
				curve: angleZCurve.getEasing()
			},
			duration: DURATION,
			isForce3d: true
		});

		square.rotate = 0;

		this.timeline = new mojs.Timeline({
			onComplete: this._onComplete,
			onStart: this._onStart,
			repeat: 999
		});
		this.timeline.add(square);
		new MojsPlayer({
			add: this.timeline,
			isPlaying: true,
			isRepeat: true
		});
	}

	render() {
		const { small = false, inverted = false } = this.props;

		return (
			<div className={this.props.className} ref={'stage'}>
				<div ref={'square'}>
					<StandaloneLogo />
				</div>
				<div
					ref={'shadow'}
				/>
			</div>
		);
	}
}

On master:

$ gulp babel-lib
[11:44:14] Using gulpfile ~/mysrc/weisjohn/mojs-player/gulpfile.js
[11:44:14] Starting 'babel-lib'...
[11:44:15] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    /Users/john/mysrc/weisjohn/mojs-player/js/mojs-player.babel.js: Unexpected token (504:20)
[11:44:15] Finished 'babel-lib' after 974 ms

I notice there's no .babelrc file in the repo, maybe that's related?

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #4 via ZenHub

Migrate the setup by using NodeJS 20 instead of NodeJS 18.

NodeJS 20 is active since April 2023.
See https://github.com/nodejs/release#release-schedule.

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #4 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #5 via ZenHub

@zfrisch commented on Wed Dec 21 2016

Hello! Strangely I'm having an issue with the Mojs Player tracker line being latent. It's only an issue in my Chrome Browser(Version 55.0.2883.87 m, which is the most current). In FF and IE10/Edge it seems to work fine. The error also doesn't seem to show up on CrossBrowserTesting (the site that CodePen uses for Cross Browser Testing).

I recorded a video to show what I'm talking about:
https://www.youtube.com/watch?v=K_ib-3OWCuE

Here's the CodePen :
http://codepen.io/zfrisch/full/yVwmoW/

Thanks!

@eltonmesquita commented on Wed Dec 21 2016

Hello @zfrisch . There's a big chance your problem is related to a chrome extension. It's a really common issue. Try to run it in an anonymous window and see if the issue persists.

@zfrisch commented on Wed Dec 21 2016

Hi @eltonmesquita ! Thanks for the advice. I tried this in Incognito Mode and made sure my Chrome extensions were all disabled for good measure. Unfortunately it's still showing the same on my screen.

@legomushroom commented on Wed Dec 21 2016

Hi Zak, Hi Elton!

I have seen that issue when you use the player inside an iFrame, for instance it behaves like that when you use it with webpack-dev-server. Is it true for you? Any environments details I should know about?

Thanks a lot for the issue!

@legomushroom commented on Wed Dec 21 2016

Oh yeah, I think we should move this issue to https://github.com/legomushroom/mojs-player repo

@legomushroom commented on Wed Dec 21 2016

Oh I see, that's another issue actually. Interesting. Never saw that. That's for the video and codepen sample.

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #3 via ZenHub

@legomushroom commented on Wed Dec 21 2016

Issue moved to legomushroom/mojs-player #4 via ZenHub