done

Dockerfile

@@ -1,6 +1,18 @@
 FROM golang:1.14.2-alpine3.11
 
 WORKDIR /app
-ADD / /app/
+COPY main.go /app
+COPY repository /app/repository
+COPY model /app/model
+COPY handler /app/handler
+COPY manager /app/manager
+COPY go.mod /app
+COPY go.sum /app
+
+WORKDIR /app/example/dist
+COPY example/dist /app/example/dist
+
+WORKDIR /app
+RUN ls
 RUN go build -o singo
 CMD ./singo

example/.env.development

@@ -0,0 +1 @@
+VUE_APP_WS_URL=ws://localhost:5000

example/.env.production

@@ -0,0 +1 @@
+VUE_APP_WS_URL=wss://twitro.com

example/Dockerfile

@@ -12,5 +12,7 @@ COPY . .
 
 RUN npm run build
 
+RUN rm -rf /app/node_modules
+
 EXPOSE 8080
 CMD [ "http-server", "dist" ]

example/src/components/VideoMenu.vue

@@ -13,35 +13,47 @@
     >
       <font-awesome-icon icon="bars" class="icon" />
     </v-btn>
-    <div v-show="opened">
-      <v-btn class="mx-2 my-2" fab dark color="cyan" @click="muteButtonClicked">
-        <font-awesome-icon v-show="!muted" icon="microphone" class="icon" />
-        <font-awesome-icon
-          v-show="muted"
-          icon="microphone-slash"
-          class="icon"
-        />
-      </v-btn>
-      <v-btn
-        class="mx-2 my-2"
-        fab
-        dark
-        color="cyan"
-        @click="videoButtonClicked"
-      >
-        <font-awesome-icon v-show="videoOn" icon="video" class="icon" />
-        <font-awesome-icon v-show="!videoOn" icon="video-slash" class="icon" />
-      </v-btn>
-      <v-btn
-        class="mx-2 my-2"
-        fab
-        dark
-        color="cyan"
-        @click="leaveButtonClicked"
-      >
-        <font-awesome-icon icon="sign-out-alt" class="icon" />
-      </v-btn>
-    </div>
+    <transition name="top-left">
+      <div v-show="opened">
+        <v-btn
+          class="mx-2 my-2"
+          fab
+          dark
+          color="cyan"
+          @click="muteButtonClicked"
+        >
+          <font-awesome-icon v-show="!muted" icon="microphone" class="icon" />
+          <font-awesome-icon
+            v-show="muted"
+            icon="microphone-slash"
+            class="icon"
+          />
+        </v-btn>
+        <v-btn
+          class="mx-2 my-2"
+          fab
+          dark
+          color="cyan"
+          @click="videoButtonClicked"
+        >
+          <font-awesome-icon v-show="videoOn" icon="video" class="icon" />
+          <font-awesome-icon
+            v-show="!videoOn"
+            icon="video-slash"
+            class="icon"
+          />
+        </v-btn>
+        <v-btn
+          class="mx-2 my-2"
+          fab
+          dark
+          color="cyan"
+          @click="leaveButtonClicked"
+        >
+          <font-awesome-icon icon="sign-out-alt" class="icon" />
+        </v-btn>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -68,6 +80,8 @@ export default class VideoMenu extends Vue {
   private opened = true;
   private refHeight = 0;
   private onMouseMoved = false;
+  private viewPortWidth: number;
+  private viewPortHeight: number;
 
   mounted() {
     document.ontouchmove = this.touchMove;
@@ -77,6 +91,17 @@ export default class VideoMenu extends Vue {
     this.ref = this.$refs.buttons as Element;
     const vel = this.$refs.openButton as Vue;
     this.openButtonRef = vel.$el;
+    this.viewPortWidth = window.innerWidth;
+    this.viewPortHeight = window.innerHeight;
+    this.setDefaultPosition();
+    window.onorientationchange = () => {
+      this.viewPortWidth = window.innerHeight;
+      this.viewPortHeight = window.innerWidth;
+      this.setDefaultPosition();
+    };
+  }
+  setDefaultPosition() {
+    this.updateButtonsPosition(0, 99999);
   }
   openClicked() {
     if (this.onMouseMoved) {
@@ -102,12 +127,13 @@ export default class VideoMenu extends Vue {
     this.dragging = false;
   }
 
-  get leftMax(): number {
-    return window.innerWidth - this.openButtonRef.clientWidth;
+  // getにすると、this.viewPortWidthを書き換えても発火しないので関数にする
+  calculateLeftMax(): number {
+    return this.viewPortWidth - this.openButtonRef.clientWidth;
   }
-  get topMax(): number {
+  calculateTopMax(): number {
     return (
-      window.innerHeight - this.refHeight - this.openButtonRef.clientHeight / 2
+      this.viewPortHeight - this.refHeight - this.openButtonRef.clientHeight / 2
     );
   }
   get leftMin(): number {
@@ -130,9 +156,9 @@ export default class VideoMenu extends Vue {
     this.refHeight = this.ref.clientHeight;
     let top = mouseY - this.openButtonRef.clientHeight / 2;
     let left = mouseX - this.openButtonRef.clientWidth / 2;
-    if (left > this.leftMax) left = this.leftMax;
+    if (left > this.calculateLeftMax()) left = this.calculateLeftMax();
     if (left < this.leftMin) left = this.leftMin;
-    if (top > this.topMax) top = this.topMax;
+    if (top > this.calculateTopMax()) top = this.calculateTopMax();
     if (top < this.topMin) top = this.topMin;
     this.buttonsStyle = `top: ${top}px; left: ${left}px`;
   }
@@ -152,4 +178,17 @@ export default class VideoMenu extends Vue {
 .icon {
   font-size: 24px;
 }
+.top-left-enter-active,
+.top-left-leave-active {
+  transform: translate(0px, 0px);
+  will-change: opacity;
+  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+.top-left-enter,
+.top-left-leave-to {
+  opacity: 0;
+  transform: translateY(0) translateX(-30%);
+}
 </style>

example/src/views/Room.vue

@@ -31,6 +31,7 @@ import { SingoClient } from "singo-sdk";
 import VideoScreen from "@/components/VideoScreen.vue";
 import VideoMenu from "@/components/VideoMenu.vue";
 import { disableBodyScroll } from "body-scroll-lock";
+const WS_URL = process.env.VUE_APP_WS_URL;
 @Component({
   components: { VideoMenu, VideoScreen }
 })
@@ -40,7 +41,7 @@ export default class Room extends Vue {
   private partnerStreamMap: Map<string, MediaStream> = new Map();
   private partnerStreams: MediaStream[] = [];
   private ref: Element;
-  private muted = true;
+  private muted = false;
   private videoOn = true;
 
   get roomId(): string {
@@ -52,7 +53,7 @@ export default class Room extends Vue {
     disableBodyScroll(this.ref);
     const sc = this.$refs.myScreen as HTMLVideoElement;
     this.client = new SingoClient(sc, {
-      SignalingServerEndpoint: "ws://localhost:5000"
+      SignalingServerEndpoint: WS_URL
     });
     await this.client.joinRoom(this.roomId);
     this.myStream = this.client.stream;

example/tsconfig.json

@@ -36,7 +36,8 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "node_modules/@types/node/globals.d.ts"
   ],
   "exclude": [
     "node_modules"

go.mod

@@ -3,6 +3,7 @@ module github.com/tockn/singo
 go 1.14
 
 require (
+	github.com/gorilla/mux v1.7.4
 	github.com/gorilla/websocket v1.4.2
 	github.com/rs/xid v1.2.1
 )

go.sum

@@ -1,3 +1,5 @@
+github.com/gorilla/mux v1.7.4 h1:VuZ8uybHlWmqV03+zRzdwKL4tUnIp1MAQtp1mIFE1bc=
+github.com/gorilla/mux v1.7.4/go.mod h1:DVbg23sWSpFRCP0SfiEN6jmj59UnW/n46BH5rLB71So=
 github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc=
 github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/rs/xid v1.2.1 h1:mhH9Nq+C1fY2l1XIpgxIiUOfNpRBYH1kKcr+qfKgjRc=

main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"log"
 	"net/http"
+	"strings"
 
 	"github.com/tockn/singo/handler"
 	"github.com/tockn/singo/manager"
@@ -20,9 +21,20 @@ func run() error {
 	man := manager.NewManager(roomRepo)
 	han := handler.NewHandler(man)
 
-  fs := http.FileServer(http.Dir("./sdk/dist"))
-  http.Handle("/", fs)
-	http.HandleFunc("/connect", han.CreateConnection)
+	fs := http.FileServer(http.Dir("./example/dist"))
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		log.Println(r.URL.Path)
+		if r.URL.Path == "/connect" {
+			han.CreateConnection(w, r)
+			return
+		}
+		sp := strings.Split(r.URL.Path, "/")
+		if len(sp) > 2 && (sp[1] == "js" || sp[1] == "css") {
+			fs.ServeHTTP(w, r)
+			return
+		}
+		http.ServeFile(w, r, "./example/dist/index.html")
+	})
 
 	log.Println("running...")
 	return http.ListenAndServe("0.0.0.0:5000", nil)

manager/room.go

@@ -1,6 +1,8 @@
 package manager
 
 import (
+	"log"
+
 	"github.com/tockn/singo/model"
 	"github.com/tockn/singo/repository"
 )
@@ -32,6 +34,7 @@ func (rm *Room) JoinRoom(c *model.Client, roomID string) error {
 	if _, err := rm.roomRepo.Update(r); err != nil {
 		return err
 	}
+	log.Printf("joined! clientID:%s, roomID: %s\n", c.ID, roomID)
 	return rm.notifyNewClient(roomID, c)
 }