Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option for image and video source to be a url. #153

Merged
merged 4 commits into from
Oct 12, 2022
Merged

Add option for image and video source to be a url. #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eabf221
Add option for visual source variable to be a URL string
pvanderlaat Sep 28, 2022
6b00e8f
Clean up
pvanderlaat Sep 28, 2022
9510c4d
Add source URL option for video#src
pvanderlaat Sep 28, 2022
0d1df91
Fix linting issues.
pvanderlaat Sep 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions dist/etro-cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1150,8 +1150,13 @@ function VisualSourceMixin(superclass) {

var Image = /** @class */ (function (_super) {
__extends(Image, _super);
function Image() {
return _super !== null && _super.apply(this, arguments) || this;
function Image(options) {
if (typeof (options.source) === 'string') {
var img = document.createElement('img');
img.src = options.source;
options.source = img;
}
return _super.call(this, options) || this;
}
return Image;
}(VisualSourceMixin(Visual)));
Expand Down Expand Up @@ -1231,8 +1236,13 @@ var Text = /** @class */ (function (_super) {
*/
var Video = /** @class */ (function (_super) {
__extends(Video, _super);
function Video() {
return _super !== null && _super.apply(this, arguments) || this;
function Video(options) {
if (typeof (options.source) === 'string') {
var img = document.createElement('video');
img.src = options.source;
options.source = img;
}
return _super.call(this, options) || this;
}
return Video;
}(AudioSourceMixin(VisualSourceMixin(Visual))));
Expand Down
18 changes: 14 additions & 4 deletions dist/etro-iife.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1151,8 +1151,13 @@ var etro = (function () {

var Image = /** @class */ (function (_super) {
__extends(Image, _super);
function Image() {
return _super !== null && _super.apply(this, arguments) || this;
function Image(options) {
if (typeof (options.source) === 'string') {
var img = document.createElement('img');
img.src = options.source;
options.source = img;
}
return _super.call(this, options) || this;
}
return Image;
}(VisualSourceMixin(Visual)));
Expand Down Expand Up @@ -1232,8 +1237,13 @@ var etro = (function () {
*/
var Video = /** @class */ (function (_super) {
__extends(Video, _super);
function Video() {
return _super !== null && _super.apply(this, arguments) || this;
function Video(options) {
if (typeof (options.source) === 'string') {
var img = document.createElement('video');
img.src = options.source;
options.source = img;
}
return _super.call(this, options) || this;
}
return Video;
}(AudioSourceMixin(VisualSourceMixin(Visual))));
Expand Down
1 change: 1 addition & 0 deletions dist/layer/image.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ import { VisualSourceOptions } from './visual-source';
declare type ImageOptions = VisualSourceOptions;
declare const Image_base: new (...args: unknown[]) => import("./visual-source").VisualSource;
declare class Image extends Image_base {
constructor(options: ImageOptions);
}
export { Image, ImageOptions };
1 change: 1 addition & 0 deletions dist/layer/video.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@ declare const Video_base: new (...args: unknown[]) => import("./audio-source").A
* @extends VisualSource
*/
declare class Video extends Video_base {
constructor(options: VisualSourceOptions);
}
export { Video, VideoOptions };
2 changes: 1 addition & 1 deletion dist/layer/visual-source.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface VisualSource extends Visual {
destHeight: Dynamic<number>;
}
interface VisualSourceOptions extends VisualOptions {
source: HTMLImageElement | HTMLVideoElement;
source: HTMLImageElement | HTMLVideoElement | string;
/** What part of {@link source} to render */
sourceX?: Dynamic<number>;
/** What part of {@link source} to render */
Expand Down
5 changes: 5 additions & 0 deletions examples/introduction/hello-world2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
movie
// add a video layer at 0s in the timeline
.addLayer(new etro.layer.Video({ startTime: 0, source: video }))
// add an image layer using a URL as its source
.addLayer(new etro.layer.Image({
startTime: 0,
source: 'https://pvanderlaat.com/clubfinity.png'
}))
.play()

// FOR TESTING issue#8 (don't delete):
Expand Down
9 changes: 9 additions & 0 deletions spec/unit/layer/visual-source.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import etro from '../../../src/index'
import { mockBaseLayer } from '../mocks/layer'
import { mockMovie } from '../mocks/movie'

describe('Unit Tests ->', function () {
Expand Down Expand Up @@ -32,6 +33,14 @@ describe('Unit Tests ->', function () {
source.readyState = 0
expect(layer.ready).toBe(false)
})
it('should be able to use an image url', async function () {
movie.addLayer(mockBaseLayer())
const tempLayer = new etro.layer.Image({ startTime: 0, duration: 0.8, source: 'https://pvanderlaat.com/clubfinity.png' })
const tempImage = new Image()
tempImage.src = 'https://pvanderlaat.com/clubfinity.png'
movie.addLayer(tempLayer)
expect(tempLayer.source).toEqual(tempImage)
})
})
})
})
11 changes: 10 additions & 1 deletion src/layer/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { VisualSourceMixin, VisualSourceOptions } from './visual-source'

type ImageOptions = VisualSourceOptions

class Image extends VisualSourceMixin(Visual) {}
class Image extends VisualSourceMixin(Visual) {
constructor (options: ImageOptions) {
if (typeof (options.source) === 'string') {
const img = document.createElement('img')
img.src = options.source
options.source = img
}
super(options)
}
}

export { Image, ImageOptions }
11 changes: 10 additions & 1 deletion src/layer/video.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ type VideoOptions = VisualSourceOptions & AudioSourceOptions
* @extends AudioSource
* @extends VisualSource
*/
class Video extends AudioSourceMixin(VisualSourceMixin(Visual)) {}
class Video extends AudioSourceMixin(VisualSourceMixin(Visual)) {
constructor (options: VisualSourceOptions) {
if (typeof (options.source) === 'string') {
const img = document.createElement('video')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be video

img.src = options.source
options.source = img
}
super(options)
}
}

export { Video, VideoOptions }
2 changes: 1 addition & 1 deletion src/layer/visual-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ interface VisualSource extends Visual {
}

interface VisualSourceOptions extends VisualOptions {
source: HTMLImageElement | HTMLVideoElement
source: HTMLImageElement | HTMLVideoElement | string
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you revert this line and override source in ImageOptions and VideoOptions, will it still compile?

Updating ImageOptions to this:

interface ImageOptions extends VisualSourceOptions {
  source: HTMLImageElement | string
}

If it doesn't compile, it's fine to leave it how it is.

/** What part of {@link source} to render */
sourceX?: Dynamic<number>
/** What part of {@link source} to render */
Expand Down