How to use resolveTransitionProps method in Playwright Internal

1import React from 'react';
2import RComponent from './component.js';
3
4/**
5 * Any RComponent that corresponds to an AudioNode is a RAudioNode
6 *
7 * @class      RAudioNode (name)
8 */
9export default class RAudioNode extends RComponent {
10  constructor(props) {
11    super(props);
12    // internal AudioNode instance
13    this.node = null;
14    // dictionary of AudioNode parameters (either AudioParams or object properties)
15    this.params = {};
16    this.connectToAllDestinations = this.connectToAllDestinations.bind(this);
17    this.setParam = this.setParam.bind(this);
18  }
19
20  // recursively builds up a list of nodes pointed to by IDs or lists of IDs
21  flattenPointers(destinations, flattened = []) {
22    for (let element of destinations) {
23      if (Array.isArray(element)) {
24        this.flattenPointers(element, flattened);
25      } else if (typeof element === 'symbol') {
26        flattened.push(this.context.nodes.get(element));
27      } else {
28        flattened.push(element);
29      }
30    }
31
32    return flattened;
33  }
34
35  /**
36   * Generates arguments for AudioNode.connect
37   * Useful because we can, for instance, override the channel assignment logic for ChannelSplitter etc.
38   *
39   * @param      {function} destination The AudioNode to connect to
40   * @param      {number} destinationIndex The index of the AudioNode among other destinations
41   * @param      {string|null} toParam The name of the AudioParam to connect to (or undefined)
42   * @param      {number} fromChannel The index of the chosen output channel of this node (default is 0)
43   * @param      {number} toChannel The index of the chosen input channel of the destination node (default is 0)
44   */
45  getConnectionArguments(destination, destinationIndex, toParam, fromChannel = 0, toChannel = 0) {
46    const connectTarget = toParam ? destination[toParam] : destination;
47
48    return [ connectTarget ].concat(toParam ? [] : [ fromChannel, toChannel ]);
49  }
50
51  /**
52   * Connects the given AudioNode to this RAudioNode's destinations.
53   * Abstracts away this operation as it's used in multiple lifecycle stages.
54   *
55   * @param      {function} destinationFunction The function that will return the destinations
56   * @param      {AudioNode}  webAudioNode  The web audio node
57   */
58  connectToAllDestinations(destinationFunction, webAudioNode) {
59    webAudioNode.disconnect();
60
61    if (destinationFunction && !this.props.disconnected) {
62      let destinations = destinationFunction();
63
64      if (!(destinations instanceof Array)) destinations = [ destinations ];
65
66      this.flattenPointers(destinations).forEach((destination, di) => {
67        if (destination) {
68          const connectArgs = this.getConnectionArguments(
69            destination,
70            di,
71            this.props.connectToParam,
72            this.props.connectFromChannel,
73            this.props.connectToChannel);
74
75          webAudioNode.connect(...connectArgs);
76        }
77      });
78    }
79  }
80
81  componentWillMount() {
82    super.componentWillMount();
83  }
84
85  componentWillReceiveProps(nextProps) {
86    this.updateParams(nextProps);
87  }
88
89  componentWillUpdate(nextProps, nextState) {
90    // update the node's record in the node registry
91    if (this.props.identifier !== nextProps.identifier) {
92      this.context.nodes.delete(this.props.identifier);
93      this.context.nodes.set(nextProps.identifier, this.node);
94    }
95  }
96
97  // we use DidUpdate to connect to new destinations,
98  // because WillUpdate might get called before the new destinations are ready
99  componentDidUpdate(prevProps, prevState) {
100    if (prevProps.destination !== this.props.destination) {
101      this.connectToAllDestinations(this.props.destination, this.node);
102    }
103  }
104
105  componentWillUnmount() {
106    this.node.disconnect();
107    this.context.nodes.delete(this.props.identifier);
108  }
109
110  resolveTransitionProps(props, propName) {
111    const transitionTime = typeof props.transitionTime === 'number'
112      ? props.transitionTime
113      : props.transitionTime ? props.transitionTime[propName] : null;
114
115    const transitionCurve = typeof props.transitionCurve === 'string'
116      ? props.transitionCurve
117      : props.transitionCurve ? props.transitionCurve[propName] : null;
118
119    return [ transitionTime, transitionCurve ];
120  }
121
122  // updates only Web Audio-related parameters
123  // (both AudioParams and regular properties)
124  updateParams(props) {
125    if (!this.params) return;
126
127    for (let p in this.params) {
128      if (!(p in props)) continue;
129
130      const [ transitionTime, transitionCurve ] = this.resolveTransitionProps(props, p);
131
132      if (this.node[p] instanceof AudioParam) {
133        this.setParam(this.node[p], props[p], transitionTime, transitionCurve);
134      } else if (this.node.parameters && this.node.parameters.has(p)) {
135        let param = this.node.parameters.get(p);
136        this.setParam(param, props[p], transitionTime, transitionCurve);
137      } else if (p in this.node) {
138        // some browsers (e.g. Chrome) will try to set channelCount and throw an error
139        // since we can't use Object.getOwnPropertyDescriptor on the AudioNodes
140        // we simply wrap the action in a try-catch
141        try {
142          if (this.node[p] !== props[p]) this.node[p] = props[p];
143        } catch(e) {
144          console.warn(`Tried setting ${p} on node`, this.node); // eslint-disable-line no-console
145        }
146      }
147    }
148  }
149
150  setParam(param, value, transitionTime, transitionCurve) {
151    if (transitionCurve) {
152      const fn = `${transitionCurve}RampToValueAtTime`;
153      // `exponentialRamp` doesn't seem to work on Firefox, so fall back to linear
154      try {
155        param[fn](value, transitionTime);
156      } catch (e) {
157        param['linearRampToValueAtTime'](value, transitionTime);
158      }
159    } else {
160      param.setValueAtTime(value, transitionTime || this.context.audio.currentTime);
161    }
162  }
163
164  componentDidMount() {
165    this.connectToAllDestinations(this.props.destination, this.node);
166  }
167
168  render() {
169    if (this.context.debug) {
170      return (
171        <div>
172          <div>
173            <strong>
174               <em>{this.props.name || ''}</em>
175              <sup><mark>{this.props.disconnected && 'disconnected' || ''}</mark></sup>
176            </strong>
177            <div>{ this.props.connectToParam ? <span> connects to <em>{this.props.connectToParam}</em></span> : null }</div>
178          </div>
179            {
180              Object.keys(this.params).map((p, pi) => {
181                if (!this.props[p] && this.props[p] !== 0) return null;
182
183                let param = this.props[p];
184                if (typeof this.props[p] === 'boolean') param = this.props[p].toString();
185
186                if (!(['number', 'string', 'boolean'].includes(typeof this.props[p]))) {
187                  param = param.constructor.name;
188                }
189
190                return <li key={pi}>{p}: <code>{param}</code></li>;
191              })
192            }
193        </div>
194      );
195    }
196
197    return null;
198  }
199}
200

