Clip.qml 37.1 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19
import QtQuick 2.6
20
import QtQuick.Controls 2.2
21
import Kdenlive.Controls 1.0
22
23
import QtQml.Models 2.2
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26
27
28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1.0
30
31
32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
34
    property int modelStart
35
    property real scrollX: 0
36
37
38
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
39
    property int maxDuration: 0
40
    property bool isAudio: false
41
    property int audioChannels
42
    property bool showKeyframes: false
43
    property bool isGrabbed: false
44
    property bool grouped: false
45
    property var markers
46
    property var keyframeModel
47
48
    property int clipStatus: 0
    property int itemType: 0
49
50
    property int fadeIn: 0
    property int fadeOut: 0
51
    property int binId: 0
52
    property int positionOffset: 0
53
    property var parentTrack
54
55
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
56
57
58
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
59
    property int originalTrackId: -1
60
    property int originalX: x
61
62
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
63
    property int draggedX: x
64
    property bool selected: false
65
    property bool isLocked: parentTrack && parentTrack.isLocked == true
66
    property bool hasAudio
67
68
    property bool canBeAudio
    property bool canBeVideo
69
    property string hash: 'ccc' //TODO
70
    property double speed: 1.0
71
    property color borderColor: 'black'
72
    property bool forceReloadThumb
73
    property bool isComposition: false
74
    property var groupTrimData
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
75
    width : clipDuration * timeScale;
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
76
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
77

78
79
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedIn(var clip, bool shiftTrim, bool controlTrim)
80
    signal initGroupTrim(var clip)
81
82
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedOut(var clip, bool shiftTrim, bool controlTrim)
83

84
85
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
86
            grabItem()
87
88
        } else {
            mouseArea.focus = false
89
90
91
        }
    }

92
93
94
95
96
    function grabItem() {
        clipRoot.forceActiveFocus()
        mouseArea.focus = true
    }

97
98
    function clearAndMove(offset) {
        controller.requestClearSelection()
99
100
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
101
102
    }

103
    onClipResourceChanged: {
104
        if (itemType == ProducerType.Color) {
105
            color: Qt.darker(getColor(), 1.5)
106
107
        }
    }
108
    ToolTip {
109
        visible: mouseArea.containsMouse && !dragProxyArea.pressed
110
111
112
113
114
115
116
117
118
        font.pixelSize: root.baseUnit
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
119
            text: label.text + ' (' + timeline.simplifiedTC(clipRoot.inPoint) + '-' + timeline.simplifiedTC(clipRoot.outPoint) + ')'
120
121
122
        }
    }

123
124
    onKeyframeModelChanged: {
        console.log('keyframe model changed............')
125
126
127
        if (effectRow.keyframecanvas) {
            effectRow.keyframecanvas.requestPaint()
        }
128
129
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
130
131
    onClipDurationChanged: {
        width = clipDuration * timeScale;
132
133
134
135
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
            // Duration changed, we may need a different number of repeaters
            thumbsLoader.item.reload()
        }
136
    }
137

138
139
140
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
141
142
143
144
145
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
146
147
148
149
150
151
152
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
153
154
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
155
156
    }

157
    onForceReloadThumbChanged: {
158
        // TODO: find a way to force reload of clip thumbs
159
160
161
        if (thumbsLoader.item) {
            thumbsLoader.item.reload()
        }
162
163
    }

164
    onTimeScaleChanged: {
165
        x = modelStart * timeScale;
166
        width = clipDuration * timeScale;
167
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
168
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
169
            thumbsLoader.item.reload();
170
        }
171
172
173
    }
    onScrollXChanged: {
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
174
175
    }

Vincent Pinon's avatar
Vincent Pinon committed
176
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
177
    border.width: isGrabbed ? 8 : 1.5
178

179
180
181
182
183
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

184
    function getColor() {
185
186
187
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
188
        if (itemType == ProducerType.Color) {
189
190
191
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
192
            }
193
            return '#' + color.substring(color.length - 8, color.length - 2)
194
        }
195
        return isAudio? root.audioColor : root.videoColor
196
197
    }

198
/*    function reparent(track) {
199
        console.log('TrackId: ',trackId)
200
201
        parent = track
        height = track.height
202
        parentTrack = track
203
        trackId = parentTrack.trackId
204
        console.log('Reparenting clip to Track: ', trackId)
205
        //generateWaveform()
206
    }
207
*/
208
209
    property bool variableThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
    property bool isImage: itemType == ProducerType.Image
