main.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. import Vue from "vue";
  2. import VueRouter from "vue-router";
  3. import store from "./store";
  4. import App from "./App.vue";
  5. import ws from "./ws";
  6. const REQUIRED_CONFIG_VERSION = 2;
  7. const handleMetadata = attrs => {
  8. document.title = `Musare | ${attrs.title}`;
  9. };
  10. Vue.component("Metadata", {
  11. watch: {
  12. $attrs: {
  13. // eslint-disable-next-line vue/no-arrow-functions-in-watch
  14. handler: attrs => {
  15. handleMetadata(attrs);
  16. },
  17. deep: true,
  18. immediate: true
  19. }
  20. },
  21. render() {
  22. return null;
  23. }
  24. });
  25. Vue.use(VueRouter);
  26. Vue.directive("scroll", {
  27. inserted(el, binding) {
  28. const f = evt => {
  29. clearTimeout(window.scrollDebounceId);
  30. window.scrollDebounceId = setTimeout(() => {
  31. if (binding.value(evt, el)) {
  32. window.removeEventListener("scroll", f);
  33. }
  34. }, 200);
  35. };
  36. window.addEventListener("scroll", f);
  37. }
  38. });
  39. Vue.directive("focus", {
  40. inserted(el) {
  41. window.focusedElementBefore = document.activeElement;
  42. el.focus();
  43. }
  44. });
  45. const router = new VueRouter({
  46. mode: "history",
  47. routes: [
  48. {
  49. path: "/",
  50. component: () => import("./pages/Home.vue")
  51. },
  52. {
  53. path: "/404",
  54. alias: ["*"],
  55. component: () => import("./pages/404.vue")
  56. },
  57. {
  58. path: "/terms",
  59. component: () => import("./pages/Terms.vue")
  60. },
  61. {
  62. path: "/privacy",
  63. component: () => import("./pages/Privacy.vue")
  64. },
  65. {
  66. path: "/team",
  67. component: () => import("./pages/Team.vue")
  68. },
  69. {
  70. path: "/news",
  71. component: () => import("./pages/News.vue")
  72. },
  73. {
  74. path: "/about",
  75. component: () => import("./pages/About.vue")
  76. },
  77. {
  78. name: "profile",
  79. path: "/u/:username",
  80. component: () => import("./pages/Profile/index.vue")
  81. },
  82. {
  83. path: "/settings",
  84. component: () => import("./pages/Settings/index.vue"),
  85. meta: {
  86. loginRequired: true
  87. }
  88. },
  89. {
  90. path: "/reset_password",
  91. component: () => import("./pages/ResetPassword.vue")
  92. },
  93. {
  94. path: "/set_password",
  95. props: { mode: "set" },
  96. component: () => import("./pages/ResetPassword.vue"),
  97. meta: {
  98. loginRequired: true
  99. }
  100. },
  101. {
  102. path: "/login",
  103. component: () => import("./components/modals/Login.vue")
  104. },
  105. {
  106. path: "/register",
  107. component: () => import("./components/modals/Register.vue")
  108. },
  109. {
  110. path: "/admin",
  111. component: () => import("./pages/Admin/index.vue"),
  112. meta: {
  113. adminRequired: true
  114. }
  115. },
  116. {
  117. path: "/admin/:page",
  118. component: () => import("./pages/Admin/index.vue"),
  119. meta: {
  120. adminRequired: true
  121. }
  122. },
  123. {
  124. name: "station",
  125. path: "/:id",
  126. component: () => import("./pages/Station/index.vue")
  127. }
  128. ]
  129. });
  130. lofig.folder = "../config/default.json";
  131. (async () => {
  132. lofig.fetchConfig().then(config => {
  133. const { configVersion, skipConfigVersionCheck } = config;
  134. if (
  135. configVersion !== REQUIRED_CONFIG_VERSION &&
  136. !skipConfigVersionCheck
  137. ) {
  138. // eslint-disable-next-line no-alert
  139. alert(
  140. "CONFIG VERSION IS WRONG. PLEASE UPDATE YOUR CONFIG WITH THE HELP OF THE TEMPLATE FILE AND THE README FILE."
  141. );
  142. window.stop();
  143. }
  144. });
  145. const websocketsDomain = await lofig.get("websocketsDomain");
  146. ws.init(websocketsDomain);
  147. ws.socket.on("ready", (loggedIn, role, username, userId) =>
  148. store.dispatch("user/auth/authData", {
  149. loggedIn,
  150. role,
  151. username,
  152. userId
  153. })
  154. );
  155. ws.socket.on("keep.event:banned", ban =>
  156. store.dispatch("user/auth/banUser", ban)
  157. );
  158. ws.socket.on("event:user.username.changed", username =>
  159. store.dispatch("user/auth/updateUsername", username)
  160. );
  161. ws.socket.on("keep.event:user.preferences.changed", preferences => {
  162. store.dispatch(
  163. "user/preferences/changeAutoSkipDisliked",
  164. preferences.autoSkipDisliked
  165. );
  166. store.dispatch(
  167. "user/preferences/changeNightmode",
  168. preferences.nightmode
  169. );
  170. store.dispatch(
  171. "user/preferences/changeActivityLogPublic",
  172. preferences.activityLogPublic
  173. );
  174. });
  175. router.beforeEach((to, from, next) => {
  176. if (window.stationInterval) {
  177. clearInterval(window.stationInterval);
  178. window.stationInterval = 0;
  179. }
  180. if (window.socket) ws.removeAllListeners();
  181. ws.clear();
  182. if (to.meta.loginRequired || to.meta.adminRequired) {
  183. const gotData = () => {
  184. if (to.meta.loginRequired && !store.state.user.auth.loggedIn)
  185. next({ path: "/login" });
  186. else if (
  187. to.meta.adminRequired &&
  188. store.state.user.auth.role !== "admin"
  189. )
  190. next({ path: "/" });
  191. else next();
  192. };
  193. if (store.state.user.auth.gotData) gotData();
  194. else {
  195. const watcher = store.watch(
  196. state => state.user.auth.gotData,
  197. () => {
  198. watcher();
  199. gotData();
  200. }
  201. );
  202. }
  203. } else next();
  204. });
  205. Vue.directive("click-outside", {
  206. bind(element, binding) {
  207. window.handleOutsideClick = event => {
  208. if (
  209. !(
  210. element === event.target ||
  211. element.contains(event.target)
  212. )
  213. ) {
  214. binding.value();
  215. }
  216. };
  217. document.body.addEventListener("click", window.handleOutsideClick);
  218. },
  219. unbind() {
  220. document.body.removeEventListener(
  221. "click",
  222. window.handleOutsideClick
  223. );
  224. }
  225. });
  226. // eslint-disable-next-line no-new
  227. new Vue({
  228. router,
  229. store,
  230. el: "#root",
  231. render: wrapper => wrapper(App)
  232. });
  233. })();