Source: audio-node.js

import React from 'react';
import RComponent from './component.js';

/**
 * Any RComponent that corresponds to an AudioNode is a RAudioNode
 *
 * @class      RAudioNode (name)
 */
export default class RAudioNode extends RComponent {
  constructor(props) {
    super(props);
    // internal AudioNode instance
    this.node = null;
    // dictionary of AudioNode parameters (either AudioParams or object properties)
    this.params = {};
    this.connectToAllDestinations = this.connectToAllDestinations.bind(this);
    this.setParam = this.setParam.bind(this);
  }

  // recursively builds up a list of nodes pointed to by IDs or lists of IDs
  flattenPointers(destinations, flattened = []) {
    for (let element of destinations) {
      if (Array.isArray(element)) {
        this.flattenPointers(element, flattened);
      } else if (typeof element === 'symbol') {
        flattened.push(this.context.nodes.get(element));
      } else {
        flattened.push(element);
      }
    }

    return flattened;
  }

  /**
   * Generates arguments for AudioNode.connect
   * Useful because we can, for instance, override the channel assignment logic for ChannelSplitter etc.
   *
   * @param      {function} destination The AudioNode to connect to
   * @param      {number} destinationIndex The index of the AudioNode among other destinations
   * @param      {string|null} toParam The name of the AudioParam to connect to (or undefined)
   * @param      {number} fromChannel The index of the chosen output channel of this node (default is 0)
   * @param      {number} toChannel The index of the chosen input channel of the destination node (default is 0)
   */
  getConnectionArguments(destination, destinationIndex, toParam, fromChannel = 0, toChannel = 0) {
    const connectTarget = toParam ? destination[toParam] : destination;

    return [ connectTarget ].concat(toParam ? [] : [ fromChannel, toChannel ]);
  }

