}
{status[APP_VERSION_STRING] && status[APP_VERSION_STRING].active === true ? (
setNotification({ open: true, message })}
appVersion={APP_VERSION}
diff --git a/app/src/Chat.js b/app/src/Chat.js
index 715933b..740e423 100644
--- a/app/src/Chat.js
+++ b/app/src/Chat.js
@@ -175,6 +175,11 @@ export default class Chat extends Component {
this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props);
return;
+ } else {
+ // CONTINUE TUTORIAL
+ if (this.props.tutorialComplete === false) {
+ this.props.resetTutorial('chat');
+ }
}
if (response.messages) {
diff --git a/app/src/Create.js b/app/src/Create.js
index bbb9f7b..bccc2d1 100644
--- a/app/src/Create.js
+++ b/app/src/Create.js
@@ -37,6 +37,7 @@ import {
updateLocalData,
getUserUid,
emptyLocalData,
+ setTutorialStatus,
} from './Api';
import { goTo } from 'route-lite';
import Chat from './Chat';
@@ -90,7 +91,18 @@ export default class Create extends Component {
}
componentDidMount() {
const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData();
- if (allowAutoRejoin === true && lastActive && userName && partyName && partyPin) {
+ // CONTINUE TUTORIAL
+ if (this.props.tutorialComplete === false) {
+ this.props.resetTutorial();
+ }
+ if (
+ this.props.showFab === true &&
+ allowAutoRejoin === true &&
+ lastActive &&
+ userName &&
+ partyName &&
+ partyPin
+ ) {
if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
this.props.updateLoading(true);
this.props.setVisible(true);
@@ -262,7 +274,7 @@ export default class Create extends Component {
alertStep,
expanded,
} = this.state;
- const { status } = this.props;
+ const { status, resetTutorial } = this.props;
return (
{mode === 'create' ? 'Start Party' : 'Join Party'}
+
this.handleExpanders('alerts')}
expandIcon={
-
+
this.handleExpanders('settings')}
expandIcon={ {
+ setTutorialStatus(false);
+ resetTutorial();
+ }}
+ size="small"
+ >
+ START TUTORIAL
+
+ Take A Tour
+
+ Welcome to Watch Party! Take a quick tour to see how it works. Start by clicking on
+ the (WP) button to the right...
+
+
+ ),
+ e: '.watch-party-fab',
+ dn: () => this.props.visible !== true,
+ },
+ {
+ c: (
+
+ Create / Join
+
+ This is the home screen, you can create or join a party from here.
+
+
+ ),
+ e: '.create-input-card',
+ },
+ {
+ c: (
+
+ Resize
+
+ Use this little tab 👉 to resize the sidebar, double
+ click on it to resize to the default width
+
+
+ ),
+ e: '#party-width-dragger',
+ },
+ {
+ c: (
+
+ Notifications
+
+ Keep an eye on this section for any important notifications, use the left and right
+ buttons to see more notifications
+
+
+ ),
+ e: '.create-alerts-card',
+ },
+ {
+ c: (
+
+ Settings
+
+ Click on 'Settings' to see your available options. You can start the tour again from
+ here if needed.
+
+
+ ),
+ e: '.create-settings-expander',
+ },
+ {
+ c: (
+
+ Create A Party
+
+ Alright, now fill out the fields here, and create a party. We'll continue the tour
+ after you're in a party.
+
+
+ ),
+ e: '.create-input-card',
+ on: () => this.setState({ open: false }),
+ },
+ {
+ c: (
+
+ Title Card
+
+ This top area is the 'Title Card', click on or near the down arrow to see your
+ settings, and other details. If you're on a call you can control the volume from here.
+
+
+ ),
+ db: () => true,
+ e: '.party-chat-header',
+ },
+ {
+ c: (
+
+ Now Playing
+
+ Start playing something and you will see this area update to show what's currently
+ playing.
+
+
+ ),
+ e: '.media-info-card',
+ },
+ {
+ c: (
+
+ Chat & Call
+
+ You can send messages, start/join a call, or go fullscreen from here. You can send a
+ gif, by click on the GIF button.
+
+
+ ),
+ e: '.text-phone-panel',
+ },
+ {
+ c: (
+
+ Hide Sidebar
+
+ You can hide the sidebar by click on the (WP) button again, sync will continue to work
+ even when hidden.
+
+
+ ),
+ e: '.watch-party-fab',
+ },
+ {
+ c: (
+
+ Hide Watch Party
+
+ Look for the Watch Party icon in your extensions bar, you can hide the (WP) button
+ from your screen when you don't want it in your way.
+
+
+ ),
+ e:
+ 'div.party-chat-header div.MuiButtonBase-root.MuiIconButton-root.MuiExpansionPanelSummary-expandIcon.MuiIconButton-edgeEnd',
+ },
+ {
+ c: (
+
+ ALL DONE
+
+ That's it! Go enjoy your favorite show with your favorite people!
+
+
+ ),
+ e: '#party-width-dragger',
+ },
+ ];
+ }
+ componentDidMount() {
+ setTimeout(() => {
+ this.setState({
+ open: !this.props.tutorialComplete && this.props.showFab,
+ });
+ }, 2000);
+ }
+ getAnchorEl() {
+ const { index } = this.state;
+ return document.querySelector(this.steps[index].e);
+ }
+ nextOrBack(v) {
+ const { index } = this.state;
+ if (this.steps[index].on) this.steps[index].on();
+ if (v > 0) {
+ if (index < this.steps.length - 1) this.setState({ index: index + 1 });
+ else {
+ this.setState({ open: false });
+ setTutorialStatus(true);
+ }
+ } else if (v < 0) {
+ if (index > 0) this.setState({ index: index - 1 });
+ else if (index === 0) {
+ this.setState({ open: false });
+ setTutorialStatus(true);
+ }
+ }
+ }
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ open: !nextProps.tutorialComplete && nextProps.showFab,
+ });
+ if (nextProps.tutorialComponent === 'chat') {
+ this.setState({
+ index: 6,
+ });
+ } else {
+ this.setState({
+ index: 0,
+ });
+ }
}
render() {
- const { open } = this.state;
+ const { open, index, el } = this.state;
+ setTimeout(() => {
+ this.setState({
+ el: this.getAnchorEl(),
+ });
+ }, 1000);
return (
- TUTORIAL START
+ {this.steps[index].c}
+ this.nextOrBack(-1)}
+ size="small"
+ variant="outlined"
+ color="secondary"
+ disabled={this.steps[index].db && this.steps[index].db()}
+ >
+ {index === 0 ? 'Skip' : 'Back'}
+
+ }
+ nextButton={
+ this.nextOrBack(1)}
+ size="small"
+ variant="contained"
+ color="secondary"
+ disabled={this.steps[index].dn && this.steps[index].dn()}
+ >
+ {index === this.steps.length - 1 ? 'Done' : 'Next'}
+
+ }
+ />
);
}
diff --git a/app/src/index.css b/app/src/index.css
index 99687e0..a61487b 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -25,6 +25,7 @@ body {
margin: 0 !important;
background-color: black;
transition: max-width ease-in-out 0.35s;
+ overflow-y: initial !important;
}
body.local {
background-color: white;
@@ -910,7 +911,38 @@ button.giphy-list-item {
.watch-party-tutorial {
z-index: 9999 !important;
+ height: 0;
}
.watch-party-tutorial .MuiPaper-root.MuiPopover-paper {
padding: 20px;
+ max-width: 400px;
+ max-height: none;
+}
+.tutorial-stepper {
+ position: relative !important;
+ min-width: 400px !important;
+ background: none !important;
+}
+.tutorial-content {
+ padding: 15px 10px;
+}
+.tutorial-content h6 {
+ font-size: 14px;
+ color: #c0f300;
+ letter-spacing: 2.5px;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+.tutorial-content p {
+ font-size: 12px;
+}
+#resize-demo {
+ padding: 10px;
+ border-radius: 20px;
+ background: #2c2c2c;
+ display: block;
+ width: 20px;
+ height: 20px;
+ text-align: center;
+ float: right;
}