Fix part of #19217: Develop footer component and add conversation skin to new lesson player

assets/i18n/en.json

@@ -1145,6 +1145,7 @@
     "I18N_PLAYER_RETURN_TO_LIBRARY": "Return to Library",
     "I18N_PLAYER_RETURN_TO_PARENT": "Return to Main Lesson",
     "I18N_PLAYER_RETURN_TO_STORY": "Return to Story",
+    "I18N_PLAYER_SAVE_BUTTON": "Save",
     "I18N_PLAYER_SHARE_EXPLORATION": "Enjoyed this exploration? Share it with your friends!",
     "I18N_PLAYER_SHARE_THIS_COLLECTION": "Share this collection",
     "I18N_PLAYER_SHARE_THIS_EXPLORATION": "Share this exploration",
@@ -1243,6 +1244,9 @@
     "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_2": "Already have an account? ",
     "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_3": "Use the link below to save progress for 72 hours.",
     "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_5": "Write or copy the link below",
+    "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_1": "Your progress will be saved up to the last checkpoint you've reached.",
+    "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_2": "Create an account and have your progress saved automatically:",
+    "I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_3": "Or copy the link below to save progress for 72 hours:",
     "I18N_SAVE_PROGRESS": "Log in or sign up to save your progress and play through the next lesson.",
     "I18N_SAVE_PROGRESS_BUTTON_TEXT": "Copy",
     "I18N_SAVE_PROGRESS_COPY_TOOLTIP": "Copied!",

assets/i18n/qqq.json

@@ -1145,6 +1145,7 @@
 	"I18N_PLAYER_RETURN_TO_LIBRARY": "Text displayed when the user has finished an exploration outside of a collection. - Text shown inside a button after the user finishes playing an exploration outside a collection. When the user clicks the button, the library page is loaded.",
 	"I18N_PLAYER_RETURN_TO_PARENT": "Text displayed when the user has finished a refresher exploration. - Text shown inside a button after the user finishes playing a refresher exploration. When the user clicks the button, the parent exploration is loaded.",
 	"I18N_PLAYER_RETURN_TO_STORY": "Text displayed when the user has finished an exploration of a story. - Text shown inside a button after the user finishes playing an exploration of a story. When the user clicks the button, the story viewer page is loaded.",
+	"I18N_PLAYER_SAVE_BUTTON": "Text displayed when the user is playing an exploration while logged out. - Text shown in a button. When the user clicks the button, the 'Save Progress' modal is opened.",
 	"I18N_PLAYER_SHARE_EXPLORATION": "Text displayed when the user is playing an exploration. - When the user has completed the exploration, this text is shown above the social media buttons used to share an exploration.",
 	"I18N_PLAYER_SHARE_THIS_COLLECTION": "Text displayed when the user is viewing a collection. - this text is shown in the lower right hand side of the screen next to social media buttons used to share the collection.",
 	"I18N_PLAYER_SHARE_THIS_EXPLORATION": "Text displayed when the user is playing an exploration. - At all times during an exploration, this text is shown in the lower right hand side of the screen next to social media buttons used to share an exploration.",
@@ -1242,7 +1243,10 @@
 	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_1": "Text displayed on the save progress menu of exploration lesson info modal telling users that their progress will be automatically saved if they sign in.",
 	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_2": "Text displayed on the save progress menu of exploration lesson info modal asking the users whether they already have an account.",
 	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_3": "Text displayed on the save progress menu of exploration lesson info modal telling the users to use the generated progress URL to save their exploration progress.",
-	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_5": "Text displayed on the save progress menu of exploration lesson info modal prompting the users to write or copy the genrated URL.",
+	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_5": "Text displayed on the save progress menu of exploration lesson info modal prompting the users to write or copy the generated URL.",
+	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_1": "Text displayed on the new save progress menu of new lesson player telling users that their progress will be saved upto the last checkpoint.",
+	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_2": "Text displayed on the new save progress menu of new lesson player telling users that their progress will be automatically saved if they sign in.",
+	"I18N_SAVE_EXPLORATION_PROGRESS_TEXT_NEW_3": "Text displayed on the new save progress menu of new lesson player prompting the users to write or copy the generated URL.",
 	"I18N_SAVE_PROGRESS": "Text displayed at the end of a chapter to prompt the user to login or signup to save chapter progress.",
 	"I18N_SAVE_PROGRESS_BUTTON_TEXT": "Text displayed on the button in the Save progress card for copying the unique URL of the progress.",
 	"I18N_SAVE_PROGRESS_COPY_TOOLTIP": "Text that will be display in a tooltip for a second when the user clicks the copy button.",

