@fusion.dev/helix-headless 0.56.0 → 0.57.0

package/dist/video/root/extra-controls.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Which extra controls a player offers, and which of them go behind the button.
+ *
+ * Separable because every answer here is taken from two written lists and three
+ * facts, before anything is drawn: what the consumer asked for, what this
+ * platform can do, and what is already on the bar. Nothing in it reaches the
+ * media element and nothing in it renders, which is what keeps the roster one
+ * decision rather than a condition spread across two templates.
+ */
+/** What the existence of a control depends on, which only the player can answer. */
+export interface Conditions {
+    /** Whether this update is hydrating a server's markup. */
+    hydrating: boolean;
+    /** Whether anything on the network has offered to play this. */
+    remote: boolean;
+    /** Whether a file is named, which is what a download needs. */
+    source: boolean;
+}
+/** Whether this platform can do a named control at all. */
+export declare const offers: (one: string, player: Conditions) => boolean;
+/** The extras asked for, in order, and only the ones this platform can do. */
+export declare const barControls: (written: string, player: Conditions) => string[];
+/**
+ * The controls asked for behind the overflow button, in order.
+ *
+ * A name in both lists is on the bar and not here. Drawing it twice is worse
+ * than either placement, and the bar is the one a reader can see.
+ */
+export declare const menuControls: (written: string, onBar: readonly string[], player: Conditions) => string[];
+/**
+ * Whether the file a `src` points at is the player's to hand over.
+ *
+ * Here because it is the download control's other condition: whether it is
+ * drawn at all is `source`, and whether the `download` attribute on it means
+ * anything is this.
+ *
+ * `blob:` and `data:` named rather than compared, because the rule `download`
+ * actually follows is same-origin *or one of those two*: a clip a consumer
+ * generated in the page has no origin to match and is theirs to save by
+ * definition. Comparing origins alone called both foreign, so the one case
+ * where a download certainly works was the one case it was not offered.
+ */
+export declare const ownFile: (src: string) => boolean;

package/dist/video/root/extra-controls.js

