Jitsi Quiz 정리

Toogle

react > features > toolbox > componetns > web > toolbox.js

mainMenuAdditionalButtons (Array)
_shouldShowButton('quiz')
'quiz'를 추가하는 작업이 필요함
TOOLBAR_BUTOONS에 추가하던지 (base > config > constants)
state['features/base/config']에서 불러오는 작업이 필요함

'quiz'가 있다면
<ToolbarButton /> 컴포넌트를 생성
accepssibilityLabe, tooltip props에 t()라는 함수와 함께 넘겨주는데 이는 각 언어로 번역해주는 함수임
onClick에 _onToolbarOpenQuiz 함수 전달

quiz폴더에 action.web.js에 toggleQuiz 생성
getState()["fetures/quiz"].isOpen에서 isOpen boolean값 가져옴

이렇게 가져오기 위해선 redux store에 등록? 필요
reducer.js > ReducerRegistry.register("features/quiz ...)
_mapStateToProps()로 해당 컴포넌트에서 isOpen 직접확인

Modal

Toolbox.js

{renderQuizButton()}을 바로 렌더해서 <ShowQuizButton /> 컴포넌트 생성

onHandleClick에 _onRequestShowQuiz 전달

_onRequestShowQuiz() {
        const { dispatch } = this.props;

        if (!APP || !APP.conference || !APP.conference.isJoined()) {
            return;
        }
        this._onToolbarOpenQuiz();
    }

_onToolbarOpenQuiz

 _onToolbarOpenQuiz() {
        sendAnalytics(createToolbarEvent("quiz"));
        // this.props.dispatch(toggleQuiz());
        this.props.dispatch(openDialog(Quiz));
    }

openDialog안에 원하는 컴포넌트를 넣어 실행
컴포넌트는 <Dialog/> 태그로 만들어줘야 함

모든 참가자에게 모달 띄우기

feature > base > participants > middleware.js

미들웨어 SHOW_QUIZ

     case "SHOW_QUIZ": {
            const { conference } = store.getState()["features/base/conference"];

            conference.sendCommandOnce("showquiz", {
                value: true,
            });

            break;
        }

12. sendCommand(name, values) - sends user defined system command to the other participants
    name - the name of the command.
    values - JS object. The object has the following structure:

 {


                value: the_value_of_the_command,


                attributes: {}, // map with keys the name of the attribute and values - the values of the attributes.


                children: [] // array with JS object with the same structure.
}

conference > default

_setupListenrs

room.addCommandListener("showquiz", () => {
            // alert("dd");
            APP.store.dispatch(openDialog(Quiz));
        });

15. addCommandListener(command, handler) - adds listener

command - string for the name of the command
handler(values) - the listener that will be called when a command is received from another participant.

지금 당장 openDialog() 이용해서 모달을 모든 참여자에 띄우는 정도지만 활용함에 따라 많은 것을 추가할 수 있을 듯

08/01

addCommandListener는 방에 참여한 모든 클라이언트에서 실행된다.

conference

conference를 바로 import해서 conference에서 제공하는 여러 함수를 사용 할 수 있다. 그 중 listMembers()를 사용해 모든 참여자의 정보를 가져 올 수 있다.

conference.listmembersIds()
본인 제외 참여자 id를 배열로 가져옴
conference.getMyUserId()
본인 id를 문자열로 가져옴

<Dialog 
hideCancelButton={true} 
submitDisabled={true}>
      {name}님께선 정답 {_result}개를 맞추셨습니다.
      {conference.listMembers().map((member) => {
      return (
               <div>
               {member._displayName}님께선 정답 {_result}개를 맞추셨습니다.
               </div>
              );
      })}
</Dialog>

Redux 등록하기

react > fatures > something > reducer.js

리덕스 스토어에 등록하기

ReducerRegistry.register("features/something", (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case ADD_TITLE:
            return {
                ...state,
                title: action.title,
            };
    }
    return state;
});

react > fatueres > app > reducers

reducer를 등록해줘야 작동한다
import "../something/reducer"