core/templates/pages/exploration-player-page/new-lesson-player/lesson-player-page.component.html

@@ -7,7 +7,7 @@
     <oppia-player-sidebar></oppia-player-sidebar>
     <div class="oppia-new-player-main-content">
       <oppia-new-audio-bar></oppia-new-audio-bar>
-      <oppia-new-lesson-player-footer></oppia-new-lesson-player-footer>
+      <oppia-new-conversation-skin></oppia-new-conversation-skin>
     </div>
   </div>
   <attribution-guide></attribution-guide>

core/templates/pages/exploration-player-page/new-lesson-player/lesson-player-page.module.ts

@@ -40,6 +40,9 @@ import { PlayerHeaderComponent } from './new-lesson-player-components/player-hea
 import { PlayerSidebarComponent } from './new-lesson-player-components/player-sidebar.component';
 import { PlayerFooterComponent } from './new-lesson-player-components/player-footer.component';
 import { NewAudioBarComponent } from './new-lesson-player-components/new-audio-bar.component';
+import { NewConversationSkinComponent } from './new-lesson-player-components/new-conversation-skin.component';
+import { NewProgressNavComponent } from './new-lesson-player-components/new-progress-nav.component';
+import { NewComponentOverviewComponent } from './new-lesson-player-components/new-copy-url.component';
 
 @NgModule({
   imports: [
@@ -63,6 +66,9 @@ import { NewAudioBarComponent } from './new-lesson-player-components/new-audio-b
     PlayerSidebarComponent,
     PlayerFooterComponent,
     NewAudioBarComponent,
+    NewConversationSkinComponent,
+    NewProgressNavComponent,
+    NewComponentOverviewComponent,
   ],
   entryComponents: [
     NewLessonPlayerPageComponent,
@@ -71,6 +77,9 @@ import { NewAudioBarComponent } from './new-lesson-player-components/new-audio-b
     PlayerSidebarComponent,
     PlayerFooterComponent,
     NewAudioBarComponent,
+    NewConversationSkinComponent,
+    NewProgressNavComponent,
+    NewComponentOverviewComponent,
   ],
   providers: [
     HintAndSolutionModalService,

core/templates/pages/exploration-player-page/new-lesson-player/new-lesson-player-components/new-audio-bar.component.css

@@ -7,6 +7,6 @@
 .oppia-new-audio-bar {
   background-color: #fff;
   height: 40px;
-  position: absolute;
+  position: relative;
   width: 100%;
 }

core/templates/pages/exploration-player-page/new-lesson-player/new-lesson-player-components/new-conversation-skin.component.css

@@ -0,0 +1,212 @@
+/*
+  NOTE to developers: We generate RTL CSS from this file in the webpack
+  compilation, here are sme additional rules that can be added to the CSS files:
+  https://rtlcss.com/learn/usage-guide/control-directives .
+*/
+
+/* These styles must be embedded within the directive script tags, since
+otherwise they will interfere with the iframed conversation skin directive. */
+
+/* All classes below should start with .conversation-skin */
+.conversation-skin-correctness-footer-container {
+  bottom: 40px;
+  left: 0;
+  padding: 0;
+  pointer-events: none;
+  position: fixed;
+  width: 100%;
+  z-index: 16;
+}
+
+oppia-conversation-skin .supplemental-card-parent-container {
+  min-width: 50%;
+}
+
+.conversation-skin-next-lesson-wrapper {
+  align-items: center;
+  background-color: white;
+  bottom: 0;
+  display: flex;
+  margin: 0 0 -68px 0;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.conversation-skin-next-lesson-text {
+  color: #0d48a1;
+  display: block;
+  font-size: 14px;
+  font-weight: 800;
+  height: 14px;
+}
+
+.conversation-skin-cards-container {
+  align-items: flex-start;
+  display: -webkit-flex;
+  display: flex;
+  height: calc(100vh - 204px);
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 1650px;
+  overflow-y: auto;
+  padding: 56px 14px 0;
+  width: 100%;
+}
+
+.conversation-skin-cards-container::before {
+  background-image: url('/assets/images/background/lessonPlayer.png');
+  background-repeat: repeat;
+  bottom: 0;
+  content: "";
+  left: 0;
+  opacity: 0.2;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.conversation-skin-help-card-content {
+  padding: 12px;
+}
+
+.conversation-skin-tutor-card-container {
+  flex-shrink: 10000;
+  margin-bottom: 84px;
+  max-width: 650px;
+  /* NOTE TO DEVELOPERS: If min-width is changed, max-width in media query
+      below should be changed to match. */
+  min-width: 360px;
+  position: relative;
+  width: 42%;
+  z-index: 3;
+}
+
+/* Some mobile devices have CSS width below 360px, use a responsive min-width
+    when under 360px to prevent pushing things offscreen. */
+@media(max-width: 360px) {
+  .conversation-skin-tutor-card-container {
+    min-width: 100vw;
+  }
+}
+
+.conversation-skin-supplemental-card-container {
+  background-color: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.12);
+  flex-shrink: 1;
+  margin-bottom: 200px;
+  margin-left: 12px;
+  margin-top: 30px;
+  max-width: 650px;
+  position: relative;
+  width: 42%;
+  z-index: 2;
+}
+
+.conversation-skin-supplemental-nav-submit-button,
+.conversation-skin-supplemental-nav-submit-button.mat-button {
+  margin-right: 10px;
+  position: absolute;
+  right: 8px;
+  top: -10px;
+}
+
+.conversation-skin-supplemental-nav-submit-button.oppia-learner-confirm-button {
+  left: auto;
+  right: 8px;
+}
+
+.conversation-skin-supplemental-nav {
+  background: white;
+  height: 32px;
+  position: relative;
+}
+
+.oppia-conversation-skin-animate-cards-container {
+  margin: 0 auto;
+}
+
+.oppia-conversation-skin-next-lesson-text-container {
+  cursor: default;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+oppia-conversation-skin .oppia-button-raised.md-raised {
+  align-items: center;
+  background-color: #0d48a1;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
+oppia-conversation-skin .oppia-button-icon {
+  color: #fff;
+}
+
+.oppia-exploration-checkpoints-message .toast-container .checkpoints-toast-info {
+  cursor: default;
+}
+
+@media screen and (max-width: 959px) {
+  .conversation-skin-cards-container {
+    display: block;
+    padding: 66px 0;
+    position: relative;
+    width: 100%;
+  }
+
+  .conversation-skin-tutor-card-container {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.23);
+    left: 0;
+    margin: 0 auto;
+    right: 0;
+    top: 40px;
+    width: 100%;
+    z-index: 15;
+  }
+
+  .conversation-skin-tutor-card-alone {
+    position: relative;
+    top: 0;
+  }
+
+  .supplemental-card-parent-container {
+    position: unset;
+  }
+
+  .conversation-skin-supplemental-card-container {
+    left: 50%;
+    margin: 60px auto 0 auto;
+    min-width: 360px;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 100%;
+  }
+
+  .conversation-skin-oppia-avatar.show-tutor-card {
+    border-radius: 50%;
+    box-shadow: 0 3px 3px grey, 0 5px 3px grey;
+    display: block;
+    height: 40px;
+    left: 100%;
+    position: absolute;
+    transform: translate(-100%, -100%);
+    width: 40px;
+    z-index: 16;
+  }
+
+  .conversation-skin-oppia-avatar.show-tutor-card:hover {
+    opacity: 0.8;
+  }
+}
+
+@media screen and (max-width: 574px) {
+  .conversation-skin-cards-container {
+    height: calc(100vh - 192px);
+  }
+}