210
211
212
    property string baseThumbPath: variableThumbs ? '' : 'image://thumbnail/' + binId + '/' + (isImage ? '#0' : '#')
    property string inThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(inPoint * speed)
    property string outThumbPath: (variableThumbs || isImage ) ? baseThumbPath : baseThumbPath + Math.floor(outPoint * speed)
213

214
    DropArea { //Drop area for clips
215
216
217
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
218
        property string dropSource
219
        property int dropRow: -1
220
221
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
222
            dropSource = drag.getDataAsString('kdenlive/effectsource')
223
224
225
        }
        onDropped: {
            console.log("Add effect: ", dropData)
226
            if (dropSource == '') {
227
228
229
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
230
                controller.copyClipEffect(clipRoot.clipId, dropSource);
231
            }
232
            dropSource = ''
233
            dropRow = -1
234
            drag.acceptProposedAction
235
236
        }
    }
237
238
    MouseArea {
        id: mouseArea
239
        enabled: root.activeTool === 0
240
        anchors.fill: clipRoot
241
        acceptedButtons: Qt.RightButton
242
        hoverEnabled: root.activeTool === 0
243
        cursorShape: (trimInMouseArea.drag.active || trimOutMouseArea.drag.active)? Qt.SizeHorCursor : dragProxyArea.cursorShape
244
        onPressed: {
245
            root.autoScrolling = false
246
            if (mouse.button == Qt.RightButton) {
247
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
248
                    controller.requestAddToSelection(clipRoot.clipId, true)
249
250
251
                }
                clipMenu.clipId = clipRoot.clipId
                clipMenu.clipStatus = clipRoot.clipStatus
252
                clipMenu.clipFrame = Math.round(mouse.x / timeline.scaleFactor)
253
254
255
256
257
                clipMenu.grouped = clipRoot.grouped
                clipMenu.trackId = clipRoot.trackId
                clipMenu.canBeAudio = clipRoot.canBeAudio
                clipMenu.canBeVideo = clipRoot.canBeVideo
                clipMenu.popup()
258
            }
259
        }
260
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down || event.key === Qt.Key_Escape)
261
        Keys.onLeftPressed: {
262
263
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true);
264
265
        }
        Keys.onRightPressed: {
266
267
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + offset, true, true, true);
268
        }
269
270
271
272
273
274
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
275
276
        Keys.onEscapePressed: {
            timeline.grabCurrent()
277
            //focus = false
278
        }
279
        onPositionChanged: {
280
281
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
282
        }
283
284
285
286
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
287

288
289
        onExited: {
            endDrag()
290
        }
291
        onWheel: zoomByWheel(wheel)
292

293
294
        Item {
            // Thumbs container
295
            anchors.fill: parent
296
297
298
299
300
301
302
303
304
305
306
307
308
309
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
            Loader {
                id: thumbsLoader
                asynchronous: true
                visible: status == Loader.Ready
                anchors.fill: parent
                source: parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : itemType == ProducerType.Color ? "" : timeline.showThumbnails ? "ClipThumbs.qml" : ""
                onLoaded: {
                    item.reload()
                }
310
            }
311
        }
312

313
314
315
316
317
318
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
            anchors.margins: 1.5
            clip: true
319