  /**
   * Connects the given AudioNode to this RAudioNode's destinations.
   * Abstracts away this operation as it's used in multiple lifecycle stages.
   *
   * @param      {function} destinationFunction The function that will return the destinations
   * @param      {AudioNode}  webAudioNode  The web audio node
   */
  connectToAllDestinations(destinationFunction, webAudioNode) {
    webAudioNode.disconnect();

    if (destinationFunction && !this.props.disconnected) {
      let destinations = destinationFunction();

      if (!(destinations instanceof Array)) destinations = [ destinations ];

      this.flattenPointers(destinations).forEach((destination, di) => {
        if (destination) {
          const connectArgs = this.getConnectionArguments(
            destination,
            di,
            this.props.connectToParam,
            this.props.connectFromChannel,
            this.props.connectToChannel);

          webAudioNode.connect(...connectArgs);
        }
      });
    }
  }

  componentWillMount() {
    super.componentWillMount();
  }

  componentWillReceiveProps(nextProps) {
    this.updateParams(nextProps);
  }

  componentWillUpdate(nextProps, nextState) {
    // update the node's record in the node registry
    if (this.props.identifier !== nextProps.identifier) {
      this.context.nodes.delete(this.props.identifier);
      this.context.nodes.set(nextProps.identifier, this.node);
    }
  }

  // we use DidUpdate to connect to new destinations,
  // because WillUpdate might get called before the new destinations are ready
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.destination !== this.props.destination) {
      this.connectToAllDestinations(this.props.destination, this.node);
    }
  }

  componentWillUnmount() {
    this.node.disconnect();
    this.context.nodes.delete(this.props.identifier);
  }

  resolveTransitionProps(props, propName) {
    const transitionTime = typeof props.transitionTime === 'number'
      ? props.transitionTime
      : props.transitionTime ? props.transitionTime[propName] : null;

    const transitionCurve = typeof props.transitionCurve === 'string'
      ? props.transitionCurve
      : props.transitionCurve ? props.transitionCurve[propName] : null;

    return [ transitionTime, transitionCurve ];
  }

  // updates only Web Audio-related parameters
  // (both AudioParams and regular properties)
  updateParams(props) {
    if (!this.params) return;

    for (let p in this.params) {
      if (!(p in props)) continue;

      const [ transitionTime, transitionCurve ] = this.resolveTransitionProps(props, p);

      if (this.node[p] instanceof AudioParam) {
        this.setParam(this.node[p], props[p], transitionTime, transitionCurve);
      } else if (this.node.parameters && this.node.parameters.has(p)) {
        let param = this.node.parameters.get(p);
        this.setParam(param, props[p], transitionTime, transitionCurve);
      } else if (p in this.node) {
        // some browsers (e.g. Chrome) will try to set channelCount and throw an error
        // since we can't use Object.getOwnPropertyDescriptor on the AudioNodes
        // we simply wrap the action in a try-catch
        try {
          if (this.node[p] !== props[p]) this.node[p] = props[p];
        } catch(e) {
          console.warn(`Tried setting ${p} on node`, this.node); // eslint-disable-line no-console
        }
      }
    }
  }

  setParam(param, value, transitionTime, transitionCurve) {
    if (transitionCurve) {
      const fn = `${transitionCurve}RampToValueAtTime`;
      // `exponentialRamp` doesn't seem to work on Firefox, so fall back to linear
      try {
        param[fn](value, transitionTime);
      } catch (e) {
        param['linearRampToValueAtTime'](value, transitionTime);
      }
    } else {
      param.setValueAtTime(value, transitionTime || this.context.audio.currentTime);
    }
  }

  componentDidMount() {
    this.connectToAllDestinations(this.props.destination, this.node);
  }

  render() {
    if (this.context.debug) {
      return (
        <div>
          <div>
            <strong>
               <em>{this.props.name || ''}</em>
              <sup><mark>{this.props.disconnected && 'disconnected' || ''}</mark></sup>
            </strong>
            <div>{ this.props.connectToParam ? <span> connects to <em>{this.props.connectToParam}</em></span> : null }</div>
          </div>
            {
              Object.keys(this.params).map((p, pi) => {
                if (!this.props[p] && this.props[p] !== 0) return null;

                let param = this.props[p];
                if (typeof this.props[p] === 'boolean') param = this.props[p].toString();

                if (!(['number', 'string', 'boolean'].includes(typeof this.props[p]))) {
                  param = param.constructor.name;
                }

                return <li key={pi}>{p}: <code>{param}</code></li>;
              })
            }
        </div>
      );
    }

    return null;
  }
}