@@ -0,0 +1,41 @@
+import { writtenList } from '@fusion.dev/helix-core';
+export const offers = (one, player) => {
+    if (one === 'pip') {
+        return !player.hydrating && typeof document !== 'undefined' && document.pictureInPictureEnabled;
+    }
+    if (one === 'remote') {
+        return player.remote;
+    }
+    if (one === 'download') {
+        return player.source;
+    }
+    if (one === 'next' || one === 'previous') {
+        return true;
+    }
+    if (one === 'forward' || one === 'rewind') {
+        return true;
+    }
+    return one === 'speed';
+};
+export const barControls = (written, player) => writtenList(written).filter((one) => offers(one, player));
+export const menuControls = (written, onBar, player) => {
+    const bar = new Set(onBar);
+    return writtenList(written).filter((one) => !bar.has(one) && offers(one, player));
+};
+export const ownFile = (src) => {
+    if (src === '') {
+        return false;
+    }
+    if (src.startsWith('blob:') || src.startsWith('data:')) {
+        return true;
+    }
+    if (typeof location === 'undefined') {
+        return false;
+    }
+    try {
+        return new URL(src, location.href).origin === location.origin;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/video/root/keys.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What each key does to a player, and how far it moves.
+ *
+ * Separable because the table is a convention rather than a fact about this
+ * element: Space and `k` play, the arrows scrub and change the volume, `m`
+ * mutes, `f` fills the screen, and `j` and `l` jump the distance the bar's own
+ * buttons jump. What it needs is the media element and four actions, which is
+ * the same handful the media session hands to a headset. Whether the keys are
+ * bound at all, and what a taken press does to the event, stay with the element.
+ */
+/** What a press asks the player for, which is all a key can do. */
+export interface KeyActions {
+    fullscreen: () => void;
+    seek: (seconds: number) => void;
+    skipBy: (seconds: number) => void;
+    toggle: () => void;
+}
+/**
+ * Answers one press, and says whether it was one of these.
+ *
+ * Nothing is taken while focus is in a range. The scrubber and the volume are
+ * real inputs and the arrows are already theirs, so intercepting would mean
+ * seeking twice for one press.
+ */
+export declare const takeKey: (event: KeyboardEvent, video: HTMLVideoElement, actions: KeyActions) => boolean;

package/dist/video/root/keys.js

@@ -0,0 +1,50 @@
+import { SKIP_SECONDS } from '@fusion.dev/helix-core';
+export const takeKey = (event, video, actions) => {
+    if (event.target?.tagName === 'INPUT') {
+        return false;
+    }
+    const step = event.shiftKey ? SKIP_SECONDS : 5;
+    switch (event.key) {
+        case ' ':
+        case 'k': {
+            actions.toggle();
+            break;
+        }
+        case 'ArrowRight': {
+            actions.seek(video.currentTime + step);
+            break;
+        }
+        case 'ArrowLeft': {
+            actions.seek(video.currentTime - step);
+            break;
+        }
+        case 'ArrowUp': {
+            video.volume = Math.min(video.volume + 0.1, 1);
+            break;
+        }
+        case 'ArrowDown': {
+            video.volume = Math.max(video.volume - 0.1, 0);
+            break;
+        }
+        case 'j': {
+            actions.skipBy(-SKIP_SECONDS);
+            break;
+        }
+        case 'l': {
+            actions.skipBy(SKIP_SECONDS);
+            break;
+        }
+        case 'm': {
+            video.muted = !video.muted;
+            break;
+        }
+        case 'f': {
+            actions.fullscreen();
+            break;
+        }
+        default: {
+            return false;
+        }
+    }
+    return true;
+};

package/dist/video/root/video-root.d.ts

@@ -232,16 +232,6 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * What the play control is called while it would start the video.
      */
     playLabel: string;
-    /**
-     * Whether the file this points at is ours to hand over.
-     *
-     * `blob:` and `data:` named rather than compared, because the rule `download`
-     * actually follows is same-origin *or one of those two*: a clip a consumer
-     * generated in the page has no origin to match and is theirs to save by
-     * definition. Comparing origins alone called both foreign, so the one case
-     * where a download certainly works was the one case it was not offered.
-     */
-    private get localFile();
     /**
      * Whether it plays where it sits rather than taking over the screen.
      */
@@ -355,16 +345,11 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private readonly idler;
     private readonly remote;
     private readonly session;
-    /** Whether this platform can do a named control at all. */
-    private offers;
+    /** What the roster asks about this player, which is the whole of what it reads. */
+    private get conditions();
     /** The extras asked for, in order, and only the ones this platform can do. */
     private get extras();
-    /**
-     * The controls asked for behind the overflow button, in order.
-     *
-     * A name in both lists is on the bar and not here. Drawing it twice is worse
-     * than either placement, and the bar is the one a reader can see.
-     */
+    /** The controls asked for behind the overflow button, in order. */
     private get overflow();
     /**
      * The sources and caption tracks to copy into the video, as the consumer
@@ -468,21 +453,7 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private takeVolume;
     /** Whether the first set of copies has been read from the children. */
     private mediaRead;
-    /**
-     * The copies to make of what the default slot is given.
-     *
-     * The attribute list is explicit rather than a blind copy of every attribute:
-     * these are two elements with a known and small surface, and copying anything
-     * a consumer happened to put on one would carry their framework's own markers
-     * into a shadow root that has no use for them.
-     */
-    private copiesOf;
-    /**
-     * Rebuilds the copies when what is slotted changes after the first read.
-     *
-     * The same set again is not a change. A video reloads for every new list, and
-     * the first `slotchange` reports the children this element already read.
-     */
+    /** Rebuilds the copies when what is slotted changes after the first read. */
     private readonly handleMedia;
     private readonly handleLoaded;
     private readonly handleTime;
@@ -568,9 +539,9 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * on it, and a page with two videos on it would otherwise have both answering
      * the same press.
      *
-     * Nothing is taken while focus is in a range. The scrubber and the volume are
-     * real inputs and the arrows are already theirs, so intercepting would mean
-     * seeking twice for one press.
+     * A taken press is stopped here rather than in the table, because what the
+     * default would have been is the element's business: the table says what the
+     * key means and this says that nothing else gets it.
      */
     private readonly handleKeydown;
     /** The caption tracks among the copies, named as the menu names them. */

package/dist/video/root/video-root.js

@@ -4,17 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawIcon, HelixElement, HelixNextEvent, HelixPreviousEvent, onUnlessFalse, writtenList, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../menu/index.js';
-import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, showCaption, } from './captions.js';
-import { FullscreenController } from './fullscreen.js';
-import { IdleController } from './idle.js';
-import { MediaSessionController, SKIP_SECONDS } from './media-session.js';
-import { RemotePlaybackController } from './remote-playback.js';
+import { barControls, menuControls, ownFile } from './extra-controls.js';
+import { takeKey } from './keys.js';
 const clock = (seconds) => {
     if (!Number.isFinite(seconds) || seconds < 0) {
         return '0:00';
@@ -85,8 +82,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.media = [];
         this.mediaRead = false;
         this.handleMedia = (event) => {
-            const next = this.copiesOf(event.target.assignedElements());
-            if (JSON.stringify(next) !== JSON.stringify(this.media)) {
+            const next = copiesOf(event.target.assignedElements());
+            if (!sameCopies(next, this.media)) {
                 this.media = next;
             }
         };
@@ -160,101 +157,30 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (this.controls) {
                 return;
             }
-            if (event.target?.tagName === 'INPUT') {
-                return;
-            }
             const video = this.video;
             if (!video) {
                 return;
             }
-            const step = event.shiftKey ? 10 : 5;
-            switch (event.key) {
-                case ' ':
-                case 'k': {
-                    this.toggle();
-                    break;
-                }
-                case 'ArrowRight': {
-                    this.seek(video.currentTime + step);
-                    break;
-                }
-                case 'ArrowLeft': {
-                    this.seek(video.currentTime - step);
-                    break;
-                }
-                case 'ArrowUp': {
-                    video.volume = Math.min(video.volume + 0.1, 1);
-                    break;
-                }
-                case 'ArrowDown': {
-                    video.volume = Math.max(video.volume - 0.1, 0);
-                    break;
-                }
-                case 'j': {
-                    this.skipBy(-SKIP_SECONDS);
-                    break;
-                }
-                case 'l': {
-                    this.skipBy(SKIP_SECONDS);
-                    break;
-                }
-                case 'm': {
-                    video.muted = !video.muted;
-                    break;
-                }
-                case 'f': {
-                    void this.fullscreen.toggle();
-                    break;
-                }
-                default: {
-                    return;
-                }
+            const taken = takeKey(event, video, {
+                fullscreen: () => void this.fullscreen.toggle(),
+                seek: (seconds) => this.seek(seconds),
+                skipBy: (seconds) => this.skipBy(seconds),
+                toggle: () => this.toggle(),
+            });
+            if (taken) {
+                event.preventDefault();
             }
-            event.preventDefault();
         };
         this.captions = [];
     }
-    get localFile() {
-        if (this.src === '') {
-            return false;
-        }
-        if (this.src.startsWith('blob:') || this.src.startsWith('data:')) {
-            return true;
-        }
-        if (typeof location === 'undefined') {
-            return false;
-        }
-        try {
-            return new URL(this.src, location.href).origin === location.origin;
-        }
-        catch {
-            return false;
-        }
-    }
-    offers(one) {
-        if (one === 'pip') {
-            return !this.hydrating && typeof document !== 'undefined' && document.pictureInPictureEnabled;
-        }
-        if (one === 'remote') {
-            return this.remoteAvailable;
-        }
-        if (one === 'download') {
-            return this.src !== '';
-        }
-        if (one === 'next' || one === 'previous') {
-            return true;
-        }
-        if (one === 'forward' || one === 'rewind') {
-            return true;
-        }
-        return one === 'speed';
+    get conditions() {
+        return { hydrating: this.hydrating, remote: this.remoteAvailable, source: this.src !== '' };
     }
     get extras() {
-        return writtenList(this.extraControls).filter((one) => this.offers(one));
+        return barControls(this.extraControls, this.conditions);
     }
     get overflow() {
-        const onBar = new Set(this.extras);
-        return writtenList(this.overflowControls).filter((one) => !onBar.has(one) && this.offers(one));
+        return menuControls(this.overflowControls, this.extras, this.conditions);
     }
     get currentSrc() {
         return this.video?.currentSrc ?? '';
@@ -373,24 +299,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.volume = Number(event.target.value);
         video.muted = false;
     }
-    copiesOf(elements) {
-        return elements
-            .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
-            .map((node) => {
-            const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
-            const names = tag === 'track'
-                ? ['default', 'kind', 'label', 'src', 'srclang']
-                : ['media', 'sizes', 'src', 'srcset', 'type'];
-            const attrs = {};
-            for (const name of names) {
-                const value = node.getAttribute(name);
-                if (value !== null) {
-                    attrs[name] = value;
-                }
-            }
-            return { attrs, tag };
-        });
-    }
     claimSession() {
         const skips = writtenList(`${this.extraControls} ${this.overflowControls}`);
         this.session.claim({ artwork: this.poster, title: this.label }, {
@@ -451,7 +359,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         super.willUpdate(changed);
         if (!this.mediaRead && this.childrenKnown) {
             this.mediaRead = true;
-            this.media = this.copiesOf(this.knownChildren.filter((child) => child.slot === ''));
+            this.media = copiesOf(this.knownChildren.filter((child) => child.slot === ''));
         }
         if (changed.has('media')) {
             this.captions = captionsAmong(this.media);
@@ -542,7 +450,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       </button>`;
         }
         if (one === 'download') {
-            const local = this.localFile;
+            const local = ownFile(this.src);
             return html `<a
         part="download"
         ?download=${local}
@@ -651,7 +559,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       </${this.tag('menu-item')}>`;
         }
         if (one === 'download') {
-            const local = this.localFile;
+            const local = ownFile(this.src);
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start"
         ?download=${local}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.56.0",
-    "@fusion.dev/helix-icons": "0.56.0",
+    "@fusion.dev/helix-core": "0.57.0",
+    "@fusion.dev/helix-icons": "0.57.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.56.0",
-    "@fusion.dev/helix-testing": "0.56.0",
+    "@fusion.dev/helix-cem": "0.57.0",
+    "@fusion.dev/helix-testing": "0.57.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/dist/video/root/captions.d.ts

@@ -1,85 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-/** One caption track, named as the menu names it. */
-export interface Caption {
-    label: string;
-    language: string;
-}
-/** A `<track>` as the consumer wrote it, reduced to what naming it needs. */
-interface TrackCopy {
-    attrs: Record<string, string>;
-    tag: string;
-}
-/**
- * The tracks a reader could choose between, in the order they were written.
- *
- * Filtered by kind, because `textTracks` also carries `chapters`, `metadata`
- * and `descriptions`, and a menu offering "Chapters" as a subtitle language
- * would be offering something that draws no words. Read off the video rather
- * than off the slot: a `<track>` added later is in one and not the other, and
- * the video is the one that has resolved them.
- */
-export declare const captionTracks: (video: HTMLVideoElement | null) => TextTrack[];
-/**
- * Shows one track and disables every other, or shows none at `-1`.
- *
- * Every other, rather than only the one that was on. Two tracks in `hidden`
- * both fire `cuechange`, so the rendered cue becomes whichever fired last and
- * a reader who switched language gets the two interleaved. Measured as two
- * subtitles alternating line by line.
- *
- * `hidden`, never `showing`. Hidden is the mode where a track still fires
- * `cuechange` and still fills `activeCues`, and the browser draws nothing,
- * which is exactly what is wanted when something else is doing the drawing.
- */
-export declare const showCaption: (tracks: readonly TextTrack[], index: number) => void;
-/**
- * Whether a track the platform started showing is now ours to draw.
- *
- * A `<track default>` arrives `showing`, which is the browser drawing it.
- * Moved to `hidden` so the cues keep coming and we draw them instead. What
- * comes back is whether captions are on, which is not always "off": a button
- * that began there reported the opposite of what was on screen.
- */
-export declare const adoptTrack: (track: TextTrack) => boolean;
-/**
- * The caption tracks among the copies, before the render that draws them.
- *
- * By the platform's own reading of `kind`, which is what makes a `<track>` a
- * caption at all: missing is `subtitles` and anything it does not know is
- * `metadata`. Read from the video's tracks after the render instead, the count
- * arrived a render late and asked for one more. Choosing one still goes
- * through the video's tracks, which hold them in the same order.
- */
-export declare const captionsAmong: (media: readonly TrackCopy[]) => Caption[];
-/**
- * The cue on screen now, as nodes, or nothing between cues.
- *
- * Nodes rather than a string, because `VTTCue.text` is the cue's *source*:
- * WebVTT carries markup, and a caption file in the wild is full of it. `<v
- * Hildy>` names who is speaking, `<b>` and `<i>` and `<u>` mark emphasis, and
- * `<c.loud>` classes a line. Rendered as text every one of those arrives on
- * screen as visible angle brackets.
- *
- * `getCueAsHTML` is the platform parsing its own format, so nothing here has
- * to know the grammar and no cue text is ever treated as HTML: what comes
- * back is a fragment the browser built, not a string anybody interpolated.
- */
-export declare const activeCue: (track: TextTrack | undefined) => DocumentFragment | undefined;
-/**
- * Listens to one track's cues at a time, so the next one can take it off.
- *
- * Taken off whatever it was on before adding it here. `follow` runs from
- * `loadedmetadata`, which fires again for every source a reader moves to, and
- * a consumer adding a `<track>` later gets another. Added without removing, a
- * playlist of six left six listeners on tracks that between them fire for
- * every cue in the video.
- */
-export declare class CueController implements ReactiveController {
-    private readonly listener;
-    private track;
-    constructor(host: ReactiveControllerHost, listener: () => void);
-    follow(track: TextTrack): void;
-    hostDisconnected(): void;
-    private stop;
-}
-export {};

package/dist/video/root/captions.js

@@ -1,45 +0,0 @@
-export const captionTracks = (video) => {
-    const tracks = video?.textTracks;
-    if (!tracks) {
-        return [];
-    }
-    return [...tracks].filter((one) => one.kind === 'subtitles' || one.kind === 'captions');
-};
-export const showCaption = (tracks, index) => {
-    tracks.forEach((track, at) => {
-        track.mode = at === index ? 'hidden' : 'disabled';
-    });
-};
-export const adoptTrack = (track) => {
-    if (track.mode === 'showing') {
-        track.mode = 'hidden';
-    }
-    return track.mode === 'hidden';
-};
-export const captionsAmong = (media) => media
-    .filter((one) => one.tag === 'track' &&
-    (one.attrs.kind === undefined ||
-        ['captions', 'subtitles'].includes(one.attrs.kind.toLowerCase())))
-    .map((one) => ({ label: one.attrs.label ?? '', language: one.attrs.srclang ?? '' }));
-export const activeCue = (track) => {
-    const active = track?.activeCues?.[0];
-    return active instanceof VTTCue ? active.getCueAsHTML() : undefined;
-};
-export class CueController {
-    constructor(host, listener) {
-        this.listener = listener;
-        host.addController(this);
-    }
-    follow(track) {
-        this.stop();
-        this.track = track;
-        track.addEventListener('cuechange', this.listener);
-    }
-    hostDisconnected() {
-        this.stop();
-    }
-    stop() {
-        this.track?.removeEventListener('cuechange', this.listener);
-        this.track = undefined;
-    }
-}

package/dist/video/root/fullscreen.d.ts

@@ -1,28 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-/**
- * Into fullscreen and back, and honest about where the element is.
- *
- * The state follows `fullscreenchange` rather than the request, so a refused
- * request leaves a button that correctly reports "not fullscreen".
- */
-export declare class FullscreenController implements ReactiveController {
-    private readonly host;
-    private readonly report;
-    constructor(host: ReactiveControllerHost & HTMLElement, report: (full: boolean) => void);
-    /**
-     * Into fullscreen and back, and quiet about being refused.
-     *
-     * `requestFullscreen` rejects rather than returning false, and the two
-     * refusals a consumer will actually meet are a Permissions Policy that does
-     * not grant `fullscreen` to the frame the player is in, and a call without
-     * user activation. Both are `TypeError: Permissions check failed`, which is
-     * the same message for two different causes.
-     *
-     * Caught rather than `void`ed, or a refusal becomes an unhandled rejection
-     * naming neither the element nor the reason.
-     */
-    toggle(): Promise<void>;
-    hostConnected(): void;
-    hostDisconnected(): void;
-    private readonly handleChange;
-}

package/dist/video/root/fullscreen.js

@@ -1,28 +0,0 @@
-export class FullscreenController {
-    constructor(host, report) {
-        this.host = host;
-        this.report = report;
-        this.handleChange = () => {
-            this.report(document.fullscreenElement === this.host);
-        };
-        host.addController(this);
-    }
-    async toggle() {
-        try {
-            if (document.fullscreenElement === this.host) {
-                await document.exitFullscreen();
-                return;
-            }
-            await this.host.requestFullscreen();
-        }
-        catch (error) {
-            console.warn(`<${this.host.localName}> could not enter fullscreen. If it is inside an iframe, that frame needs allow="fullscreen".`, error);
-        }
-    }
-    hostConnected() {
-        document.addEventListener('fullscreenchange', this.handleChange);
-    }
-    hostDisconnected() {
-        document.removeEventListener('fullscreenchange', this.handleChange);
-    }
-}