320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
            Rectangle {
                // text background
                id: labelRect
                color: clipRoot.selected ? 'darkred' : '#66000000'
                width: label.width + 2
                height: label.height
                visible: clipRoot.width > width / 2
                Text {
                    id: label
                    text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: labelRect.top
                        left: labelRect.left
                        topMargin: 1
                        leftMargin: 1
                    }
                    color: 'white'
                    style: Text.Outline
                    styleColor: 'black'
                }
            }
            Rectangle {
                // Offset info
                id: offsetRect
                color: 'darkgreen'
                width: offsetLabel.width + radius
                height: offsetLabel.height
                radius: height/3
                x: labelRect.width + 4
                visible: labelRect.visible && positionOffset != 0
                MouseArea {
                    id: offsetArea
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: {
                        clearAndMove(positionOffset)
                    }
                    ToolTip {
                        visible: offsetArea.containsMouse
                        font.pixelSize: root.baseUnit
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
370
                            text: positionOffset < 0 ? i18n("Offset: -%1", timeline.simplifiedTC(-positionOffset)) : i18n("Offset: %1", timeline.simplifiedTC(positionOffset))
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
                        }
                    }
                    Text {
                        id: offsetLabel
                        text: positionOffset
                        font.pixelSize: root.baseUnit * 1.2
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            topMargin: 1
                            leftMargin: 1
                        }
                        color: 'white'
                        style: Text.Outline
                        styleColor: 'black'
                    }
                }
            }
            Rectangle {
                // effects
                id: effectsRect
                color: '#555555'
                width: effectLabel.width + 2
                height: effectLabel.height
                x: labelRect.x
                anchors.top: labelRect.bottom
                visible: labelRect.visible && clipRoot.effectNames != ''
                Text {
                    id: effectLabel
                    text: clipRoot.effectNames
                    font.pixelSize: root.baseUnit * 1.2
                    anchors {
                        top: effectsRect.top
                        left: effectsRect.left
                        topMargin: 1
                        leftMargin: 1
                        // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                    }
                    color: 'white'
                    //style: Text.Outline
                    styleColor: 'black'
                }
            }

            Repeater {
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
423
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale;
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
443
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
                            onClicked: timeline.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
                        font.pixelSize: root.baseUnit
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
460
                }
461
462
463
464
465
466
467
468
469
470
            }

            KeyframeView {
                id: effectRow
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.keyframeModel
471
472
            }
        }
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

505
        Rectangle {
506
507
508
509
510
511
512
513
514
515
516
517
            id: compositionIn
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.leftMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
518
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId
519
            visible: clipRoot.width > 4 * width
520
            MouseArea {
521
522
                id: compInArea
                anchors.fill: parent
523
524
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
525
526
527
528
529
530
531
532
533
534
535
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
                }
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, 0)
                }
                onReleased: {
                    parent.opacity = 0
536
537
                }
                ToolTip {
538
                    visible: compInArea.containsMouse && !dragProxyArea.pressed
539
540
541
542
543
544
545
546
547
                    font.pixelSize: root.baseUnit
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
548
                        text: i18n("Click to add composition")
549
550
551
552
                    }
                }
            }
        }
553
        Rectangle {
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
            id: compositionOut
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.rightMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio  && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
            MouseArea {
                id: compOutArea
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
570
                anchors.fill: parent
571
572
573
574
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.opacity = 0.7
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
575
                }
576
577
578
                onExited: {
                    if (!pressed) {
                        parent.opacity = 0
579
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
580
                }
581
582
583
584
585
586
587
588
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
                }
                onReleased: {
                    parent.opacity = 0
                }
                ToolTip {
                    visible: compOutArea.containsMouse && !dragProxyArea.pressed
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
589
                    font.pixelSize: root.baseUnit
590
591
592
593
594
595
596
597
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Yuri Chornoivan's avatar
Yuri Chornoivan committed
598
                        text: i18n("Click to add composition")
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
599
600
                    }
                }
601
602
            }
        }
603

604

605
606
607
608
609
610
611
612
613
        TimelineTriangle {
            id: fadeInTriangle
            fillColor: 'green'
            width: Math.min(clipRoot.fadeIn * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
614
        }
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
        Rectangle {
            id: fadeInControl
            anchors.horizontalCenter: fadeInTriangle.width > radius? fadeInTriangle.right : undefined
            anchors.top: fadeInTriangle.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#FF66FFFF'
            border.width: 2
            border.color: 'green'
            enabled: !isLocked && !dragProxy.isComposition
            opacity: 0
            visible : clipRoot.width > 3 * width
            Drag.active: fadeInMouseArea.drag.active
            MouseArea {
                id: fadeInMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property int startX
                property int startFadeIn
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
647
                }
648
                onPressed: {
649
                    root.autoScrolling = false
650
651
652
653
654
655
656
                    startX = Math.round(parent.x / timeScale)
                    startFadeIn = clipRoot.fadeIn
                    parent.anchors.left = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeInTriangle.opacity = 0.5
                    // parentTrack.clipSelected(clipRoot, parentTrack) TODO
657
                }
658
                onReleased: {
659
                    root.autoScrolling = timeline.autoScroll
660
                    fadeInTriangle.opacity = 0.3
661
                    parent.opacity = 0
662
663
664
665
666
667
668
669
670
671
672
673
                    if (fadeInTriangle.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeInTriangle.right
                    else
                        parent.anchors.left = fadeInTriangle.left
                    console.log('released fade: ', clipRoot.fadeIn)
                    timeline.adjustFade(clipRoot.clipId, 'fadein', clipRoot.fadeIn, startFadeIn)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = Math.round(parent.x / timeScale) - startX
                        var duration = Math.max(0, startFadeIn + delta)
674
                        duration = Math.min(duration, clipRoot.clipDuration - 1)
675
676
677
                        if (duration != clipRoot.fadeIn) {
                            timeline.adjustFade(clipRoot.clipId, 'fadein', duration, -1)
                            // Show fade duration as time in a "bubble" help.
678
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
679
680
681
                            bubbleHelp.show(clipRoot.x, parentTrack.y + clipRoot.height, s)
                        }
                    }
682
                }
683
            }
684
685
686
687
688
689
690
691
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeInMouseArea.containsMouse && !fadeInMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
692
                }
