The Copy Monkey

// meeting.js

// 成员
let members = [{
    id: '001', nickName: 'wang', role = 'speaker'
}];
// 视频流
let streams = {
    '001': MagicStreamObject()
};

function renderMeetingMembers(members, streamSources) {
    // 发言人
    let speakers = members.filter(x => x.role === 'speaker');
    // 其他人
    let others = members.filter(x => x.role !== 'speaker');

    // 将成员与流关联起来
    speakers.forEach(speaker => {
        let stream = streams[speaker.id];
        if (stream) {
            speaker.stream = stream;
        }
    });

    // 非常复杂的渲染逻辑
    renderMembers(speakers, others);
}

renderMeetingMembers(members, streams);

// meeting.js
/** @typedef {import('./meeting.d.ts').MagicStream} MagicStream */
/** @typedef {import('./meeting.d.ts').Member} Member */

/** @type {Member[]} */
let members = [{ id: '001', nickName: 'wang', role = 'speaker' }];
/** @type {{ [userId: string]: MagicStream }} */
let streams = {
    '001': MagicStreamObject()
};

/**
 * @param {Member[]}  members - 参会成员
 * @param {{ [userId: string]: MagicStream }}  streamSources - 流
 **/
function renderMeetingMembers(members, streamSources) {
    // blabla
}

// meeting.d.ts
export interface MagicStream {
    play: () => void;
    stop: () => void;
};

export type Member {
    id: string;
    nickName: string;
    role: 'speaker' | 'role';
    stream?: MagicStream;
};