{"version":3,"sources":["webpack:///./src/components/VideoCourse/VideoDetailPage/VideoComment/VideoComment.vue?ab3f","webpack:///./src/components/VideoCourse/VideoDetailPage/VideoComment/VideoComment.vue?06a8","webpack:///src/components/VideoCourse/VideoDetailPage/VideoComment/VideoComment.vue","webpack:///./src/components/VideoCourse/VideoDetailPage/VideoComment/VideoComment.vue?1dcc","webpack:///./src/components/VideoCourse/VideoDetailPage/VideoComment/VideoComment.vue?b80b"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","i","key","attrs","hidecomment","_e","_v","_s","comment_count","user_detail","profile","name","profile_image","staticStyle","on","$event","type","indexOf","_k","keyCode","postComment","apply","arguments","model","value","callback","$$v","writtenComment","expression","comments","item","$vuetify","breakpoint","smAndUp","created_time","is_same_user","id","edit_flag","scopedSlots","_u","fn","ref","_g","_b","getActions","user","itemA","k","actionHanlder","icon","updateComment","$set","comment","edit_loader","show_more","substring","length","reply_flag","reply","itm","j","directives","rawName","staticRenderFns","components","AvatarOrInitials","ReplyComment","props","default","required","data","loading","page_info","detail_count","page_number","total_page","commentLoader","intersectLoader","commentActions","commentActions1","computed","video_id","user_id","is_admin_layout","watch","methods","deleteComment","params","Axios","onSuccess","onFailure","getComments","res","onIntersect","entries","mounted","component","VBtn","VIcon","VList","VListItem","VListItemGroup","VMenu","VProgressCircular","VSkeletonLoader","VSpacer","VTextField","VTextarea","Intersect"],"mappings":"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","file":"js/chunk-64a7effa.bf545836.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoComment.vue?vue&type=style&index=0&id=28038aff&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.loading)?_c('div',{staticClass:\"py-4\"},_vm._l((4),function(i){return _c('v-skeleton-loader',{key:i,staticClass:\"py-3\",attrs:{\"type\":\"article\"}})}),1):_c('div',{staticClass:\"py-4\"},[(!_vm.hidecomment)?_c('div',{staticClass:\"heading_text__class pb-4\"},[_vm._v(\" Comments (\"+_vm._s(_vm.comment_count)+\") \")]):_vm._e(),_c('div',{staticClass:\"d-flex\"},[_c('div',{staticClass:\"pt-1\"},[_c('avatar-or-initials',{attrs:{\"name\":_vm.user_detail ? _vm.user_detail.profile.name : '',\"image\":_vm.user_detail ? _vm.user_detail.profile.profile_image : '',\"size\":\"30\"}})],1),_c('div',{staticClass:\"d-flex pl-2\",staticStyle:{\"width\":\"100%\"}},[_c('v-text-field',{attrs:{\"label\":\"Write a comment\",\"outlined\":\"\",\"background-color\":\"#fff\",\"dense\":\"\"},on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }return _vm.postComment.apply(null, arguments)}},model:{value:(_vm.writtenComment),callback:function ($$v) {_vm.writtenComment=$$v},expression:\"writtenComment\"}})],1)]),(_vm.comments.length)?_c('div',[(_vm.commentLoader)?_c('div',{staticClass:\"text-center\"},[_c('v-progress-circular',{attrs:{\"size\":\"30\",\"indeterminate\":\"\",\"color\":\"#2f80ed\"}}),_vm._v(\" Loading... \")],1):_vm._e(),_vm._l((_vm.comments),function(item,i){return _c('div',{key:i,staticClass:\"comment_div__class py-3\"},[_c('div',{staticClass:\"avatar_div_class d-flex\"},[_c('div',[_c('avatar-or-initials',{attrs:{\"name\":item.profile.name,\"image\":item.profile.profile_image,\"size\":_vm.$vuetify.breakpoint.smAndUp ? '30' : '20'}})],1),_c('div',{staticClass:\"pl-2\",staticStyle:{\"width\":\"100%\"}},[_c('div',{staticClass:\"pb-2 d-flex\"},[_c('div',[_c('span',{staticClass:\"name_text__class\"},[_vm._v(_vm._s(item.profile.name))]),_c('v-icon',{staticClass:\"px-2\",attrs:{\"color\":\"#737373\",\"size\":\"5\"}},[_vm._v(\"mdi-circle\")]),_c('span',{staticClass:\"create_time\"},[_vm._v(_vm._s(item.created_time)+\" ago\")])],1),_c('v-spacer'),(\n                  (_vm.is_same_user || item.profile.id == _vm.user_detail.profile.id) &&\n                  !item.edit_flag\n                )?_c('div',[_c('v-menu',{attrs:{\"offset-y\":\"\"},scopedSlots:_vm._u([{key:\"activator\",fn:function(ref){\n                var attrs = ref.attrs;\n                var on = ref.on;\nreturn [_c('v-icon',_vm._g(_vm._b({},'v-icon',attrs,false),on),[_vm._v(\"mdi-dots-vertical\")])]}}],null,true)},[_c('v-list',[_c('v-list-item-group',_vm._l((_vm.getActions(item.profile.user)),function(itemA,k){return _c('v-list-item',{key:k,on:{\"click\":function($event){itemA.value === 'edit'\n                            ? (item = _vm.actionHanlder(itemA.value, item))\n                            : _vm.actionHanlder(itemA.value, item)}}},[_c('v-icon',[_vm._v(_vm._s(itemA.icon))])],1)}),1)],1)],1)],1):_vm._e()],1),(!item.edit_flag)?_c('div',[_c('div',{staticClass:\"comment_text__class\"},[(!item.show_more)?_c('span',[_vm._v(\" \"+_vm._s(item.comment.substring(0, 256))+\" \"),(item.comment.length >= 256)?_c('span',[_vm._v(\"... \"),_c('span',{staticClass:\"showMore\",on:{\"click\":function($event){item.show_more = !item.show_more}}},[_vm._v(\"Read more\")])]):_vm._e()]):_c('span',[_vm._v(\" \"+_vm._s(item.comment)+\" \")])])]):_c('div',[_c('div',[_c('v-textarea',{attrs:{\"outlined\":\"\",\"background-color\":\"#fff\",\"dense\":\"\"},on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"enter\",13,$event.key,\"Enter\")){ return null; }return _vm.updateComment(item)}},model:{value:(item.comment),callback:function ($$v) {_vm.$set(item, \"comment\", $$v)},expression:\"item.comment\"}})],1),_c('div',{staticClass:\"d-flex justify-end\"},[_c('v-btn',{staticClass:\"text-none my-0\",on:{\"click\":function($event){item.edit_flag = !item.edit_flag}}},[_c('span',[_vm._v(\"Cancel\")])]),_c('v-btn',{staticClass:\"text-none ml-2 my-0\",attrs:{\"color\":\"#515151\",\"disabled\":!item.comment,\"loading\":item.edit_loader},on:{\"click\":function($event){return _vm.updateComment(item)}}},[_c('span',{staticStyle:{\"color\":\"#ffffff\"}},[_vm._v(\"Update\")])])],1)]),(!item.edit_flag)?_c('div',[(!item.reply_flag)?_c('div',{staticClass:\"reply_text__class\",on:{\"click\":function($event){item.reply_flag = !item.reply_flag}}},[_vm._v(\" Reply \")]):_c('div',[_c('reply-comment',{attrs:{\"value\":item}}),_c('div',{staticClass:\"reply_text__class\",on:{\"click\":function($event){item.reply_flag = !item.reply_flag}}},[_vm._v(\" Hide \")])],1),(!item.reply_flag && item.reply.length)?_c('div',{staticClass:\"py-2\",staticStyle:{\"cursor\":\"pointer\",\"width\":\"100%\"},on:{\"click\":function($event){item.reply_flag = !item.reply_flag}}},_vm._l((item.reply),function(itm,j){return _c('div',{key:j},[_c('div',{staticClass:\"d-flex\"},[_c('div',[_c('avatar-or-initials',{attrs:{\"name\":item.profile.name,\"image\":item.profile.profile_image,\"size\":_vm.$vuetify.breakpoint.smAndUp ? '30' : '20'}})],1),_c('div',{staticClass:\"pl-2\"},[_c('div',[_c('span',{staticClass:\"name_text__class\"},[_vm._v(_vm._s(itm.profile.name))]),_c('v-icon',{staticClass:\"px-2\",attrs:{\"color\":\"#737373\",\"size\":\"5\"}},[_vm._v(\"mdi-circle\")]),_c('span',{staticClass:\"create_time\"},[_vm._v(_vm._s(itm.created_time)+\" ago\")])],1),_c('div',{staticClass:\"comment_text__class\"},[_vm._v(\" \"+_vm._s(itm.comment.substring(0, 256))+\" \"),(itm.comment.length >= 256)?_c('span',[_vm._v(\"...\")]):_vm._e()])])])])}),0):_vm._e(),(!item.reply_flag && item.reply.length)?_c('div',{staticClass:\"reply_text__class\",on:{\"click\":function($event){item.reply_flag = !item.reply_flag}}},[_vm._v(\" See all replies \")]):_vm._e()]):_vm._e()])])])})],2):_c('div',{staticClass:\"text-center\"},[_c('div',[_vm._v(\"There are no comments.\")])]),_c('div',{directives:[{name:\"intersect\",rawName:\"v-intersect\",value:(_vm.onIntersect),expression:\"onIntersect\"}],staticClass:\"py-5\"},[(_vm.intersectLoader)?_c('div',{staticClass:\"text-center\"},[_c('v-progress-circular',{attrs:{\"indeterminate\":\"\",\"color\":\"#2f80ed\"}}),_vm._v(\" Loading More... \")],1):_vm._e()])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div>\n    <div class=\"py-4\" v-if=\"loading\">\n      <v-skeleton-loader\n        v-for=\"i in 4\"\n        :key=\"i\"\n        class=\"py-3\"\n        type=\"article\"\n      ></v-skeleton-loader>\n    </div>\n    <div v-else class=\"py-4\">\n      <div class=\"heading_text__class pb-4\" v-if=\"!hidecomment\">\n        Comments ({{ comment_count }})\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"pt-1\">\n          <avatar-or-initials\n            :name=\"user_detail ? user_detail.profile.name : ''\"\n            :image=\"user_detail ? user_detail.profile.profile_image : ''\"\n            size=\"30\"\n          ></avatar-or-initials>\n        </div>\n        <div class=\"d-flex pl-2\" style=\"width: 100%\">\n          <v-text-field\n            v-model=\"writtenComment\"\n            label=\"Write a comment\"\n            outlined\n            background-color=\"#fff\"\n            dense\n            @keyup.enter=\"postComment\"\n          ></v-text-field>\n        </div>\n      </div>\n      <!-- comments data -->\n      <div v-if=\"comments.length\">\n        <div class=\"text-center\" v-if=\"commentLoader\">\n          <v-progress-circular\n            size=\"30\"\n            indeterminate\n            color=\"#2f80ed\"\n          ></v-progress-circular>\n          Loading...\n        </div>\n        <div class=\"comment_div__class py-3\" v-for=\"(item, i) in comments\" :key=\"i\">\n          <div class=\"avatar_div_class d-flex\">\n            <div>\n              <avatar-or-initials\n                :name=\"item.profile.name\"\n                :image=\"item.profile.profile_image\"\n                :size=\"$vuetify.breakpoint.smAndUp ? '30' : '20'\"\n              ></avatar-or-initials>\n            </div>\n            <!-- comments detail -->\n            <div class=\"pl-2\" style=\"width: 100%\">\n              <div class=\"pb-2 d-flex\">\n                <div>\n                  <span class=\"name_text__class\">{{ item.profile.name }}</span>\n                  <v-icon color=\"#737373\" class=\"px-2\" size=\"5\">mdi-circle</v-icon>\n                  <span class=\"create_time\">{{ item.created_time }} ago</span>\n                </div>\n                <v-spacer></v-spacer>\n                <div\n                  v-if=\"\n                    (is_same_user || item.profile.id == user_detail.profile.id) &&\n                    !item.edit_flag\n                  \"\n                >\n                  <v-menu offset-y>\n                    <template v-slot:activator=\"{ attrs, on }\">\n                      <v-icon v-bind=\"attrs\" v-on=\"on\">mdi-dots-vertical</v-icon>\n                    </template>\n                    <v-list>\n                      <v-list-item-group>\n                        <v-list-item\n                          v-for=\"(itemA, k) in getActions(item.profile.user)\"\n                          :key=\"k\"\n                          @click=\"\n                            itemA.value === 'edit'\n                              ? (item = actionHanlder(itemA.value, item))\n                              : actionHanlder(itemA.value, item)\n                          \"\n                        >\n                          <v-icon>{{ itemA.icon }}</v-icon>\n                          <!-- {{ item.name }} -->\n                        </v-list-item>\n                      </v-list-item-group>\n                    </v-list>\n                  </v-menu>\n                </div>\n              </div>\n              <div v-if=\"!item.edit_flag\">\n                <div class=\"comment_text__class\">\n                  <span v-if=\"!item.show_more\">\n                    {{ item.comment.substring(0, 256) }}\n                    <span v-if=\"item.comment.length >= 256\"\n                      >...\n                      <span class=\"showMore\" @click=\"item.show_more = !item.show_more\"\n                        >Read more</span\n                      >\n                    </span>\n                  </span>\n                  <span v-else>\n                    {{ item.comment }}\n                  </span>\n                </div>\n              </div>\n              <div v-else>\n                <div>\n                  <v-textarea\n                    v-model=\"item.comment\"\n                    outlined\n                    background-color=\"#fff\"\n                    dense\n                    @keyup.enter=\"updateComment(item)\"\n                  ></v-textarea>\n                </div>\n                <div class=\"d-flex justify-end\">\n                  <v-btn class=\"text-none my-0\" @click=\"item.edit_flag = !item.edit_flag\">\n                    <span>Cancel</span>\n                  </v-btn>\n                  <v-btn\n                    class=\"text-none ml-2 my-0\"\n                    color=\"#515151\"\n                    :disabled=\"!item.comment\"\n                    :loading=\"item.edit_loader\"\n                    @click=\"updateComment(item)\"\n                  >\n                    <span style=\"color: #ffffff\">Update</span>\n                  </v-btn>\n                </div>\n              </div>\n              <!-- replies section -->\n              <div v-if=\"!item.edit_flag\">\n                <div\n                  class=\"reply_text__class\"\n                  v-if=\"!item.reply_flag\"\n                  @click=\"item.reply_flag = !item.reply_flag\"\n                >\n                  Reply\n                </div>\n                <div v-else>\n                  <reply-comment :value=\"item\"></reply-comment>\n                  <div\n                    class=\"reply_text__class\"\n                    @click=\"item.reply_flag = !item.reply_flag\"\n                  >\n                    Hide\n                  </div>\n                </div>\n                <!-- end replies section -->\n                <!-- reply comment section -->\n                <div\n                  v-if=\"!item.reply_flag && item.reply.length\"\n                  @click=\"item.reply_flag = !item.reply_flag\"\n                  style=\"cursor: pointer; width: 100%\"\n                  class=\"py-2\"\n                >\n                  <div v-for=\"(itm, j) in item.reply\" :key=\"j\">\n                    <div class=\"d-flex\">\n                      <div>\n                        <avatar-or-initials\n                          :name=\"item.profile.name\"\n                          :image=\"item.profile.profile_image\"\n                          :size=\"$vuetify.breakpoint.smAndUp ? '30' : '20'\"\n                        ></avatar-or-initials>\n                      </div>\n                      <div class=\"pl-2\">\n                        <div>\n                          <span class=\"name_text__class\">{{ itm.profile.name }}</span>\n                          <v-icon color=\"#737373\" class=\"px-2\" size=\"5\"\n                            >mdi-circle</v-icon\n                          >\n                          <span class=\"create_time\">{{ itm.created_time }} ago</span>\n                        </div>\n                        <div class=\"comment_text__class\">\n                          {{ itm.comment.substring(0, 256) }}\n                          <span v-if=\"itm.comment.length >= 256\">...</span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div\n                  class=\"reply_text__class\"\n                  v-if=\"!item.reply_flag && item.reply.length\"\n                  @click=\"item.reply_flag = !item.reply_flag\"\n                >\n                  See all replies\n                </div>\n                <!-- end reply comment section -->\n              </div>\n              <!-- end replies section -->\n            </div>\n\n            <!-- end comments detail -->\n          </div>\n        </div>\n      </div>\n      <!-- end comments data -->\n      <!-- no data -->\n      <div class=\"text-center\" v-else>\n        <div>There are no comments.</div>\n      </div>\n      <!-- end no data -->\n      <!-- intersect section -->\n      <div class=\"py-5\" v-intersect=\"onIntersect\">\n        <div class=\"text-center\" v-if=\"intersectLoader\">\n          <v-progress-circular indeterminate color=\"#2f80ed\"></v-progress-circular>\n          Loading More...\n        </div>\n      </div>\n      <!-- end intersection -->\n    </div>\n  </div>\n</template>\n<script>\nimport apiUrl from \"@/common/apiUrl\";\nimport Axios from \"@/api/newAxios\";\nimport helper from \"@/helper/index\";\nexport default {\n  name: \"VideoComment\",\n  components: {\n    AvatarOrInitials: () => import(\"@/components/AvatarOrInitials.vue\"),\n    ReplyComment: () => import(\"./ReplyComment/ReplyComment.vue\"),\n  },\n  props: {\n    hidecomment: {\n      default: false,\n      type: Boolean,\n      required: false,\n    },\n  },\n  data() {\n    return {\n      loading: false,\n      comment_count: 0,\n      comments: [],\n      page_info: {\n        detail_count: 10,\n        page_number: 1,\n        total_page: 1,\n      },\n      writtenComment: \"\",\n      commentLoader: false,\n      intersectLoader: false,\n      commentActions: [\n        {\n          name: \"Edit\",\n          icon: \"mdi-pencil\",\n          value: \"edit\",\n        },\n        {\n          name: \"Delete\",\n          icon: \"mdi-delete\",\n          value: \"delete\",\n        },\n      ],\n      commentActions1: [\n        // {\n        //   name: \"Edit\",\n        //   icon: \"mdi-pencil\",\n        //   value: \"edit\",\n        // },\n        {\n          name: \"Delete\",\n          icon: \"mdi-delete\",\n          value: \"delete\",\n        },\n      ],\n    };\n  },\n  computed: {\n    video_id() {\n      return this.$route.query.vdid;\n    },\n    user_id() {\n      return this.$route.query.usid;\n    },\n    user_detail() {\n      return this.$store.state.user.user_detail;\n    },\n    is_same_user() {\n      return helper.isSameUser(this.user_id);\n    },\n    is_admin_layout() {\n      return this.$route.meta.layout === \"AdminPanel\";\n    },\n  },\n  watch: {},\n  methods: {\n    getActions(id) {\n      if (helper.isSameUser(id)) {\n        return this.commentActions;\n      } else {\n        return this.commentActions1;\n      }\n    },\n    actionHanlder(value, item) {\n      switch (value) {\n        case \"edit\":\n          //   console.log(\n          //     this.comments.findIndex((itm) => itm.id == item.id),\n          //     \"djdhj\",\n          //     item\n          //   );\n          item.edit_flag = !item.edit_flag;\n          return item;\n        case \"delete\":\n          this.deleteComment(item);\n          break;\n        default:\n          break;\n      }\n    },\n    deleteComment(item) {\n      const onSuccess = () => {\n        this.getComments();\n      };\n      const onFailure = () => {};\n      let params = {};\n      params[\"id\"] = item.id;\n      Axios(\"delete\", apiUrl.COMMENT_DETAIL, {\n        params,\n        onSuccess,\n        onFailure,\n      });\n    },\n    updateComment(item) {\n      item.edit_loader = !item.edit_loader;\n      const onSuccess = () => {\n        item.edit_loader = !item.edit_loader;\n        item.edit_flag = !item.edit_flag;\n      };\n      const onFailure = () => {};\n      let data = {};\n      data[\"comment\"] = item.comment;\n      data[\"id\"] = item.id;\n      Axios(\"patch\", apiUrl.COMMENT_DETAIL, {\n        data,\n        onSuccess,\n        onFailure,\n      });\n    },\n    postComment() {\n      if (this.writtenComment) {\n        const onSuccess = () => {\n          this.writtenComment = \"\";\n          this.commentLoader = true;\n          this.getComments();\n        };\n        const onFailure = () => {};\n        let data = {};\n        data[\"comment\"] = this.writtenComment;\n        data[\"video\"] = this.video_id;\n        data[\"commentor\"] = this.user_detail.profile.id;\n        Axios(\"post\", apiUrl.COMMENT_DETAIL, {\n          data,\n          onSuccess,\n          onFailure,\n        });\n      }\n    },\n    getComments(intersect) {\n      const onSuccess = (res) => {\n        if (intersect) {\n          for (const obj of res.data.comments) {\n            this.comments.push(obj);\n          }\n        } else {\n          this.comments = res.data.comments;\n        }\n        this.comment_count = res.data.counts;\n        this.page_info = res.data.page_info;\n        this.loading = false;\n        this.commentLoader = false;\n      };\n      const onFailure = () => {\n        this.loading = false;\n        this.commentLoader = false;\n      };\n      let params = {};\n      params[\"video_id\"] = this.video_id;\n      params[\"detail_count\"] = this.page_info.detail_count;\n      params[\"page_number\"] = this.page_info.page_number;\n      Axios(\"get\", apiUrl.COMMENT_LIST, {\n        params,\n        onSuccess,\n        onFailure,\n      });\n    },\n    onIntersect(entries) {\n      // console.log(entries, observer);\n      this.intersectLoader = true;\n      entries.forEach((entry) => {\n        if (entry.isIntersecting) {\n          this.page_info.page_number += 1;\n          if (this.page_info.page_number <= this.page_info.total_page) {\n            this.getComments(true);\n          } else {\n            this.intersectLoader = false;\n          }\n        }\n      });\n    },\n    // postComment() {\n    //   if (this.writtenComment) {\n    //     const onSuccess = () => {\n    //       this.writtenComment = \"\";\n    //       this.commentLoader = true;\n    //       this.getComments();\n    //     };\n    //     const onFailure = () => {};\n    //     let data = {};\n    //     data[\"comment\"] = this.writtenComment;\n    //     data[\"video\"] = this.video_id;\n    //     data[\"commentor\"] = this.user_detail.profile.id;\n    //     Axios(\"post\", apiUrl.COMMENT_DETAIL, {\n    //       data,\n    //       onSuccess,\n    //       onFailure,\n    //     });\n    //   }\n    // },\n  },\n  mounted() {\n    this.loading = true;\n    this.getComments();\n  },\n};\n</script>\n<style scoped>\n.heading_text__class {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 16px;\n  line-height: 22px;\n  /* identical to box height */\n\n  color: #333333;\n}\n.name_text__class {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 900;\n  font-size: 15px;\n  line-height: 20px;\n\n  color: #333333;\n}\n.created_time {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 500 !important;\n  font-size: 14px;\n  line-height: 19px;\n\n  color: #6f6f6f !important;\n}\n.comment_text__class {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 24px;\n  /* or 171% */\n\n  color: #737373;\n}\n.showMore {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 900;\n  font-size: 14px;\n  line-height: 23px;\n  /* or 164% */\n\n  color: #333333;\n  cursor: pointer;\n}\n.reply_text__class {\n  font-family: \"Avenir\";\n  font-style: normal;\n  font-weight: 900;\n  font-size: 14px;\n  line-height: 24px;\n  /* identical to box height, or 171% */\n\n  color: #333333;\n  cursor: pointer;\n}\n@media all and (max-width: 600px) {\n  .name_text__class {\n    font-size: 13px;\n    line-height: 18px;\n  }\n  .comment_text__class {\n    font-size: 12px;\n    line-height: 21px;\n  }\n  .showMore {\n    font-size: 12px;\n    line-height: 21px;\n  }\n  .reply_text__class {\n    font-size: 12px;\n    line-height: 16px;\n  }\n}\n</style>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoComment.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoComment.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VideoComment.vue?vue&type=template&id=28038aff&scoped=true&\"\nimport script from \"./VideoComment.vue?vue&type=script&lang=js&\"\nexport * from \"./VideoComment.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VideoComment.vue?vue&type=style&index=0&id=28038aff&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"28038aff\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VList } from 'vuetify/lib/components/VList';\nimport { VListItem } from 'vuetify/lib/components/VList';\nimport { VListItemGroup } from 'vuetify/lib/components/VList';\nimport { VMenu } from 'vuetify/lib/components/VMenu';\nimport { VProgressCircular } from 'vuetify/lib/components/VProgressCircular';\nimport { VSkeletonLoader } from 'vuetify/lib/components/VSkeletonLoader';\nimport { VSpacer } from 'vuetify/lib/components/VGrid';\nimport { VTextField } from 'vuetify/lib/components/VTextField';\nimport { VTextarea } from 'vuetify/lib/components/VTextarea';\ninstallComponents(component, {VBtn,VIcon,VList,VListItem,VListItemGroup,VMenu,VProgressCircular,VSkeletonLoader,VSpacer,VTextField,VTextarea})\n\n\n/* vuetify-loader */\nimport installDirectives from \"!../../../../../node_modules/vuetify-loader/lib/runtime/installDirectives.js\"\nimport Intersect from 'vuetify/lib/directives/intersect'\ninstallDirectives(component, {Intersect})\n"],"sourceRoot":""}