693
694
695
696
697
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
698
699
700
701
                }
            }
        }

702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
        TimelineTriangle {
            id: fadeOutCanvas
            fillColor: 'red'
            width: Math.min(clipRoot.fadeOut * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
            transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
        }
        Rectangle {
            id: fadeOutControl
            anchors.horizontalCenter: fadeOutCanvas.width > radius? fadeOutCanvas.left : undefined
            anchors.top: fadeOutCanvas.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#66FFFFFF'
            border.width: 2
            border.color: 'red'
            opacity: 0
            enabled: !isLocked && !dragProxy.isComposition
            Drag.active: fadeOutMouseArea.drag.active
            visible : clipRoot.width > 3 * width
            MouseArea {
                id: fadeOutMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                property int startX
                property int startFadeOut
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
743
                    }
744
                }
745
746
                drag.smoothed: false
                onPressed: {
747
                    root.autoScrolling = false
748
749
750
751
752
753
                    startX = Math.round(parent.x / timeScale)
                    startFadeOut = clipRoot.fadeOut
                    parent.anchors.right = undefined
                    parent.anchors.horizontalCenter = undefined
                    parent.opacity = 1
                    fadeOutCanvas.opacity = 0.5
754
                }
755
756
757
                onReleased: {
                    fadeOutCanvas.opacity = 0.3
                    parent.opacity = 0
758
                    root.autoScrolling = timeline.autoScroll
759
760
761
762
                    if (fadeOutCanvas.width > parent.radius)
                        parent.anchors.horizontalCenter = fadeOutCanvas.left
                    else
                        parent.anchors.right = fadeOutCanvas.right
763
764
765
766
767
                    var duration = clipRoot.fadeOut
                    if (duration > 0) {
                        duration += 1
                    }
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, startFadeOut)
768
769
770
771
772
773
774
775
776
777
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = startX - Math.round(parent.x / timeScale)
                        var duration = Math.max(0, startFadeOut + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (clipRoot.fadeOut != duration) {
                            timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                            // Show fade duration as time in a "bubble" help.
778
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
779
780
                            bubbleHelp.show(clipRoot.x + clipRoot.width, parentTrack.y + clipRoot.height, s)
                        }
781
                    }
782
783
                }
            }
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeOutMouseArea.containsMouse && !fadeOutMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
799
800
            }
        }
801
    }
802
803
804

    Rectangle {
        id: trimIn
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
805
        anchors.left: clipRoot.left
806
807
        anchors.leftMargin: 0
        height: parent.height
808
        enabled: !isLocked
809
        width: root.baseUnit / 3
810
811
812
813
        color: isAudio? 'green' : 'lawngreen'
        opacity: 0
        Drag.active: trimInMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
814
        visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
815

816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
        ToolTip {
            visible: trimInMouseArea.containsMouse && !trimInMouseArea.pressed
            font.pixelSize: root.baseUnit
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("In:%1\nPosition:%2", timeline.simplifiedTC(clipRoot.inPoint),timeline.simplifiedTC(clipRoot.modelStart))
            }
        }

831
832
833
834
835
836
        MouseArea {
            id: trimInMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: parent
            drag.axis: Drag.XAxis
837
            drag.smoothed: false
838
            property bool shiftTrim: false
839
            property bool controlTrim: false
840
            property bool sizeChanged: false
841
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
842
            onPressed: {
843
                root.autoScrolling = false
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
844
                clipRoot.originalX = clipRoot.x
845
                clipRoot.originalDuration = clipDuration
846
                parent.anchors.left = undefined
847
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
848
                controlTrim = mouse.modifiers & Qt.ControlModifier
849
850
851
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
852
                parent.opacity = 0
853
854
            }
            onReleased: {
855
                root.autoScrolling = timeline.autoScroll
856
                parent.anchors.left = clipRoot.left
857
                if (sizeChanged) {
858
                    clipRoot.trimmedIn(clipRoot, shiftTrim, controlTrim)
859
860
                    sizeChanged = false
                }
861
862
863
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
864
                    var delta = Math.round((trimIn.x) / timeScale)
865
                    if (delta !== 0) {
866
867
868
                        if (delta < -modelStart) {
                            delta = -modelStart
                        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
869
                        var newDuration =  clipDuration - delta
870
                        sizeChanged = true
871
                        clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
872
                    }
873
874
                }
            }
875
            onEntered: {
876
877
878
                if (!pressed) {
                    parent.opacity = 0.5
                }
879
880
881
882
            }
            onExited: {
                parent.opacity = 0
            }
883
884
885
886
        }
    }
    Rectangle {
        id: trimOut
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
887
        anchors.right: clipRoot.right
888
889
        anchors.rightMargin: 0
        height: parent.height
890
        width: root.baseUnit / 3
891
892
        color: 'red'
        opacity: 0
893
        enabled: !isLocked
894
895
        Drag.active: trimOutMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
896
        visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
897

898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
        ToolTip {
            visible: trimOutMouseArea.containsMouse && !trimOutMouseArea.pressed
            font.pixelSize: root.baseUnit
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
                text: i18n("Out: ") + timeline.simplifiedTC(clipRoot.outPoint)
            }
        }
        
913
914
915
916
        MouseArea {
            id: trimOutMouseArea
            anchors.fill: parent
            hoverEnabled: true
917
            property bool shiftTrim: false
918
            property bool controlTrim: false
919
            property bool sizeChanged: false
920
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
921
922
            drag.target: parent
            drag.axis: Drag.XAxis
923
            drag.smoothed: false
924
925

            onPressed: {
926
                root.autoScrolling = false
927
                clipRoot.originalDuration = clipDuration
928
                parent.anchors.right = undefined
929
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
930
                controlTrim = mouse.modifiers & Qt.ControlModifier
931
932
933
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
934
                parent.opacity = 0
935
936
            }
            onReleased: {
937
                root.autoScrolling = timeline.autoScroll
938
                parent.anchors.right = clipRoot.right
939
                if (sizeChanged) {
940
                    clipRoot.trimmedOut(clipRoot, shiftTrim, controlTrim)
941
942
                    sizeChanged = false
                }
943
944
945
946
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    var newDuration = Math.round((parent.x + parent.width) / timeScale)
947
                    if (newDuration != clipDuration) {
948
                        sizeChanged = true
949
                        clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
950
                    }
951
952
                }
            }
953
954
955
956
957
            onEntered: {
                if (!pressed) {
                    parent.opacity = 0.5
                }
            }
958
959
960
            onExited: parent.opacity = 0
        }
    }
961

962
        /*MenuItem {
963
            id: mergeItem
Yuri Chornoivan's avatar
Yuri Chornoivan committed
964
            text: i18n("Merge with next clip")
965
966
967
            onTriggered: timeline.mergeClipWithNext(trackIndex, index, false)
        }
        MenuItem {
Yuri Chornoivan's avatar
Yuri Chornoivan committed
968
            text: i18n("Rebuild Audio Waveform")
969
            onTriggered: timeline.remakeAudioLevels(trackIndex, index)
970
        }*/
971
        /*onPopupVisibleChanged: {
972
973
974
975
976
            if (visible && application.OS !== 'OS X' && __popupGeometry.height > 0) {
                // Try to fix menu running off screen. This only works intermittently.
                menu.__yOffset = Math.min(0, Screen.height - (__popupGeometry.y + __popupGeometry.height + 40))
                menu.__xOffset = Math.min(0, Screen.width - (__popupGeometry.x + __popupGeometry.width))
            }
977
        }*/
978
}